Topmenu:chaque liens de couleurs différentes? [Fermé]

Signaler
-
 frogone -
Bonjour,

J'utilise Joomla 1.5
J'ai fait mon template, dans lequel j'ai fait un top menu avec mes différents liens (chapitres).
Je souhaite appliquer une couleur de fond à chacune des "capsules" (chacun de mes liens a un border: 1px qui l'entoure, d'où la mise en page de tous mes liens dans des capsules rectangulaires).

Mais voilà, je n'arrive pas à trouver la classe ou la div qui correspond à chaque lien que j'ai créé pour pouvoir les personnaliser, chacun, d'une couleur différente en fond.

Je viens de lire une proposition de mettre une "Image de menu" (dans les "Paramètres-Système" dans un de mes "Alias de menu,(éditer)")

= Mais d'une part il me semble que cela sert à juste mettre un petit icône à gauche ou à droite du lien, et non en fond comme je le souhaite.
D'autre part cela ne fonctionne pas. J'ai testé avec une image dans la liste proposée, et elle n'apparait pas.


Quelqu'un a t-il déjà réussi à le faire pour me l'expliquer ?

Merci d'avance pour votre aide

9 réponses

J'ai réussi à le mettre en place !

Merci Merci Merci À ced1870 de JOOMLA.fr !!!

Cela fait plusieurs semaines que je m'arrache les cheveux pour répondre à cette demande de menu multicolore de mon client, et je ne trouvais pas :/

alors merci encore !!!

... et pour tous ceux qui veulent le faire aussi voici les étapes, DANS JOOMLA BIEN SÛR :

1-Créez un nouveau module menu ou dupliquez le topmenu existant. Il faut lui donner les paramètres suivants :
- style d'affichage : Liste
- ajouter un ID : menucouleur
Le style Liste nous permet d'avoir des éléments qui sont repérés par leur numéro d'item. L'ID va identifier notre menu pour les CSS.
Index.php

2-Dans le fichier index.php du template, il faut ajouter quelques lignes de javascript qui vont donner l'effet "hover" pour l'utilisation sous Internet Explorer. Avant la balise , insérez les lignes suivantes :
<script type="text/javascript">
window.addEvent('domready', function() {
var sfEls = document.getElementById("menucouleur").getElements ByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
});
</script>

Avec ce script, nos éléments survolés auront la classe ".sfhover".
Identification des éléments

3-Utilisons Webdeveloper (https://addons.mozilla.org/fr/firefox/addon/web-developer/ pour voir à quoi ressemblent nos éléments. SI vous n'avez pas encore installé cette barre d'outil dans Firefox, c'est le moment !
On clique sur "Afficher les informations des éléments" et on trouve pour chacun de nos éléments de liste LI les classes avec les items :
li.item34, li.item35, li.item36, li.item37
Ici j'ai quatre liens dans mon menu, et les items qui sont rattachés ne sont valables que pour mon propre menu. A vous de trouver ceux qui correspondent au votre. Je vous conseille de faire cette manipulation une fois que votre menu est figé.

4-Fichier CSS
Dans le fichier CSS du template (généralement template.css), on va ajouter les lignes qui piloteront les couleurs et attributs graphiques de notre menu. A la fin du fichier, ajoutez les lignes suivantes :
/****************** Menu multicouleurs *******/
#menucouleur li {
padding:5px;
list-style:none;
}
#menucouleur li.item34 {
background:#ff0000;
}
#menucouleur li.item35 {
background:#ff4000;
}
#menucouleur li.item36 {
background:#ff8000;
}
#menucouleur li.item37 {
background:#ffBF00;
}
#menucouleur li.item34.sfhover, #menucouleur li.item34:hover {
background:#AD0000;
}
#menucouleur li.item35.sfhover, #menucouleur li.item35:hover {
background:#AD2800;
}
#menucouleur li.item36.sfhover, #menucouleur li.item36:hover {
background:#AD5700;
}
#menucouleur li.item37.sfhover, #menucouleur li.item37:hover {
background:#AD8200;
}

Voilà, par cette méthode nous avons créé DANS LE CODE des fichiers .php et .css de JOOMLA les div qui correspondent à chacun de liens du menu ;-)
De sorte que l'on peut ENFIN les personnaliser ^^
2
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57420 internautes nous ont dit merci ce mois-ci

ah oui ! et n'oubliez pas de rajouter la div dans le fichier .php aussi !

<div id="menucouleur">
<jdoc:include type="modules" name="top" />
</div>

