phpBB-fr.com

[Samurai]

Ce tutorial est un complément à ce sujet: documentation-phpbb3/sujet163669.html

Ajouter des rollover à ses boutons

Vous devez d'abord recréer vos boutons comme suit:
Le bouton et le rollover seront dans la même image, le rollover en-dessous du bouton comme ça:

Les boutons du tutorial documentation-phpbb3/sujet163669.html font 95x20 pixels, vous devrez donc créer des images de 95x40 pixels.

Dans colours.css, trouver:

Code: Tout sélectionner

/*Navigation
--------------------- */

.forum {background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 0 no-repeat;}
.faqs {background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 0 no-repeat;}
.ucp {background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 0 no-repeat;}
.members {background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 0 no-repeat;}
.nonewpms {background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 0 no-repeat;}
.newpms {background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 0 no-repeat;}
.register {background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 0 no-repeat;}
.logout {background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat;}

/*Fin navigation
--------------------- */


Après:

Code: Tout sélectionner

.logout {background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 0 no-repeat;}


Ajouter:

Code: Tout sélectionner

.forum:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/forum.gif") 0 -20px no-repeat;}
.faqs:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/faq.gif") 0 -20px no-repeat;}
.ucp:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/profil.gif") 0 -20px no-repeat;}
.members:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/membres.gif") 0 -20px no-repeat;}
.nonewpms:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/mp.gif") 0 -20px no-repeat;}
.newpms:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/newmp.gif") 0 -20px no-repeat;}
.register:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/inscription.gif") 0 -20px no-repeat;}
.logout:hover {background: url("{T_IMAGESET_LANG_PATH}/bouton/deconnexion.gif") 0 -20px no-repeat;}


le "-20px" correspond à la moitié de la hauteur de l'image, si votre image fait 50 px de haut la valeur sera alors "-25px" etc...