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 ^^
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 ^^
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
25 mars 2010 à 10:22
25 mars 2010 à 10:22
Pour chaque lien (mais il n'y en a aucun dans ton code... :\ ) tu mets une classe différente.
etc.
<a href="" class="toto">lien toto</a> <a href="" class="titi">lien titi</a> .toto (ou a.toto) { color:red; } .titi { color:green; }
etc.
Loic1983
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
23 mars 2010 à 15:05
23 mars 2010 à 15:05
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>
<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>
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
23 mars 2010 à 15:15
23 mars 2010 à 15:15
<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.
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.
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
23 mars 2010 à 15:15
23 mars 2010 à 15:15
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;
}
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;
}
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
24 mars 2010 à 13:57
24 mars 2010 à 13:57
Ce qu'il faut repérer, ce sont les noms des classes des cellules
Le code CSS à compléter est donc celui des background de ces sélecteurs :
<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.
"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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Loic1983
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
23 mars 2010 à 15:19
23 mars 2010 à 15:19
qu'entend tu par "dépreciée"?
Je suis débutant c'est pour ca que je te le demande.
Je suis débutant c'est pour ca que je te le demande.
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
Modifié par notobe le 23/03/2010 à 15:26
Modifié par notobe le 23/03/2010 à 15:26
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.
Loic1983
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
23 mars 2010 à 16:53
23 mars 2010 à 16:53
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?
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?
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
23 mars 2010 à 17:05
23 mars 2010 à 17:05
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.
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.
Loic1983
Messages postés
98
Date d'inscription
samedi 6 mars 2010
Statut
Membre
Dernière intervention
28 août 2011
3
23 mars 2010 à 18:10
23 mars 2010 à 18:10
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 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 ?
;)
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 ;-)
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 ;-)
25 mars 2010 à 15:05
<div id="menucouleur">
<jdoc:include type="modules" name="top" />
</div>
à l'endroit où vous voulez qu'il soit dans votre structure ;-)