Les préparatifs

1- Dans un logiciel ou utilitaire de dessin quelconque, Paint par exemple, peut très faire faire l'affaire si vous n'avez que cela, dessinez un rectangle de la couleur voulue, ici jaune-orange. Il doit être assez long pour couvrir un grand mot : par exemple 200 pixel de long sur 16 de haut.

Surlignement : image de fond
2- Téléchargez l'image sur le serveur.

Dans le Gandiblog, vous passerez par le Gestionnaire de média.

3- Relevez l'adresse de l'image et copiez-là, elle doit se présenter ainsi si vous ne l'avez pas mise dans un dossier particulier :

http://mongandiblog.com/public/surligner.gif

Sinon, vous aurez quelque chose qui ressemble à cela :

http://mongandiblog.com/public/theme/surligner.gif

La modification du thème du blog

Cette modification ne peut se faire que si vous avez choisi le Custom Theme.

Vous pouvez modifier directement le thème en ligne en passant par la fonction Configuration du thème, mais vous pouvez aussi opter pour une modification des CSS à partir de votre ordinateur et d'un logiciel tel que Scite par exemple.

Allez sur la ligne : post-tags et modifiez-là ainsi :

.post-tags li { display: inline;
 background : url(http://mongandiblog.com/public/surligner.gif) no-repeat
 }   

Inline : si vous désirez que vos mots-clés soit sur une seule ligne et pas empilés les uns sur les autres en paragraphes différents.

Background : pour signifier que vos tags doivent apparaître sur le fond de couleur que vous indiquez dans le fichier dont l'adresse figure dans les parenthèses.

Et c'est tout.

Le résultat :

Tag en situation

En voir plus :

  • Personnaliser son blog Gandi quand on ne connaît rien en CSS
  • Télécharger l'éditeur de texte Scite.