This tutoriel concerns the menus in color modules _black, _blue, _green, _red.
We shall see the example of the menu " user menu " with a module _green
We are going to apply first the module class suffix "_ green " to the module " user menu ".
Here is what we will do :
All takes place in the file template.css
Folder : template > ja_purity_ii > css > template.css
1-Authorize to change the color of the links
We will authorize to change the color of the links By modifying this line :
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { color: #fff !important; }
As this :
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { }
2- Title module color
To change the color title in red, we will add a line of CSS code :
div.module_green h3 {color: #900;}
3- Color of menu links
To change the color of the menu links in yellow, we will add this line of CSS code :
#ja-container .module_green ul.menu li a {color: #ff0;}
4- Color of the links "hover" and the background
To change the "hover" links in yellow with a black background, we will add this line of CSS code :
#ja-container .module_green ul.menu li a:hover {background: #000; color: #ff0;}
5- Actives links
To be able to change the color of actives links, we have to modify the follow line :
#ja-container ul.menu li.active > a { color: #069 !important; font-weight: bold !important; }
As this :
#ja-container ul.menu li.active > a { color: #069; font-weight: bold !important; }
To have a red active link with light green background, we will ad the follow lines of CSS code :
#ja-container .module_green ul.menu li a:focus,
#ja-container .module_green ul.menu li.active a,
#ja-container .module_green ul.menu li a:active {background: #ceffbf; color: #f00;}
All what we have applied for the module class suffix _green, we can apply it for the others colors of modules.
