Les 'community-themes' sont des thèmes basiques proposant une mise en page standard, quelques couleurs générales ainsi qu'une image placée en arrière plan de l'en-tête.

Il est cependant possible de modifier l'apparence de son blog de manière beaucoup plus approfondie, au moyen de la technologie CSS. Une série de tutoriaux va donc combiner une partie théorique et pratique afin de vous sentir à l'aise pour effectuer quelques modifications de base pour l'apparence de votre blog.

Cette première partie se concentrera sur la syntaxe et le fonctionnement de l'éditeur CSS, accessible via la console de gestion de votre blog.


Un peu de théorie, pas plus de trois minutes !

Connectez-vous, cliquez sur 'Apparence', puis cliquez sur 'Editeur CSS'. L'éditeur CSS (Cascading Style Sheets) est une grande zone de texte. Vide, dans la plupart des cas.

Le but est d'y inscrire certaines instructions comprises par le navigateur de vos visiteurs pour lui 'décrire' la manière dont les éléments seront présentés. Tout au long de ces tutoriaux vous apprendrez à choisir vos couleurs pour le titre, les liens ou le fond de la zone d'articles par exemple.

Vous pourrez également 'repositionner' différentes zones de votre page, placer la liste des catégories à droite par exemple ou encore passer en mode 'journal de bord'.

Dans le jargon, on dit que vous allez 'éditer votre feuille de styles'. Le langage utilisé est relativement intuitif si l'on a quelques bases d'anglais. Les anglophobes auront un peu plus de peine, c'est malheureusement le prix à payer pour pouvoir personnaliser son blog en profondeur ;)


Premier pas en CSS

Si vous n'êtes plus connecté(e), reconnectez-vous et allez dans la section 'Apparence' puis cliquez sur 'Editeur CSS'. Entrez ensuite dans la cellule blanche :

body {background-color : red ;}
#zone1Header {font-size :250% ;}

Cliquez ensuite sur 'Enregistrer' puis sur 'Preview' en haut à droite dans le menu. Horrible n'est-ce pas ?

Pour annuler cette horrible modification, retournez dans l'éditeur CSS , supprimez le texte et enregistrez la feuille vide.


Qu'est-ce que l'on vient de faire exactement ?

body {background-color : red ;}

D'abord un mot , suivi d'accolades contenant des couples 'clé-valeur'. Le mot, seul, sans préfixe et sans suffixe signifie que l'on va 'décrire' l'apparence d'une des fonctions de base du langage utilisé pour afficher votre blog. Ces fonctions, dans le jargon, sont appelées des balises. Il en existe une multitude mais pour débuter, vous ferez joujou avec les balises suivantes : body (toute la page) h2 (en-tête, ou titre, de niveau 2) p (paragraphe)

Dans l'exemple ci-dessus, nous avons décrit une nouvelle apparence pour la balise body (représentant toute la page), en modifiant la clé 'background-color' (couleur de fond) à 'red' (rouge). Raison pour laquelle le preview vous a sûrement paru quelque peu choquant.

#zone1Header {font-size :250% ;}

Ce second exemple utilise un symbole, placé avant le mot. Cela indique au navigateur qu'il ne s'agira pas de décrire l'une des balises de base mais que l'on souhaite modifier l'apparence d'une zone 'personnalisée'. Votre blog possède une multitude de zones personnalisables. Voici quelques exemples avec lesquels vous pourrez faire vos premiers tests si vous vous sentez l'âme aventurière :
  • #zoneContener (contient l'ensemble de votre blog)
  • #zone1left (la colonne de gauche, où sont affichées les catégories)
  • #zone1main (la colonne centrale, ou sont affichés les articles)
  • #zone1header (la partie supérieure du blog ...
Dans l'exemple ci-dessus, nous avons modifié l'apparence de la zone d'en-tête, en spécifiant une taille de police à 250% de sa taille originale. Raison pour laquelle tout est devenu si 'grand'.


Conclusion

Vous venez de terminer le premier tutorial CSS. Dans le prochain tutorial nous verrons comment modifier l'image placée en en-tête de votre blog, toujours à l'aide de cet éditeur CSS. Merci pour votre attention ;)