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.

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

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