1 CSS : Système de survol pour certains boutons 8/12/2009, 23:13
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) :
Remplacez : X par la largeur des images en pixels, Y par leur hauteur en pixels..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;}
(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 :
https://2img.net/i/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 10/12/2009, 00:04, édité 2 fois