à l'endroit où vous voulez qu'il soit dans votre structure ;-)
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
Pour chaque lien (mais il n'y en a aucun dans ton code... :\ ) tu mets une classe différente.

<a href="" class="toto">lien toto</a>
<a href="" class="titi">lien titi</a>

.toto (ou a.toto) {
color:red;
}

.titi {
color:green;
}  


etc.
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
Si tu veu changer la couleur des liens:

<a href="LA PAGE SUR LAQUEL TON LIEN DIRIGE.html"><font color="le code couleur que tu veu">LE NOM DE TON LIEN</font></a>
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
<font> est une balise dépréciée...
merci mais non je ne peux pas faire cela car je veux pouvoir le faire via le css.
cette solution fonctionne si tu as une page avec du html, hors j'ai précisée que j'utilise Joomla, donc des pages html structurée avec des includes php liées à une base de donnée. Pas de possibilité d'intervenir dans le code directemet, sauf dans le css, ou oui dans les articles mais je tiens vraiment à faire ça propre dans le css.
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
Il faudrait que tu nous donnes le code ou l'url du site. Parce que là, c'est un peu difficile de te répondre...
Je précise que cela n'est pas moi qui l'ai créé, d'ailleurs je trouve cette façon de faire pas propre du tout, je l'ai juste récupéré d'un template existant:

structure de mon topmenu (fichier.php)

<div id="tabarea">
<div id="tabarea_l">
<div id="tabarea_r">
<div id="tabmenu">

<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> 
<!-- capsule de gauche --!>
</td>

<td class="pill_m">
<!-- capsule du centre --!>
<div id="pillmenu">
<jdoc:include type="modules" name="user3" />
</div>
</td>

<td class="pill_r"> 
<!-- capsule de droite --!>
</td>
</tr>
</table>
<!-- fin de la capsule entière --!>

</div>
</div>
</div>
</div>

css de mon topmenu (fichier.css)

div#tabarea {
width: 900px;
background: url(../images/bandeaufond.jpg) 0 0 repeat-x;
margin: 0px;
}
div#tabarea_l {
margin: 0px;
padding: 0px;
}
div#tabarea_r {
height: 42px;
margin: 0;
padding: 0;
}
table.pill {
background: ;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
td.pill_l {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
td.pill_m {
background: ;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
#pillmenu {
white-space: nowrap;
height: 42px;
float: left;
margin: 0;
padding: 0;
}
#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}
#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}
#pillmenu a#2 {
background-color: red;
}
#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
border: solid 1px black;
display:block;
height: 41px; /* hauteur de l'espace text (et de l'espace du cadre donc) (calculer à partir du padding-top) */
line-height: 40px;
padding: 0 18px; /* espace autour des mots */
margin: 0;
color: #000; /* couleur du texte */
text-decoration: none;
}
#pillmenu a:hover {
color: grey
}
#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
Ce qu'il faut repérer, ce sont les noms des classes des cellules

<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> 
<!-- capsule de gauche --!>
</td>

<td class="pill_m">
<!-- capsule du centre --!>
<div id="pillmenu">
<jdoc:include type="modules" name="user3" />
</div>
</td>

<td class="pill_r"> 
<!-- capsule de droite --!>
</td>
</tr>
</table> 


Le code CSS à compléter est donc celui des background de ces sélecteurs :

td.pill_l {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
}
td.pill_m {
background: ;
padding: 0;
margin: 0;
width: auto;
}
td.pill_r {
background: ;
width: 0px;
height: 0px;
padding: 0;
margin: 0;
} 
Oui, je suis d'accord j'avais remarqué cela, mais regarde bien :

"l" "m" et "r" ne correspondent pas à trois liens différents = "l" (comme left) est une div pour insérer une image à gauche du menu, "m" lui est bien le topmenu, d'ailleurs l'"include" de mon module joomla se fait là, et donc je peux personnaliser le fond de TOUT mes liens en même temps, or je veux différencier les fonds de CHACUNS de mes liens, et "r" (comme right) est une div pour insérer une image à droite du menu.

Donc, encore une fois, comment faire pour séparer les différents liens de mon topmenu ???
Car td class="pill_m" représente TOUT le topmenu, donc tous les liens en même temps.
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
qu'entend tu par "dépreciée"?

Je suis débutant c'est pour ca que je te le demande.
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
Les balises et les attributs dépréciés sont appelés à ne plus être interprétés par les navigateurs. Il faut donc éviter de les utiliser au profit de leurs équivalents CSS.
à la saint glinglin ces balises/attributs ne seront plus interprétés par les navigateurs...sauf à utiliser un doctype strict (définition de strict : Qui ne laisse aucune latitude, étroit, rigoureux.). Non merci !
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
ok...

Je viens de faire tout mon site internet avec ces attributs...

C'est grave? est ce que les navigateurs vont vraiment ne plus les interprétés?
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
206
C'est ce qui est prévu, à quelle échéance, mystère.

En dehors de ça, le jour où vous voudrez modifier le design de vos pages, il va falloir que vous repassiez chacune de vos pages pour tout modifier : galère !!
Avec les CSS, on ne change qu'un seul fichier, c'est plus cool.

Pour info, voici la liste de toutes les balises et attributs :
https://www.la-grange.net/w3c/html4.01/index/elements.html
https://www.la-grange.net/w3c/html4.01/index/attributes.html

Tous ceux qui sont notés "D" dans la colonne "Dec" ne doivent plus être utilisés.
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
ben vu que j'ai déja fait tout mon site... j'ai le choix entre tout refaire maintenant ou attendre le jour ou ca ne sera plus interprété...

je vais donc attendre le jour j!

merci pour cette explication
Je voudrais juste rappeler que si cela me pose problème c'est parce que je travaille avec Joomla !!! Je sais le faire en tant normal avec du html et du css.

Mais sur Joomla impossible de trouver où personnaliser les différents liens de mon topmenus de façon différentes les uns de autres ?

;)
Je précise que j'ai bien repéré la div dans mon css qui est bien lié au topmenu, d'ailleurs l'"include" de mon module joomla se fait là, et donc je peux personnaliser le fond, MAIS de TOUT mes liens en même temps !
Or je veux différencier les fonds de CHACUNS de mes liens !!!

Donc, encore une fois, comment faire pour séparer les différents liens de mon topmenu ???
Car la classe td class="pill_m" de mon css représente TOUT le topmenu, donc tous les liens en même temps.

Merci d'avance ;-)