Modifier le CSS facilement

31 Octobre 2012

J'ai écrit sur ce blog deux articles sur la manière d'Inspecter son code mais je crains de ne pas avoir été compris de tout le monde. Nul besoin d'être informaticien pour modifier la couleur d'un titre. Le langage CSS est moins compliqué que vous le croyez.

Si j'appelle titreblog le titre du blog, et que je veux le mettre en rouge, j'écris dans le CSS : .titreblog{color:red;}

Le problème majeur est de savoir comment s'appelle vraiment tel élément dans le CSS. On peut chercher dans le code HTML le nom voulu mais le plus simple est d'utiliser les outils du navigateur.

Un exemple simple :

Le libellé "commenter cet article"

Sous Mozilla ou Chrome, je fais un clic droit sur mon blog juste sur "commenter cet article"

Je clique sur "inspecter l'élément" (Chrome) ou "examiner l'élément") (Mozilla). Et hop, le code apparaît. Les premières lignes sont les plus importantes car on retrouve le nom de l'élément : item .comments h6.

capture d'écran de l'inspecteur de code. Le code CSS s'affiche en bas à droite.

Il ne reste plus qu'à ouvrir le code HTML sur son espace d'administration et de retrouver .item .comments h6 (avec le raccourci clavier ctrl F)

Si je veux que "commenter cet article" soit en rouge, j'ajoute color:red. Ce qui donne

.item .comments h6 {font-size: 15px; font-weight: bold; margin-bottom: 15px;color:red;}

Image du formulaire de commentaire sur le blog timeline

En dessous, dans l'inspecteur de code, se trouve généralement le style dont hérite l'élément. Ici, c'est la police commune à tous le blog défini dans body

capture d'écran de "l'inspecteur"

Pour appliquer une police particulière à "commenter cet article", on ajoute font-family... à .item .comments h6

.item .comments h6 {font-size: 15px; font-weight: bold; margin-bottom: 15px;color:red;font-family:tahoma;}

Peut-on faire plus simple ? Oui, bien sûr, avec des options dans le thème mais combien en faudrait-il pour gérer la couleur, la police, la taille et le soulignement de dizaines d'éléments. Au moins 100 options* !

Alors que la feuille de style comprend tous les éléments et peut se modifier petit à petit selon ses goûts.

*La plateforme évolue et je pense que le thème Photofolio a été mis à jour récemment pour intégrer plusieurs options de style.

options du thème Photofolio