Comme plusieurs le savant, le format GIF, bien que supportant la transparence, ne supporte que 256 couleurs à la fois et fait de la transparence de mauvaise qualité, par le fait que les pixels translucides deviennent blancs, ce qui cause des bords pixellisés et un rendu horrible lorsqu'il s'agit d'une image avec par exemple une ombre portée ou des bords lissés.
Il existe un format qui supporte à la fois le mode RVB (4 millions de couleurs - 24 bits) et la transparence graduelle, en plus d'être un format libre, donc soumis à aucun brevet logiciel qui puisse limiter son utilisation : le format .PNG
Mais ce format a un hic : Certains internautes utilisent encore Internet Explorer 6 qui ne supporte pas la transparence de ce format en mode RVB, ce qui fait que plusieurs créateurs de designs préfèrent utiliser la fausse transparence autant que possible, au lieu d'avoir recours à un patch Javascript ou CSS pour corriger cette lacune.
Mais lorsqu'on utilise cette fausse transparence dans les images d'état des sujets d'un forum dont deux couleurs de fond s'alternent d'une rangée à l'autre, on se retrouve avec le problème de fond qui paraît sur la rangée plus claire ou plus foncée.
Heureusement, le fait que toutes les images des thèmes pour forums ConnectixBoards passent par le CSS rend la correction possible.
Ce tutoriel vous montrera donc à faire correspondre le fond de l'icone à celui de la rangée de sujet où il se trouve, comme sur ce forum-ci.
Note : Cette astuce a été testée sur un skin basé sur Zephyr
Étape 1 : Mettre un fond aux icones
Pour que l'on puisse faire correspondre le fond, il faut d'abord savoir le code couleur des cellules où nos boutons seront mis.
Pour cela, ouvrez le fichier
style.css de votre skin sous Notepad++ (gedit, kate ou nano si vous êtes sous linux) et cherchez l'endroit où sont indiqué les classes suivantes :
.field1 { ...}
.field2 { ...}
Notez la valeur de
background-color des deux classes.
Ensuite, en supposant que vous utilisez Photoshop ou Gimp, ouvrez le fichier .XCF (Gimp) ou .PSD (toshop) de vos boutons, puis ajoutez deux nouveaux calques que vous remplirez ensuite de la couleur des deux classes : le calque 1 avec la couleur de .field1, le calque 2 avec la couleur de field2. Sauvegardez ensuite votre fichier XCF ou PSD, puis enregistrez les .PNG de vos boutons en utilisant "nom_icone.png" pour ceux correspondant à .field1, et "nom_icone2.png" pour ceux correspondant à .field2 et notez leurs dimensions. Notez que les noms que j'ai donnés ne sont que des exemples et donc, vous devez remplacer
nom_icone par le nom correspondant à l'état du topic correspondant.
Étape 2 : La mise en place dans le CSS
Si vous avez déjà fermé votre fichier
style.css, rouvrez-le et recherchez ceci dans votre feuille :
/********************* Formatage des icones du forum *********************/
Maintenant, on va commencer par un premier exemple :
Cherchez ce code :
.st_r { background:url(st_r.jpg) 0 0 no-repeat; width:15px; height:15px; display:block; margin:auto; }
Vous changez la valeur en
rouge pour mettre l'URL relatif de l'image correspondant à field1 (nom_icone.png), puis les valeurs en
teal pour mettre les dimensions de la nouvelle image.
Cela devrait vous donner ceci ;
.st_r { background:url(nom_icone.png) 0 0 no-repeat; width:15px; height:15px; display:block; margin:auto; }
Ensuite, pour que que ce soit le bon bouton qui s'affiche là où se trouve
.field2, vous rajoutez cette ligne sous la première :
.field2 .st_r { background-image:url(nom_icone2.png); }
Ainsi, le simple fait de
spécifier une image différente pour une classe se trouvant
à l'intérieur d'une classe particulière (dans ce cas-ci : la classe du bouton à l'intérieur de .field2) permet d'afficher une image différente selon la rangée où le bouton se trouve.
Pour vous aider, voici les correspondances des classes, à la fois pour les sujets et les MP :
- [*].st_r : Sujet lu
- [*].st_u : Sujet non-lu
- [*].st_clsd_r : Sujet lu et fermé
- [*].st_clsd_u : Sujet non-lu et fermé
- [*].st_poll_r : Sujet lu avec sondage
- [*].st_poll_u : Sujet non-lu avec sondage
- [*].st_r_p : Sujet lu où vous avez participé
- [*].st_u_p : Sujet non-lu où vous avez participé
- [*].st_clsd_r_p : Sujet lu et fermé où vous avez participé
- [*].st_clsd_u_p : Sujet non-lu et fermé où vous avez participé
- [*].st_poll_r_p : Sujet lu avec sondage où vous avez participé
- [*].st_poll_u_p : Sujet non-lu avec sondage où vous avez participé
- [*].st_disp : Sujet déplacé
- [*].st_bookmark : Sujet se trouvant dans vos favoris
- [*].st_pin : Sujet épinglé (ou "post-it")
- [*].st_ann : Sujet annonce
- [*].mp_r : Message privé lu
- [*].mp_u : Message privé non-lu
- [*].mp_del : Message privé supprimé par son expéditeur
Icones autres que les dossiers
Les icones de statut En ligne/Hors ligne ainsi que les icones de réputation sont également affichés à plusieurs endroits où les couleurs de fond peuvent être différentes, ce qui fait que pour eux aussi, vous aurez à faire les icones avec plus d'un fond si vous voulez utiliser la fausse transparence.
Icones de réputation
Voici donc les lignes CSS existantes pour les icones Réputation :
.rep_star_on { background:url(star_on.jpg) 0 0 no-repeat; width:25px; height:25px; display:block; margin:0; float:left; cursor:pointer; }
.rep_star_off { background:url(star_off.jpg) 0 0 no-repeat; width:25px; height:25px;
Ainsi que la classe à utiliser pour mettre une version différente de vos icones de réputation :
.messageuser2
Icones de statut En ligne/Hors ligne
Voici les lignes CSS existantes pour les icones de statut En ligne/Hors ligne :
/** Utilisateur connectés ou non **/
.usr_online { background:url(usr_online2.jpg) 0 0 no-repeat; width:18px; height:18px; display:block; float:left; margin:0px; }
.usr_offline { background:url(usr_offline2.jpg) 0 0 no-repeat; width:18px; height:18px; display:block; float:left; margin:0px; }
.messageuser2 .usr_online { background:url(usr_online.jpg) 0 0 no-repeat; width:18px; height:18px; display:block; float:left; margin:0px; }
.messageuser2 .usr_offline { background:url(usr_offline.jpg) 0 0 no-repeat; width:18px; height:18px; display:block; float:left; margin:0px; }
(notez qu'une version différente est déjà spécifiée pour le profil dans les sujets avec la class .messageuser2)
Et voici les classes pour avoir une version différente des icones selon la rangée dans la liste des membres :
.field1
.field2
(Notez que vous n'avez besoin d'indiquer que l'une des deux classes, de préférence .field2).
Le tuto tire déjà à sa fin, et je vous souhaite maintenant un bon skinnage de votre forum CB !
