(ATTENTION : l'éditeur CSS n'est proposé que sous les formules PRIVILEGE et PRO)

La méthode pour effectuer une modification d’apparence dans un blog est presque dans tous les cas la même. Je vais dans cet article décrire cette méthode et la mettre en pratique avec deux exemples.

Les étapes :

  1. définir clairement son objectif
  2. identifier la ou les zones touchées
  3. identifier les attributs
  4. identifier les valeurs à donner aux attributs
  5. appliquer et tester

1. Définir clairement son objectif

Définir un objectif d’apparence doit être extrêmement précis. Il existe de nombreuses méthodes pour définir ou décrire un objectif, j’utilise pour ma part une méthode très efficace revenant à décrire l’état des choses après que l’objectif soit atteint.

Quelques exemples d’objectifs d’apparence :
- la largeur globale de mon blog est de 800 pixels ;
- la largeur de mon blog est de 100% (toute la page) ;
- les titres de mes articles sont affichés en rouge ;
- les titres dans les boîtes situées dans la colonne de gauche sont en vert ;
- mon image ‘image.jpg’ est affichée tout en haut au centre de la colonne de gauche de mon blog ;
- etc.
Pour mes deux exemples, voici mes deux objectifs:
- Exemple 1 : la description de mon blog est affichée en bleu ;
- Exemple 2 : Toutes les images se trouvant dans le corps de mes articles sont automatiquement entourées d’un bord d’1 pixel de largeur, de couleur argent et pointillé ;


2. Identifier quelle zone va subir une modification, exemple 1

Pour cela, il faut afficher la source de la page et trouver quelle zone sera concernée par la modification.

Ne tentez pas de trouver au hasard, ce serait une grosse perte de temps !

Pour afficher ‘la source’ de votre blog, il suffit d’aller sur la page dans laquelle vous souhaitez faire une modification et effectuer un ‘clic-droit’ suivi de ‘afficher la source’.

Un bloc-notes s’ouvrira dans lequel vous pourrez voir la version ‘brute’ de votre blog. Pour gagner du temps, ne lisez pas tout ! Effectuez une recherche du bout de texte le plus proche de l’endroit que vous souhaitez modifier !

Pour le premier exemple, nous allons donc chercher à modifier la couleur de la description de ce blog :

  • j’affiche la source
  • je recherche ‘questions et réponses sur monblog’
  • mon éditeur de texte m’affiche cela :




Le but ici est de trouver quelle zone ou élément CSS doit être modifié. Je regarde donc ce qui précède le texte de description du blog pour voir dans quel élément il se trouve. J’ai de la chance, la description est dans une zone nommée (il y a un ‘id’) portant le nom ‘blogDescription’.


2. Identifier quelle zone va subir une modification, exemple 2

Même opération ici aussi, mais je vais afficher la source d’un article contenant une image. Pour cela j’ai créé un article de test, contenant uniquement une image suivie d’un mot ‘arbre’.

J’ouvre la source, et je recherche le mot ‘arbre’ :



On aperçoit le mot ‘arbre’, juste après le code d’une image (une balise IMG avec une source indiquant le chemin de l’image ‘image-test.gif’).

ATTENTION : cette manipulation est plus complexe dans la mesure où nous n’avons pas directement une zone nommée (le mot ‘id’) autour de l’image. En effet, il est possible d’avoir des images un peu partout dans votre blog, raison pour laquelle chaque image ne possède pas un ‘id’ la rendant unique.

Il va donc falloir remonter dans la source, et trouver dans quelle zone précise se trouve cette image.

C’est là que notre objectif nous est utile :

« Toutes les images se trouvant dans le corps de mes articles sont automatiquement entourées d’un bord d’1 pixel de largeur, gris et pointillé »

En CSS, lorsque l’on dispose d’une zone (un ‘id’) ou d’une classe (‘class’), il est également possible de modifier les attributs de certains éléments se trouvant dans cette zone. Comme les images par exemple !

Il faudra pour cela indiquer le nom de la zone ou de la classe suivi du nom de l’élément que l’on souhaite modifier :

#nomZone nomElement {attribut1 :valeur1 ;}
.nomClasse nomElement {attribut1 ;valeur1 ;}

Regardez à nouveau l’image ci-dessus. Nous allons chercher la zone ‘le corps de mes articles’. Tous les noms de zones et de classes sont en anglais. Le corps d’un article en anglais se dit ‘body’. Si nous remontons dans la source, nous voyons très rapidement une zone (div) sur laquelle est appliquée la classe ‘articleBody’.

Cette classe représente exactement ce que nous recherchons : le nom d’une zone contenant toujours le corps des articles que je publie !

Comme nous souhaitons modifier l’élément IMG (les images) , nous aurons une ligne dans l’éditeur CSS sous la forme suivante :
.articleBody IMG {attribut1 : valeur1 ;}
remarque : Notez la ligne commence par un point et non pas par un dièse ! Il s’agit d’une classe (class) et non d’une zone nommée (id) !


3. Identifier les attributs, exemple 1

Nous souhaitons ici modifier la couleur du texte. L’attribut représentant la couleur d’un texte est l’attribut COLOR. Nous aurons donc quelque chose comme ceci :
#blogDescription {COLOR : valeur ;}

3. Identifier les attributs, exemple 2

Nous avons ici besoin de modifier une bordure. Si ce n’est déjà fait, relisez le tutorial sur les bordures CSS, également disponible dans la FAQ.

Nous aurons ici une ligne de ce type :
.articleBody IMG {border : xxx yyy zzz ;}


4. Identifier les valeurs, exemple 1

Je voulais une description de couleur bleue :

#blogDescription {COLOR : blue ;}


4. Identifier les valeurs, exemple 2

Je voulais une bordure d’une largeur de 1 pixel, couleur argent et en pointillés :

.articleBoy IMG {border : dotted 1px silver ;}


5. Appliquer et tester

Il ne reste ensuite plus qu’à coller les textes correspondants dans la fenêtre de l’éditeur CSS puis d’enregistrer les modifications. Votre blog devrait , si vous avez bien suivi les exemples, subir les changements avec effet immédiat !