Le pourquoi du comment : DotClear est un (superbe !) outil à blog. En plus de fonctionnalités tout à fait utiles, de plugins décoiffant, il nous offre la possibilité de personnaliser relativement facilement notre blog ! Relativement, car tout est relatif, c'est bien connu , et parce qu'il faut quand même sortir quelques outils du tiroir...

Les templates pour les Nuls :

Mais comment ca marche ?

Pour afficher chaque page, DotClear utilise un fichier nommé "template.php". Ce fichier définit un certain nombre de "blocs" (balise <div> en XHTML) ainsi que ce qui va à l'intérieur de ces blocs. Par exemple : le bloc "page" contient un bloc "content" dans lequel s'affichent les billets, et un bloc "sidebar" qui contient le calendrier, les catégories, les menus. On peut dire que le fichier "template.php" définit le squelette de vos pages. Plus d'infos ici.
Ensuite, une fois affiché dans un navigateur, votre template.php va faire appel à 2 feuilles de style (ce qu'on appelle des CSS) : "layout.css" et "style.css". "layout.css" contient les données relatives aux tailles et positions des différents blocs, tandis que "style.css" va plus s'occuper des couleurs et décorations des blocs et du texte. Plus d'info ici.
C'est le navigateur (le vôtre ou celui de vos visiteurs) qui va "mettre en forme" votre page, ce qui explique les différences d'affichage d'une même page sur différents navigateurs, chacun n'interprétant pas forcement les CSS de la même façon.

C'est où qu'on commence ?

Si vous êtes curieux, vous savez déjà que votre blogueur préféré stocke ses thèmes dans un répertoire nommé... "themes" ! Et qui contient lui-même un répertoire pour chaque thème installé. Par défaut, on en a 2 : "Default" et "Old Theme".
Et si vous ne le saviez pas, ce n'est plus le cas...

La première chose à faire, pour modifier un thème, est donc de créer un nouveau répertoire dans votre dossier "themes". Ensuite, dupliquez le repertoire "img" ainsi que les fichiers "desc.xml", "layout.css" et "style.css" du répertoire "default" vers votre répertoire. Vous êtes prêts à modifier votre propre thème !!!

T'as fait comment toi ?

Comme il y a déjà pas mal d'infos sur le petit dotclear illustré, je ne vais pas faire dans la généralité, mais plutôt expliquer comment j'ai fait pour mon thème.

Alors... j'ai commencé par modifier mon "layout.css" : je me sentais un peu à l'étroit, j'ai donc augmenté la largeur globale de la page. J'en ai aussi profité pour repositionner le titre du blog et la barre "prelude" qui s'affiche tout en haut.

Ensuite, j'ai travaillé sur "style.css"... Avec Photoshop, j'ai fait une image pour le fond. Je voulais un dégradé vertical, avec une fine ligne qui disparait en allant vers le bas. Il s'agit au final d'une image de 10x600px qui est répétée horizontalement uniquement et alignée en haut de la page.

Puis j'ai travaillé sur les couleurs du texte, des titres, des liens. Un très bon outil que je vous recommande est Color Wizard, dans lequel vous spécifiez une couleur de base et lui vous propose un certain nombre de couleurs "théoriquement" coordonnées.

Pour aller plus loin...

En fait, j'ai aussi modifié le fichier "template.php" pour y inclure le bandeau en flash (bloc "top").

Vous pouvez aussi vous amuser à triturer le "layout.css" pour changer complètement la mise en page.

Avec quels outils ?

Pour ma part, j'utilise principalement 3 logiciels :

• Adobe Photoshop pour les images, qu'on peut remplacer par The Gimp (gratuit);
• Adobe Flash, pour les bandeaux animés, et dont je ne connais malheureusement aucune alternative gratuite;
• TopStyle Lite, gratuit, pour les CSS.

Il en existe sûrement d'autres, tout aussi bons... à vous de les trouver !

Il ne me reste plus qu'à vous souhaiter un bon amusement et surtout :

Testez vos thèmes sur plusieurs navigateurs différents !