On peut jouer avec les couleurs dans le menu horizontal en définissant une couleur pour chaque secteur (rubrique de premier niveau) du site.
Pour cela il va falloir ajouter un peu de CSS dans le fichier /squelettes/styles/perso.css (dossiers et fichier à créer si pas existant)
Le code à ajouter est celui-ci :
ul#menu li.rubriqueXX a,
ul#menu li.rubriqueXX ul,
ul#menu li.rubriqueXX li{
background-color: #couleur1;
color: #couleur2
}
où il faudra remplacer
- les 3 occurrences de XX par le numéro du secteur
- les #couleur1 et #couleur2par les codes couleur de votre choix
Et il faudra dupliquer ce code pour chaque secteur.
Pour le menu horizontal en grande largeur (Mega menu déroulant), le code est un peu plus complexe et sera du genre
ul.nav li.rubriqueXX a, ul.nav li.rubriqueXX div{
background-color: #couleur1;
}
ul.nav li.rubriqueXX > a,
.nav li.rubriqueXX .nav-column li.article,
.nav li.rubriqueXX .nav-column li.article a{
color: #couleur2 !important;
}
.nav li.rubriqueXX .nav-column h3,
.nav li.rubriqueXX .nav-column ul ul .rubrique a {
color: #couleur3;
}
Et pour avoir la même coloration sur le menu pour mobile, ce sera
ul#main-menu li.rubriqueXX a,
ul#main-menu li.rubriqueXX ul,
ul#main-menu li.rubriqueXX li{
background-color: #couleur1;
color: #couleur2
}