CSS : Système de survol pour certains boutons
SOS-FORUM.com
     
  » A consulter ! » Astuces pour forums 

CSS : Système de survol pour certains boutons 5 5 6

Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

SOS-FORUM » A consulter ! » Astuces pour forums » CSS : Système de survol pour certains boutons

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Ce tutoriel a été publié par ze_chaofan sur SOS-Forum.
Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.


Hello hello...
Les membres du SF les plus attentifs auront remarqué le système de survol pour les boutons du forum.
Pour ceux qui n'auraient pas vu :


Voici donc comment faire pour vos forums, en ne passant que par le CSS.
Normalement, le tutoriel est compatible toutes les versions, néanmoins je ne l'ai pas encore testé pour punBB et Invision (donc, pour tout ce qui est phpbb, ça marche).

Pour chaque bouton auquel vous appliquerez le système, vous devrez procéder ainsi :

(1) Envoyez vos deux images, la normale et celle du survol (de dimensions identiques).

(2) Collez ceci dans votre CSS (vous compléterez en fonction du bouton) :
.intitulé {background-image: url('adresse_image_normale'); background-position: top center; background-repeat: no-repeat; width: Xpx; height: Ypx;}
.intitulé:hover {background-image: url('adresse_image_survol'); background-position: top center; background-repeat: no-repeat; width: Xpx; height: Ypx;}
Remplacez : X par la largeur des images en pixels, Y par leur hauteur en pixels.

(3) Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez.


Maintenant, pour les intitulés à compléter :
• Citation (message) : .i_icon_quote
• Edition (message) : .i_icon_edit
• Suppression (message) : .i_icon_delete
• Voir l'IP (message) : .i_icon_ip
• Profil du membre (profil) : .i_icon_profile
• Envoyer un MP (profil) : .i_icon_pm

• Poster un nouveau message (partout) : #Newtopic, #one, #i_post, #i_post1, .i_msg_newpost
Pour le deuxième intitulé, retirez le :hover et mettez :
#Newtopic:hover, #one:hover, #i_post:hover, #i_post1:hover, .i_msg_newpost:hover

• Répondre au sujet (partout) : .replying
Dans le panneau d'admin, mettez cette image pour le bouton :
http://illiweb.com/fa/empty.gif" class="replying

La liste des boutons sur lesquels ce tuto est applicable s'agrandira au fur et à mesure.



Dernière édition par ze_chaofan le 9/12/2009, 22:04, édité 2 fois

Tyli
(Membre)
Voir le profil de l'utilisateur http://femmescompagnesdemil.forumactif.org/forum.htm
Merci cheers

nirupan
(Membre)
Voir le profil de l'utilisateur http://www.tamilfriends.forumpro.fr/
merci beaucoup pour le tutorial mais au lieu de faire deux image différentes on pourrait simplement faire qu'une seul image grande qui regroupera les deux comme sur les vraix phpbb
les codes seraient :
.intitulé {background-image: url('adresse_image_normale'); background-position: top; background-repeat: no-repeat; width: Xpx; height: Ypx;}

.intitulé:hover {background-image: url('adresse_image_normale'); background-position: bottom; background-repeat: no-repeat; width: Xpx; height: Ypx;}


T'en pense quoi ?

Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Oui, j'avais voulu y venir (je l'ai d'ailleurs fait sur le SF), mais, cela aurait peut être fait un peu compliqué pour ceux qui sont encore hasardeux avec les images et le CSS.

Tyli
(Membre)
Voir le profil de l'utilisateur http://femmescompagnesdemil.forumactif.org/forum.htm
J'ai essayé mais ça marche pÔ !! qu'est-ce que tu entends par "Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez." ?

L'image de survol doit-elle être la même (mais transformée) que celle de l'image normale ?

Et dernière question , le X et le Y doivent correspondre à la taille normale des images choisies ?

Final-Blonde
Staff du forum
Voir le profil de l'utilisateur http://sansfil.forumactif.com/
Bonjour à tous et merci ZC pour l'astuce !

Tyli,
Tyli a écrit:qu'est-ce que tu entends par "Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez." ?
PA >> Affichage >> Images & Couleurs >> Gestion des images > Mode avancé > Boutons > Supprimer l'url correspondante (elle se met automatiquement en url_image_vide)

Tyli a écrit:L'image de survol doit-elle être la même (mais transformée) que celle de l'image normale ?
Nope, tu mets les images que tu veux puisqu'elles seront dès lors gérée par le CSS.

Et dernière question , le X et le Y doivent correspondre à la taille normale des images choisies ?[/quote]Oui et non, là encore tu fais comme tu le souhaites.

Du c'est keskeu j'ai compris ! Very Happy

Tyli
(Membre)
Voir le profil de l'utilisateur http://femmescompagnesdemil.forumactif.org/forum.htm
Merci Final_blond


Donc j'avais tout bon mais ça ne fonctionne quand même pas Vide! affraid


J'ai fais un essai avec le bouton "éditer" avec en survol un smiley (juste pour le fun Very Happy ), le bouton "éditer" a disparu Vide

Code:
 .icon_i_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.icon_i_edit:hover {background-image: url('http://illiweb.com/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 19px; height: 25px;}

Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Hello...

Mes excuses, je me suis trompé avec les intitulés, ce n'est pas .icon_i_edit mais .i_icon_edit !
Je corrige...

Pour ton bouton, cela donne :
.i_icon_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.i_icon_edit:hover {background-image: url('http://illiweb.com/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 19px; height: 25px;}


Et en réglant un petit peu pour éviter le décalage entre tes deux images :
.i_icon_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.i_icon_edit:hover {background-image: url('http://illiweb.com/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

Tyli
(Membre)
Voir le profil de l'utilisateur http://femmescompagnesdemil.forumactif.org/forum.htm
Whaouuu tu assures ze-chaofan Vide cheers


Merci , t'es un chef Vide bounce

Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Mais de rien, surtout que l'erreur venait de moi... Smile

Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
Attention : Mise à jour de l'intitulé pour le bouton "Nouveau"

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

SOS-FORUM » A consulter ! » Astuces pour forums » CSS : Système de survol pour certains boutons

Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Forum gratuit | © PunBB | Forum gratuit d'entraide | Signaler un abus | Créer un forum