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.

Utilisé à ce jour dans 483 sites
logo article ou rubrique
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 :

  1. ul#menu li.rubriqueXX a,
  2. ul#menu li.rubriqueXX ul,
  3. ul#menu li.rubriqueXX li{
  4. background-color: #couleur1;
  5. color: #couleur2
  6. }

Télécharger

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

  1. ul.nav li.rubriqueXX a, ul.nav li.rubriqueXX div{
  2. background-color: #couleur1;
  3. }
  4. ul.nav li.rubriqueXX > a,
  5. .nav li.rubriqueXX .nav-column li.article,
  6. .nav li.rubriqueXX  .nav-column li.article a{
  7. color: #couleur2 !important;
  8. }
  9. .nav li.rubriqueXX .nav-column h3,
  10. .nav li.rubriqueXX .nav-column ul ul .rubrique a {
  11. color: #couleur3;
  12. }

Télécharger

Et pour avoir la même coloration sur le menu pour mobile, ce sera

  1. ul#main-menu li.rubriqueXX a,
  2. ul#main-menu li.rubriqueXX ul,
  3. ul#main-menu li.rubriqueXX li{
  4. background-color: #couleur1;
  5. color: #couleur2
  6. }

Télécharger

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article314

Dans la même rubrique

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.99