Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Modifier le CSS facilement

- Auteur : Si tu suis mon regard

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"

Modifier le CSS facilement

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

Modifier le CSS facilement

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.

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

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"

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

options du thème Photofolio

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Lamereflemarde 04/01/2013 02:00

Bonsoir!
Comment faire quand la couleur est un chiffre...?

Iv-oam 04/01/2013 13:04

Bonjour,
Il y a 3 façons d'indiquer une couleur voir http://stylescss.free.fr/couleurs.php.
Pour retrouver un code couleur, j'utilise http://www.code-couleur.com/

Typhaine 30/11/2012 04:08

Comment on "enregistre" les modification? Car quand j'appuie sur enregistrer dans la barre en haut a gauche ca n'enregistrer pas ce que j'ai change grace a "inspecter l'element" et du coup tout ce que j'ai fait ne sert a rien et je retrouve le theme de depart.
Merci d'avance

Evelyne (toujours la même) 11/11/2012 22:43

Yep ! génial ! Je vais voir si j'y arrive aussi facilement sur les miens !

Nadine Quinn 04/11/2012 21:47

.item .comments h6 {font-size: 15px; font-weight: bold; margin-bottom: 15px;color:red;}
Pas trouver sur mon HTLM je voulais mettre 15px;color blue; à la place

iv-oam 05/11/2012 17:56

Bonjour Nadine,
Si la ligne n'existe pas, il faut la rajouter dans le CSS

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...