[MOD Buttons menu - 2.3.0]-Icône

[cyrilagri]

Bonjour,

Donc avec ce mod :

MOD: Buttons menu 2.3.0 http://www.phpbb.com/community/viewtopic.php?t=1116985

Je souhaite intégrer un petit icône 16x16 avant chaque titre du menu comment faire



Donc à la place de chaque croix rouge et impossible de trouver une solution je cherche.

Merci beaucoup.

Cordialement.

[Steph]

Salut,

Si c'est une icône différente pour chaque lien alors en l'état ce n'est pas possible et il faut voir avec l'auteur du MOD si c'est pour la même icône a chaque fois c'est a rajouter dans le template avec un peu de css

[cyrilagri]

A ok dommage merci quand même.

[cabot]

Hello,

C'est possible, sauf sous ie7 et 8 qui n'afficheront pas les images, mais c'est un moindre mal ^^

Ouvrir overall_header.html
Remplacer :

Code : Tout sélectionner

#menu ul li a:hover {

Par :

Code : Tout sélectionner

#menu ul li:hover {

Ouvrir menu.css
Ajouter :

Code : Tout sélectionner

#menu .inner > ul > li > a { padding-left: 20px; }
#menu .inner > ul > li:nth-child(1) > a { background: url("{T_THEME_PATH}/images/menu/001.png") no-repeat 2px 50%; }
#menu .inner > ul > li:nth-child(2) > a { background: url("{T_THEME_PATH}/images/menu/002.png") no-repeat 2px 50%; }
#menu .inner > ul > li:nth-child(3) > a { background: url("{T_THEME_PATH}/images/menu/003.png") no-repeat 2px 50%; }

Et placer les images dans le dossier /theme/images/

Si tu as plusieurs liens de premier niveau, ajoute autant de lignes qu'il y a de liens :

Code : Tout sélectionner

#menu .inner > ul > li:nth-child(XX) > a { background: url("{T_THEME_PATH}/images/menu/XX.png") no-repeat 2px 50%; }

A toi de donner d'adapter les déclarations CSS aux noms des images

[cabot]

Plop,

Travaillant sur un projet présentant le même type d'affichage et qui demande une compatibilité IE7/8, j'en profite pour vous donner la modif CSS2 qui fait la même chose, mais qui a l'avantage de pouvoir être utilisé avec internet explorer dans les versions précitées.

Remplacer :

Code : Tout sélectionner

#menu .inner > ul > li:nth-child(1) > a { background: url("{T_THEME_PATH}/images/menu/001.png") no-repeat 2px 50%; }
#menu .inner > ul > li:nth-child(2) > a { background: url("{T_THEME_PATH}/images/menu/002.png") no-repeat 2px 50%; }
#menu .inner > ul > li:nth-child(3) > a { background: url("{T_THEME_PATH}/images/menu/003.png") no-repeat 2px 50%; }

Par :

Code : Tout sélectionner

#menu .inner > ul > li:first-child > a { background: url("{T_THEME_PATH}/images/menu/001.png") no-repeat 2px 50%; }
#menu .inner > ul > li + li > a { background: url("{T_THEME_PATH}/images/menu/002.png") no-repeat 2px 50%; }
#menu .inner > ul > li + li + li > a { background: url("{T_THEME_PATH}/images/menu/003.png") no-repeat 2px 50%; }

Voilà voilà, même si cyrilagri n'est pas de retour dans le coin, ça pourra servir à d'autres, oupa.

[Steph]

Hello,

Merci cabot ce sera utile

[EnYgmA]

Thx pour le partage

[cyrilagri]

Merci beaucoup cabot.