Purity2.fr

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 ".

For that purpose, it is necessary to go in the administration of modules, at the level of the Advanced Parameters.

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.