Vous voulez mettre de jolis boutons avec des coins arrondis tout en gardant affiché le texte en dur ? C'est possible avec le CSS !
Prérequis
Premièrement, vous devez avoir créé le fond de bouton, d'une largeur supérieure à 150 pixels. Si vous ne savez pas comment en créer un, je vous suggère de lire
ce tuto et à l'adapter aux couleurs et à la hauteur que vous voulez. Ensuite, il vous faudra découper le bouton en deux morceau en mettant un guide près des coins de gauche et en passant un coup de massicot. Pour ceux qui ne connaissent pas le massicotage,
ce tuto en parle dans la partie 2.
Une fois le découpage fait, enregistrez vos deux morceaux sous
button1.png pour la partie gauche, et
button2.png pour la partie droite.
Le codage
Avant toute chose, je vous conseille de travailler sur une copie du skin à modifier, afin de ne pas toucher à la copie originale.
Maintenant que vous avez vos deux morceaux de bouton, on va maintenant les placer puis afficher les textes en modifiant le fichier .CSS de notre skin.
Note : Cet astuce a été testé sur un skin basé sur Zephyr
Vous ouvrez votre fichier
style.css avec Notepad++ (si vous êtes sous windows) ou avec gedit/kate/nano (si vous êtes sous Linux) puis vous cherchez d'abord cette partie de code :
/** Gros boutons **/
.bb_t_reply { display:block; background:url(bb_reply.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
.bb_t_fl_rep { display:block; background:url(bb_fastreply.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
.bb_t_clsd { display:block; background:url(bb_closed.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
.bb_t_mod { display:block; background:url(bb_mod.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
.bb_tg_topic { display:block; background:url(bb_topic.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
.bb_tg_poll { display:block; background:url(bb_poll.gif) 0 0 no-repeat; width:100px; height:20px; padding:0px; margin:0px; }
Vous le remplacez par :
/** Gros boutons **/
.bb_t_reply, .bb_t_fl_rep, .bb_t_clsd, .bb_t_mod, .bb_tg_topic, .bb_tg_poll { display:block; background:url(button2.png) right no-repeat; height:26px; padding:0px; margin:0px 2px; line-height: 24px; }
.bb_t_reply span, .bb_t_fl_rep span, .bb_t_clsd span, .bb_t_mod span, .bb_tg_topic span, .bb_tg_poll span { background: url(button1.png) left no-repeat; display: block; height: 26px; padding: 0px 6px; font-weight: bold;}
(
Note : Changez la valeur de
height si la hauteur de votre bouton est différente.)
Vous cherchez ensuite :
/** Textes à ne pas afficher (boutons 'images') **/
.bb_t_reply span,.bb_t_fl_rep span,.bb_t_clsd span,.bb_t_mod span,.bb_tg_topic span,.bb_tg_poll span,
.ico_rss span,
.usr_online span,.usr_offline span,
.quickjoin span,.sb_scroll span,
.st_tg_u span,.st_tg_r span,.st_tg_link span,.st_r span,.st_u span,.st_clsd_r span,.st_clsd_u span,
.st_poll_r span,.st_poll_u span,.st_disp span,.st_pin span,.st_ann span,.st_bookmark span,
.st_r_p span,.st_u_p span,.st_clsd_r_p span,.st_clsd_u_p span,.st_poll_r_p span,.st_poll_u_p span,
.mp_r span,.mp_u span,.mp_del span
{ position:absolute; left:0; top:-500px; width:1px; height:1px; overflow:hidden; }
Dans ce bloc de codes, vous enlevez ceci (2e ligne dans le bloc de codes) :
.bb_t_reply span,.bb_t_fl_rep span,.bb_t_clsd span,.bb_t_mod span,.bb_tg_topic span,.bb_tg_poll span,
Vous enregistrez les modifications.
Résultat :
Voir la capture du démo
(notez que le skin que vous voyez n'est pas encore terminé. Il sera disponible ici une fois fini).
Le cas de IE6
Si vous testez sous Internet Explorer 6, c'est l'horreur : Vos boutons partent dans tous les sens !
Afin de corriger ce bug d'affichage, vous créez un nouveau document sous votre éditeur de texte, puis vous utilisez ces lignes de code :
* html .optionmenu li
{
width: 50px;
white-space: nowrap;
}
Dans la première ligne, le
* html est un hack CSS bien connu pour ne faire appliquer des corrections que sous IE6 et versions plus anciennes, sans que ça n'affecte IE7 et les autres navigateurs.
Ensuite, j'ai mis un
width: 50px; pour que la largeur soit plus petite que le bouton le plus court, puis j'ai forcé le texte à ne pas faire de saut de ligne, sauf en présence d'une balise <br />, en utilisant un
white-space: nowrap;, ce qui fait que la largeur du bouton est forcée de s'adapter au texte qu'il contient.
Maintenant, enregistrez votre fichier sous le nom
hacksIE.css et assurez-vous qu'il s'enregistre sous le bon format (pour les bloc-noteux, entourez-le de guillemets)
Ensuite, ouvrez votre fichier
style.css.
Juste après ce code suivant :
@import url(bbcode.css)
ajoutez cette ligne :
@import url(hacksIE.css)
Enregistrez votre modification.
