Bandeau
Escal V3
Site de démonstration

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.

Un menu en couleur
Article mis en ligne le 16 mars 2017

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

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, ul#menu li.rubriqueXX ul, ul#menu li.rubriqueXX li{
  2. background-color: #couleur;
  3. }

Télécharger

où il faudra remplacer

  • les 3 occurrences de XX par le numéro du secteur
  • le #couleur par le code couleur de votre choix

Et il faudra dupliquer ce code pour chaque secteur.


Forum
Répondre à cet article
Colorer juste le fond autour des menus dans le bandeau
christian voillemont - le 16 août 2017

Bonjour,

Est il possible de mettre le même fond que le bandeau autour des menus horizontaux, sans toucher au bouton des menus et a leur fond ?

Merci d’avance

Colorer juste le fond autour des menus dans le bandeau
Jean Christophe Villeneuve - le 16 août 2017

Hello

Oui, bien sur !
Tu mets un

ul#menu {
 background-color: #XXXXXX;
}

dans ton perso.css et hop !

Un menu en couleur
christian voillemont - le 31 mai 2017

Bonsoir,
en plus de colorer le menu, je voudrais mettre un lien dans la menu et coloré en plus !
Et peut être même une icône !

J’avais vu une fois les codes pour insérer un lien dans le menu, mais je ne retrouve pas.

Comment fait on ?

Merci d’avance.

Un menu en couleur
yves - le 31 mai 2017

bonjour,
Pour le texte, en plus du background je mettrais :
color : rgb(x, y, z) ;
color : #la couleur

Voire rgba’x,y,z, 0.n) pour faire joujou avec la transparence.

Pour l’image je mettrais :
background-image : url("adresse-de-mon-image")
background-repeat : no-repeat ; (dans le cas d’une seule image en bkg)
background-attachment : fixed ;
background-position : truc ;
avec truc= left,right ou center à combiner avec top et bottom.
En plus de ça on peut donner la position en pixel ou en % à partir du bord haut et à gauche...

Bonne journée,
Yves

Un menu en couleur
christian voillemont - le 31 mai 2017

par contre je n’arrive pas à colorer le menu.
Est ce à cause de l’astuce de l’article virtuel ?

J’ai mis ce code

ul#menu li.rubrique65 a, ul#menu li.rubrique65 ul, ul#menu li.rubrique65 li{
   background-color: ##FF4571;
   }

Un menu en couleur
Jean Christophe Villeneuve - le 31 mai 2017

Y’a juste un # de trop dans ton code couleur ;-)

Un menu en couleur
Jean Christophe Villeneuve - le 31 mai 2017

Hello

Une astuce pour avoir un lien dans le menu est donnée dans l’article sur le plugin agenda. On utilise un article virtuel, unique article d’une rubrique de premier niveau.

Après, si cette rubrique a un logo, il s’affichera dans le menu si on a coché l’option dans Escal.

Et pour la couleur, ben la réponse est dans cet article.

Un menu en couleur
christian voillemont - le 31 mai 2017

Bonjour,

Merci pour l’astuce je l’utilise déja beaucoup.
Là c’est pour un lien externe vers un flux audio.
J’ai peut être oublié de le préciser.

Un menu en couleur
Jean Christophe Villeneuve - le 31 mai 2017

Et alors ?
Qu’est-ce qui t’empêche de mettre un lien externe en redirection à partir de ton article virtuel ?

Un menu en couleur
christian voillemont - le 31 mai 2017

Rien !

On peut ?

Je pensais que les articles virtuels c’était juste interne.

Je le fait de ce pas !

Merci à tous



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

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.26