Si vous souhaitez pouvoir affecter une icône spécifique à chaque catégorie et la retrouver dans ses divers emplois : liste dans le sidebar, dans le bloc de présentation de la catégorie (fiche à venir), à côté du titre du billet ou que sais-je encore, voici comment procéder.

A côté du titre des billets

Pour qu'une icône identifiant la catégorie apparaisse à côté du titre du billet, vous devrez intervenir dans les fichiers list.php (pour la présentation en liste) et/ou post.php (pour la présentation en billet seul). (Directement inspiré de la fiche une feuille de style par catégorie (2)

1. Dans le fichier list.php, cherchez l'occurrence :

<h2 id="p<?php dcPostID(); ?>" class="post-title">

2. Remplacez-la par :

<h2 id="p<?php dcPostID(); ?>" class="post-title <?php print ('ico'.$news->f('cat_libelle_url')); ?>">

Ce qui donnera à titre d'exemple :

<h2 id="p7" class="post-title icoPremiers-pas">

pour un billet appartenant à la catégorie Premiers pas. (Pour plus d'explication de ce code, référez-vous à la fiche une feuille de style par catégorie (2).

3. Dans la feuille de style, placez la règle qui va bien ; pour notre exemple :

.post-title { /* règle générale à tous les titres de post */
	padding-left : 16px; /* pour une image 12*12px */
  /* le reste sans changement par rapport à votre feuille de style habituelle */
}
.icoPremiers-pas {
	background : transparent url(images/ico-premier.jpg) no-repeat;
}

Nota : J'ai donné l'exemple d'un placement à côté du titre du billet. Cet exemple peut être interprété à une autre balise en déplaçant class="<?php print ('ico'.$news->f('cat_libelle_url')); ?>" à l'endroit qui vous siéra le mieux.

Dans le sidebar

Il y a plusieurs façons d'obtenir le résultat souhaité. Je présente celle qui est à mon sens la plus simple, refaire la liste « à la main » :

1. Dans template.php, chercher les lignes :

	<div id="categories">
		<h2>Cat&eacute;gories</h2>
		<?php dcCatList(); ?>
	</div>

2. Remplacer l'appel à la fonction de listage des catégories par la liste elle-même. Par exemple :

	<div id="categories">
		<h2>Cat&eacute;gories</h2>
		<ul>
		<li><a href="/pages/Chantier-suivi">Chantier : suivi du projet</a></li>
		<li><a href="/pages/Chantier-fiches">Chantier : fiches bricolage</a></li>
		<li><a href="/pages/Premiers-pas">Premiers Pas</a></li>
		<li><a href="/pages/Paillettes-et-fanfreluches">Paillettes et fanfreluches</a></li>
		<li><a href="/pages/Apprenti-sorcier">Apprenti sorcier</a></li>
		<li><a href="/pages/Jargon-des-blogueurs">Le jargon des blogueurs</a></li>
		</ul>
	</div>

3. Ajouter au <li> ou au <a> une classe différente pour chaque catégorie. Par exemple :

<li class="premiers"><a href="/pages/Premiers-pas">Premiers Pas</a></li>
<li class="sorcier"><a href="/pages/Apprenti-sorcier">Apprenti sorcier</a></li>

et ainsi de suite pour tous les liens.

4. Dans la feuille de style, définir les règles de chaque classe. Par exemple :

#categories li { /* règles générales à tous les items de la liste */
	padding-left : 16px; /* pour une image 12*12px */
	margin-top : 6px; /* pour espacer les lignes */
}
.premier {
	background : transparent url(images/ico-premier.jpg) no-repeat;
}
.sorcier {
	background : transparent url(images/ico-sorcier.jpg) no-repeat;
}

et caetera. Bien entendu, on prendra soin de placer dans le répertoire images/ du thème lesdites icônes.

Nota : Il existe une autre méthode, que j'ai essayée hier, qui consiste à créer une nouvelle fonction en lieu et place de dcCatList() qui affecte automatiquement une classe du nom urlisé de la catégorie aux liens correspondants. On obtient un résultat de la forme :

<li><a class="Premiers-pas" href="/pages/Premiers-pas">Premiers Pas</a></li>

Si ce code vous intéresse, mentionnez-le dans les commentaires je le publierai. Mais il m'a semblé qu'il n'était pas utile de passer par une méthode si compliquée.

Important, faites des économies

Il va de soi (mais disons-le tout de même) que si vous comptez placer des icônes semblables dans le sidebar et à côté du titre, vous emploierez dans le code de la liste des catégories les mêmes noms de catégories que celles qui sont automatiquement injectées dans le titre. Vous éviterez d'avoir ainsi à « doublonner » les règles CSS.