Charger le tutoriel au format PDF ![]()
Ce tutoriel concerne les modules de menus de couleur _black, _blue, _green, _red.
Nous verrons l'exemple du menu "user menu" avec un module _green
Nous allons tout d'abord appliquer le suffixe de classe de module "_green" au module "user menu".
Pour celà, il faut se rendre dans l'administration des modules, au niveau des paramètres avancés.

Voilà ce que nous allons réaliser :

Tout va se passer dans le fichier template.css
Chemin : template > ja_purity_ii > css > template.css
1-Autoriser le changement de couleur des liens
Nous allons autoriser le changement de couleur des liens de menu en modifiant
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { color: #fff !important; }
Comme ceci :
div.module_black *, div.module_green *, div.module_blue *, div.module_red * { }
2- Couleur du titre du module
Afin de changer la couleur du titre en rouge, nous allons rajouter la ligne de code suivante :
div.module_green h3 {color: #900;}
3- Couleur des liens de menu
Afin de changer la couleur des liens de menu en jaune, nous allons rajouter la ligne suivante :
#ja-container .module_green ul.menu li a {color: #ff0;}
4- Couleur des liens survolés et de l'arrière plan
pour modifier les liens survolés en jaune avec un fond noir, nous allons rajouter la ligne suivante :
#ja-container .module_green ul.menu li a:hover {background: #000; color: #ff0;}
5- Les liens actifs

Pour pouvoir changer la couleur des liens actifs, il va falloir modifier la ligne :
#ja-container ul.menu li.active > a { color: #069 !important; font-weight: bold !important; }
Comme suit :
#ja-container ul.menu li.active > a { color: #069; font-weight: bold !important; }
Pour avoir un lien actif rouge sur un fond vert clair, nous allons ajouter les lignes suivantes :
#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;}
Tout ce que nous venons d'appliquer pour le suffixe de classe de module _green, nous pouvons l'appliquer pour les autres couleurs de modules.
















