Tips and Tricks for Custom CSS
From Flux Developer Portal
Can I create a graphical community menu?
If you need to implement a graphical menu for your community, please use the steps below.
1. Create a matrix image file which will contain all menu items’ images (for all menu item states). The GIF format is preferred.
2. Update your community common.css file. Set background for the ‘body .Flux .menuBar .menuItem a ‘ selector. E.g.:
body .Flux .menuBar .menuItem a {
display: block;
white-space: nowrap;
height: 25px;
background: transparent url(/-/Clients/aurgasm/Img/menuTop.gif) no-repeat top
left;
}
Every graphical menu item has the ‘menuItemNum_[N]’ class, where [N] is a number begin from 0. You should set background positions and widths (optional) for all menu items. This is an example for the first menu item:
body .Flux .menuBar .menuItemNum_0 a {
width: 94px;
background-position: 0px 0px;
}
body .Flux .menuBar .menuItemNum_0 a.selected,
body .Flux .menuBar .menuItemNum_0 a:hover {
background-position: 0px -30px;
}
I want to do something with Javascript to do an effect a module's div
We do not recommend using the module div IDs. It's not good practice. Every module has main container div with unique class name. Please use it for styling.
