Un thème en kit

Première étape, fabriquer les images dont on a besoin. On prendra soin de réserver dans cette image un bandeau supérieur de la couleur du fond de sidebar (ici blanc) d'une dizaine de pixels de haut afin d'y "cacher" le titre. Puis on place ces images dans le répertoire kit1/images/.

Remplacer ensuite au début de la partie 7 de la feuille de style la règle de sidebar h2 pour la remplacer par le code suivant :

#sidebar h2 {
	margin : 0.5em 0 0 0;
	font-family : Georgia, serif;
	font-size : 12px;
	color : #fff;
	height : 40px;
	padding : 5px;
	background : #ccc;
	background-repeat : no-repeat;
}
#search h2 {
	background : transparent url(images/rechercher.png);
}
#categories h2 {
	background-image : url(images/categories.png);
}
#archives h2 {
	background-image : url(images/archives.png);
}

Capture d'écran :

Sur cette capture, le titre de rubrique "Liens" permet de visualiser ce qui s'affiche lorsque les images sont désactivées.

Notes sur ce code :

Compléter le code avec tous les marqueurs de titres de rubriques du sidebar. Ces trois-là sont donnés à titre d'exemple.

Les images étant placées dans l'arrière-plan on peut sans crainte leur donner une largeur plus grande que le bloc qui les contient de façon à être sûr que la couleur de fond (donnée pour que le titre de la rubrique soit lisible même si les images sont désactivées) ne "dépassera" pas.

(Les images-titres de toutes les rubriques par défaut de DotClear, plus "Galeries" sont disponibles dans le réperoire zegoodies.)