Autre soulignement des titres des articles/pages

Tirant mon inspiration du thème Openbook V2, j’y ai trouvé un type de soulignement des titres sympa que j’ai mis en place sur mon blog.
Rien de compliqué à ajouter dans la feuille de style, et une classe à ajouter lors de l’édition de vos billets ou pages.

Première étape

Spécifier le format des titres dans la balise #content en ajoutant une classe qu’ici on appelle “ligne“. On y précise le background qui sera une image. Ne pas oublier de placer votre image dans le répertoire des images de votre scheme. (Par exemple /schemes/Fluidelity/ligne.gif).

/********* DE OPENBOOK V2 *********/
#content h2.ligne, #content h3.ligne, #content h4.ligne, #content h5.ligne, #content h6.ligne {
background: transparent url(Fluidelity/ligne.gif) repeat-x scroll left center; /* image du trait de soulignement */
}

Deuxième étape

Definir la balise span affectée aux titres pour modifier le style d’une partie du titre. Le but de cette balise est de masquer le trait derrière le texte du titre. Attention il faut que la couleur soit la même que le fond du #content.

h2 span, h3 span, h4 span, h5 span, h6 span {
background: #fff; /* couleur du #content */
padding-right:3px;
color:#109DD0; /* couleur normale des titres */
}

Dernière étape

Rédiger votre article. Ici on se basera sur la balise h4.

<h4 class="ligne"><span>Exemple de titre de niveau 4</span></h4>

Ce qui donnera

Exemple de titre de niveau 4

Voilou @ peluche…