Faire des onglets de menu de couleurs diférentes

[odile]

Bonjour à tous,

Je voudrais que chaque onglet de mon menu apparaisse d'une couleur différente.
Ca semble tout bete, mais je ne voudrais pas faire ni bidouille, ni une usine à gaz.

Merci de votre aide;

Odile

[lomart]

Re : Faire des onglets de menu de couleurs diférentes

Bonsoir,

La première solution est de repérer la classe de la balise LI de l'onglet avec un inspecteur de code. En général, cela ressemble à item-123. Ensuite créer une règle CSS pour définir la couleur.

La deuxième solution est d'ajouter une classe, par exemple "fond-rouge", dans "Style CSS du lien" de l'onglet "type de liens" dans les paramètres de l'item menu. Puis de créer une règle css : .fond-rouge {background-color:red !important;}

Dans les 2 cas, il faut adapter les règles au type de menu utilisé

[odile]

Re : Faire des onglets de menu de couleurs diférentes

Où crée t'on cette 'Regle CSS' ?
Mes template sont faites par Artisteer.

J'ai trouvé la ligne dont tu parles :
<nav class="art-nav">

<ul class="art-hmenu nav-pills"><li class="item-101 current active"><a class=" active" href="/">Accueil</a></li><li class="item-190"><a href="/actualite">Actualité</a></li><li class="item-195"><a href="/blog-d-odile">Blog d'Odile</a></li><li class="item-191 deeper parent"><a class="separator">Communauté</a><ul><li class="item-192"><a href="/communaute/login-page">Login Page</a></li><li class="item-193"><a href="/communaute/profil">Profil</a></li><li class="item-194"><a href="/communaute/les-habitues-de-la-kafet">Les habitués de la Kafet</a></li><li class="item-275"><a href="/communaute/telechargements">Téléchargements</a></li></ul></li><li class="item-165"><a href="/forum">Forum</a></li><li class="item-236"><a href="/petites-annonces">Petites annonces</a></li><li class="item-299 deeper parent"><a class="separator">Annuaire</a><ul><li class="item-300"><a href="/annuaire/recherche">Recherche</a></li><li class="item-301"><a href="/annuaire/ajouter">Ajouter</a></li></ul></li><li class="item-243 deeper parent"><a class="separator">Cosmetiques</a><ul><li class="item-244"><a href="/cosmetiques/recettes">Recettes</a></li><li class="item-245"><a href="/cosmetiques/ingredients">Ingrédients</a></li></ul></li></ul>
</nav>
-----------------
Qu'est ce que j'en fait ?

La deuxième solution me semble plus claire, mais que dois-je mettre.
Dans l'onglet je vois la case style css du lien, mais y écrire ton instruction ne lui fait ni chaud ni froid (mais ça se voit dans le code).

[lefabdu51]

Re : Faire des onglets de menu de couleurs diférentes

Où crée t'on cette 'Regle CSS' ?
Mes template sont faites par Artisteer.

J'ai trouvé la ligne dont tu parles :
<nav class="art-nav">

<ul class="art-hmenu nav-pills"><li class="item-101 current active"><a class=" active" href="/">Accueil</a></li><li class="item-190"><a href="/actualite">Actualité</a></li><li class="item-195"><a href="/blog-d-odile">Blog d'Odile</a></li><li class="item-191 deeper parent"><a class="separator">Communauté</a><ul><li class="item-192"><a href="/communaute/login-page">Login Page</a></li><li class="item-193"><a href="/communaute/profil">Profil</a></li><li class="item-194"><a href="/communaute/les-habitues-de-la-kafet">Les habitués de la Kafet</a></li><li class="item-275"><a href="/communaute/telechargements">Téléchargements</a></li></ul></li><li class="item-165"><a href="/forum">Forum</a></li><li class="item-236"><a href="/petites-annonces">Petites annonces</a></li><li class="item-299 deeper parent"><a class="separator">Annuaire</a><ul><li class="item-300"><a href="/annuaire/recherche">Recherche</a></li><li class="item-301"><a href="/annuaire/ajouter">Ajouter</a></li></ul></li><li class="item-243 deeper parent"><a class="separator">Cosmetiques</a><ul><li class="item-244"><a href="/cosmetiques/recettes">Recettes</a></li><li class="item-245"><a href="/cosmetiques/ingredients">Ingrédients</a></li></ul></li></ul>
</nav>
-----------------
Qu'est ce que j'en fait ?

La deuxième solution me semble plus claire, mais que dois-je mettre.
Dans l'onglet je vois la case style css du lien, mais y écrire ton instruction ne lui fait ni chaud ni froid (mais ça se voit dans le code).

Tout ceci est a ajouter en bas du fichier css du template.

A faire pour chaque lien :
.item-101 {background:red;}

Pour cibler l'item courant :
.current {background:blue;}

Pour cibler l'item actif :
.active {background: yellow}

Pour modifier les couleurs au survol :
.item-101:hover {backgroundurple;}

[lomart]

Re : Faire des onglets de menu de couleurs diférentes

La deuxième solution me semble plus claire, mais que dois-je mettre.
Dans l'onglet je vois la case style css du lien, mais y écrire ton instruction ne lui fait ni chaud ni froid (mais ça se voit dans le code).

Je n'ai jamais dit de copier le code dans la zone, uniquement le nom de la classe. Nom que tu imagines pour t'y retrouver.
Puis ensuite, tu ajoutes la règle au bas de ton fichier template