[Jean le Chauve]

En réponse à une demande postée sur le forum .org

Ceci pourrait être utile si vous souhaitez appliquer des propriétés css dans la navigation.
Exemple pour un menu avec une couleur différente pour chaque onglet :

Allez dans le gabarit de votre menu, ici : cssmenu_ulshadow.tpl

Code :

...
{elseif $node->index > 0}</li>
{/if}
// Ajoutez cette ligne
{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><a
// et modifiez le if suivant par elseif
{elseif $node->parent == true or ($node->current == true and $node->haschildren == true)}
//Ajoutez menu{$node->hierarchy} dans la classe
<li class="menuactive menuparent menu{$node->hierarchy}">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
//idem et c'est fini
<li class="menuparent menu{$node->hierarchy}">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span> {elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{else}
<li>
<a {/if}
...

Et voilà, tous les <li> de niveau 1 ont maintenant une classe supplémentaire pour vous permettre de modifier leur couleur ou toute autre propriété via la feuille de styles.
.menu1 {color:black;}
.menu2 {color:yellow;}
etc.
ATTENTION, n'oubliez pas de laisser une espace après chaque "<a", sinon vos liens seront
interprétés ainsi : <ahref au lieu de <a href.
Have fun

[bess]

très bon, par contre ton image png est sur ton disque dur mon grand

[Jean le Chauve]

Oups, corrigé

[St. George B]

'lut jean le chauve,

J'ai trouvé très intéressant ce post sur les menus colorés, j'ai donc voulu essayé ça mais je n'arrive pas au résulta escompté.

Je pense que je flanche au niveau de la modif dans la feuille de styles, je ne sais pas vraiment comment insérer les nouvelles données :
.menu1 {color:black;}
.menu2 {color:yellow;}

En même temps, j'vous avouerais que j'suis loin d'être un expert en CSS.

Il y aurait il donc une âme charitable pour éclairer ma lanterne ?

Je remercie d'avance la communauté qui contribue au développement de CMSMS et a cette liberté d'indépendance qui nous est cher.

[Jean le Chauve]

Bin, tu places
.menu1 {color:celleQueTuVeux}
.menu2 {color:autreCouleur;}
etc.
dans la feuille de style de ton gabarit.
http://www.siteduzero.com/tutoriel-3-136...part_13663

[Jean le Chauve]

Attention, le projet http://www.gabbaresista.fr/CAC/ n'est pas valide xtml (http://validator.w3.org/check?verbose=1&...r%2FCAC%2F), et donc, tu dois d'abord le valider avant de te préoccuper du design, sinon, tu en as pour des années
Regarde ton site sous Google chrome ou IE, tu vas pleurer.

[St. George B]

Merci pour ta réactivité !

J'ai intégré basiquement à ma feuille de style :
.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}

Mais je suppose que ce n(est pas comme ça qu'il faux s'y prendre.

Peux tu me dire plus précisément ou dois-je mettre ce p'tit bout de code STP ?

Je suis bien conscient que de me mâcher le travail n'est pas la vocation du forum,
Mais là je patine dans semoule.

Merci !!!

Code :

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

.menu1 {color:#ffffff;}
.menu2 {color:#C03000;}
.menu3 {color:#eed740;}
.menu4 {color:#FF358B;}

#menu_vert {
   margin-left: 1px;
font-size:1.1em;
background-color:#000;
   margin-right: 0px;
border-right:#000 1px solid;
}


/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
   /* Fix for Opera 8 */
   /*   overflow: hidden;  */
   background-color: #000;
   border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
   width: 99%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
   list-style: none;
   margin-left:0px;
   padding: 0px;
}
#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
#primary-nav ul ul {
   margin-top: 1px;
   margin-left: -1px;
   left: 100%;
   top: 0px;
}
    
#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav li li {
   margin-left: 0px;
   margin-top: -1px;
   float: none;
   position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
   display: block;
   margin: 0px;
   padding: 9px;
   text-decoration: none;
   color: #ffffff;
}

#primary-nav li a {
   border-left: 1px solid #86c0ff;
}
#primary-nav li li a {
   border: 1px solid #86c0ff;
}    
#primary-nav li, #primary-nav li.menuparent {
   background-color: #000000;
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
   background-color: #ff8c33;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif);
   background-position: center right;
   background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
   background-color: #6198c7;
}

#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}


/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}@charset "UTF-8";
/* CSS Document */

[Jean le Chauve]

Écris plutôt #primary-nav li.menu1 au lieu de .menu1. et place ces propriétés en fin de la css et pas au début. Il y a des priorités dans les css : # est prioritaire par rapport à .

[St. George B]

J'ai mis ma feuille de style dans mon précédent post
Et le projet en cours est à : http://www.gabbaresista.fr/CAC/
En fait, je souhaiterai que mon menu ressemble à celui qui se trouve tout en haut de la bannierede mon site.

[Jean le Chauve]

J'ai modifié le post précédent, les propriétés sont prises en compte, mais il faut que tu écrives plutôt #primary-nav li.menu1 au lieu de .menu1. et que tu places ces propriétés en fin de la css et pas au début. Il y a des priorités dans les css : # est prioritaire par rapport à .

[Jean le Chauve]

Pour ton cas, écris #primary-nav li.menu1 a {color:taCouleur;}
C'est toi qui a fait les affiches ?

[Jean le Chauve]

Ah, ça marche

[St. George B]

Super Merci pour ton aide Jean le Chauve,

Ça fonctionne parfaitement.
J'vais donc maintenant pouvoir aller me coucher serein grâce à ta contribution.

ThanXxXx !!!