Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Un menu en couleur
Article mis en ligne le 16 mars 2017
dernière modification le 28 février 2019

par Jean Christophe Villeneuve

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
}
qrcode:https://escal.edu.ac-lyon.fr/spip/spip.php?article314

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.6.2