FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Recherche rapide

Ajouter une icone à côté du titre du message

Le sujet du jour : Comment ajouter une icone à côté du titre du message caractérisant son état (verrouillé, épinglé…) ?

Pour cela nous allons d'abord trouver les images que nous utiliserons, personnellement je ne me suis pas foulé j'ai fait le tour des forums en phpBB ou en SMF en cherchant “Powered by SMF ” et “Powered by phpBB” dans Google. Là vous tombez sur une liste de forums utilisant soit l'un soit l'autre. Entrez y vous trouverez tous les icones dont vous aurez besoin pour continuer.

Dans mon exemple j'ai pris ceux du Forum de Mamboserver la liste se trouve dans un forum en bas de page : Ici en l'occurrence je viens de voir que ce forum était un forum vBulletin. Mais peu importe d'où viennent les images, vous pouvez d'ailleurs en créer vous même ;-)

Continuons.

Plaçons ces images dans un dossier dossier au nom de votre thème dans le dossier img qui se trouve à la racine de votre forum. Mon dossier s'appelle par exemple : oxygen car j'utilise le thème Oxygen

Ouvrons maintenant les feuilles de style CSS de votre thème, elles se trouvent pour la première dans style et porte le nom votretheme.css la seconde est dans style/imports elle se nomme votretheme_cs.css

Faites en une sauvegarde au cas où l'installation ne se passerait pas correctement, et qu'il vous faudrait restaurer les anciennes données.

Ouvrez les avec votre éditeur text/HTML/CSS préféré.

Cherchez dans votretheme.css les lignes suivantes :

DIV.icon {
    FLOAT: left;
    MARGIN-TOP: 0.1em;
    MARGIN-LEFT: 0.2em;
    DISPLAY: block;
    BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
    BORDER-STYLE: solid
}

que vous remplacerez par :

div.icon {
    float: left;
    display: block;
    width:20px; /* Hauteur de l'image */
    height:20px; /* largeur de l'image */
}

Sauvegardez. Ouvrez ensuite votre second fichier : votretheme_cs.css

cherchez les lignes suivantes :

DIV.icon {BORDER-COLOR: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
TR.iredirect DIV.icon {BORDER-COLOR: #F1F1F1 #F1F1F1 #F1F1F1 #F1F1F1}
DIV.inew {BORDER-COLOR: #0080D7 #0065C0 #0058B3 #0072CA}

que vous remplacerez par :

/* Sujet normal */
Div.icon {
background-image : url(../../img/votre_theme/icon_normal.gif); 
} 
/* Sujet ferme */
TR.iclosed Div.icon {
background-image : url(../../img/votre_theme/icon_closed.gif); 
} 
/* Redirection */
TR.iredirect Div.icon {
background-image : url(../../img/votre_theme/icon_redirect.gif);
}
/* Nouveau sujet */
TR.inew Div.icon {
background-image : url(../../img/votre_theme/icon_new.gif); 
}
/* Sujet epingle */
TR.isticky DIV.icon {
background-image : url(../../img/votre_theme/icon_sticky.gif); 
}
/* Sujet deplace */
TR.imoved DIV.icon {
background-image : url(../../img/votre_theme/icon_moved.gif); 
}

Sauvegardez. Puis uploadez vos fichiers là où ils étaient sur votre serveur ;-)

Voilà vous avez maintenant de belles icônes à côté de vos titre de messages :-D

Remerciements à Fil1958 sur qui j'ai pompé cette explication à partir d'un de ses posts

 
fluxbb_1_2/iconestitre.txt · Dernière modification: 2010/06/26 22:26 (édition externe)