Styler son blog - tentative de guide

13.06.2010

Inventaire

OverBlog propose plusieurs moyens de donner une allure personnelle à son blog à partir d'un design en prêt-à-bloguer :

le menu configuration/mise en page de l'admin permet de disposer à son idée (ou à peu près) les constituants de la page de blog : en-tête et pied de page, pavé des articles, modules… et de régler pour chacun d'eux diverses options ;
un outil simple, dit de personnalisation , permet de préciser couleurs, polices de caractères, images de fond sans plonger dans le CSS ;
enfin, pour peu qu'on fasse l'effort d'apprendre le langage CSS, on peut intervenir sur la ou les ( configuration avancée ) feuille(s) de style du blog pour le remodeler plus finement.

Ces outils agissent sur l'ensemble du blog ( configuration classique ) ou sur trois grandes fractions de ce blog ( avancée ) : page d'accueil et ses suites, toutes les pages d'articles, les pages au sens OB du terme (= pas de commentaires ni de date, classement à part, nombre limité…).

À l'autre bout du spectre, les divers boutons de l'éditeur de texte sont très commodes pour décorer un article.

Entre les deux c'est un peu le désert de Gobi (aux heures creuses).

Intermède : le CSS, c'est bien

Imaginons que vous citez souvent quelques alexandrins dans vos articles. En italique avec une marge gauche plus importante, pourquoi pas ? Deux choix s'offrent à vous :

les boutons de l'éditeur de texte lors de la rédaction des articles. Direct et rapide.
Vous voilà bientôt à la tête de 50 articles contenant chacun une citation. Pour changer la, par exemple, marge de gauche ou ajouter un fond de couleur, vous modifierez et republierez un à un chacun des 50 articles. Direct mais pas rapide du tout.
définir une fois pour toutes une classe particulière dans le(s) CSS du blog :
```
 .poesie {font-style:italic;margin-left:3em} 
```
… ou, plus commode encore, redéfinir un des cinq styles utilisateurs (hitcitation, hitencart, hitimportant, hitperso1, hitperso2), par exemple :
```
 .hitcitation {font-style:italic;margin-left:3em} 
```
Vous appliquez, dans l'éditeur, le style utilisateur avec le menu des styles ou, dans le cas général, vous complétez le source HTML :
```
 <div class="poesie">Je fais souvent ce rêve étrange et pénétrant...</div> 
```
Moins direct, mais changer la présentation ne demande de modifier qu'une seule fois le(s) CSS ; les 50 articles suivront le mouvement comme un seul homme.

À mon humble avis y a pas photo.

Rien de neuf ni d'astucieux jusqu'ici, seulement un rappel de bases parfois négligées.

Revenons au désert de Gobi, quelque part entre tout le blog et un article . On peut souhaiter ajuster le style d'une fraction du blog plus vaste qu'un seul article et plus restreinte que l'accueil ou le non-accueil . On peut vouloir que l'aspect de certaines pages du blog dépende de leur contenu (et pas seulement l'aspect de l'article). Enfin on est prêt à payer plus ou moins pour y parvenir : modifier ou non le texte des articles. J'ai écrit quelques articles et développé quelques programmes pour répondre à ces besoins, sans chercher à épuiser la question.

Aucune de ces solutions ne modifie, par elle-même, l'aspect du blog. Toutes se contentent d'ajouter une ou plusieurs classes à des endroits bien choisis de la page de blog, vous définirez la présentation de ces classes dans le(s) CSS du blog. Ce principe est un peu moins ~~benêt~~ séduisant qu'un gadget tout prêt ( comment mettre une image de fond sur un article ), il est infiniment plus flexible et aisé à faire évoluer (rappelez-vous : 50 articles…)

Voici, pour chacune de ces solutions, une brève présentation précisant son domaine d'emploi (les détails se trouvent dans les articles) :

[CSS - JS] "Styler" un ou quelques articles
Demande de modifier le source de l'article, sans toutefois y porter des indications explicites de style. Une première solution, sans JS, peut servir au niveau Confiance , la variante en JS, plus complète, demande le niveau Privilège ou Premium.
[JS] "Styler" les pages de blog selon leur URL
Privilège ou Premium. Permet d'aller plus loin que la simple distinction accueil/hors accueil. Selon que la page est une page de catégorie, d'archive, de liste complète, d'article seul (avec ou sans ses commentaires), voire la page des CGU du blog, son body reçoit une classe caractéristique. On peut alors restyler tout le groupe des pages de catégorie, d'archive, etc. (pas seulement les articles ou les modules) avec du CSS.
[JS] "Styler" les articles selon leur catégorie
Privilège ou Premium. Donne à chaque article de la page de blog une classe indiquant son numéro de catégorie. On peut ainsi donner aux articles d'une catégorie particulière une présentation distincte, qu'ils soient seuls sur leur page ou mélangés à des articles d'autres catégories (cas des pages d'accueil).
Attention : par construction, cette solution ne peut agir que sur la présentation des articles et pas sur celle du reste de la page.
[JS] "Styler" son blog selon les catégories
Privilège ou Premium. Ne pas confondre avec le précédent ! Celui-ci permet de restyler toute la page mais n'agit que sur les pages dont les articles appartiennent à une seule et même catégorie. Logique, non ? Donne au body de la page une classe indiquant cette catégorie.

Espérons que ça vous rende service…