Créer un thème pour DotClear

Un lecteur m’a demandé dans un commentaire d’expliquer le processus de création du thème DaClear. Au lieu de simplement répondre au commentaire, je vais le faire dans ce billet.

Pour créer le thème de DotClear, je suis un processus qui me guide généralement dans le création de toute page web.

1. Dessin sur papier

Je commence par dessiner sur papier la page telle que je la souhaite. Ça me permet de juger du positionnement des éléments et de l’ambience globale de la page. J’en profite pour noter les idées pour des petits détails et autres effets.

Je n’aime généralement pas coder directement, cette étape est probablement l’une des plus importantes même si le résultat final peut s’éloigner grandement du dessin.

2. Recherche des couleurs

Étant donné que je dessine au crayon de papier, le thème est encore en noir et blanc. J’utilise alors un outil comme ColorMatch Remix pour trouver une palette qui me convienne. Malheureusement, j’ai trop tendance à retomber sur des déclinaisons de gris dont j’aimerai me détacher pour faire des choses plus colorées.

D’une manière plus générale, le récent article sur Mezzoblue explique bien la recherche d’une palette de couleur.

3. Mettre en place un DotClear de test

Je duplique ensuite le thème par défaut dont je retire tous les styles et toutes les images pour ne garder que les templates PHP. Je peux alors afficher un blog «nu» sur mon serveur local. Je poste quelques billets et commentaires pour avoir un minimum de contenu. Parmi les différents billets, je poste le texte de démo de wiki2xhtml pour ne pas oublier d’éléments à styler.

La documentation de DotClear est également nécessaire pour modifier les templates.

4. Création de la feuille de style

Je peux alors commencer la feuille de style (positionnement, styles des éléments HTML, et autres effets) en créant au fur et à mesure les images dont j’ai besoin.

Pour la feuille de style j’utilise TopStyle Lite et pour les images j’utilise Photoshop. J’ai appris à utiliser ce dernier logiciel il y’a peu pendant mes cours à l’université mais je pense que je vais me mettre à The Gimp pendant ces grandes vacances.

Il arrive parfois que je me rende compte que l’idée de départ n’était pas aussi bien que je l’espérais. Je retravaille alors le document jusqu’à trouver quelque chose qui me convienne. Pour anecdote, daClear était à l’origine dans les tons oranges/bruns sur fond blanc…

5. Tests

Finalement, la page est testée dans différents navigateurs. J’ai à ma disposition des navigateurs MSHTML (Internet Explorer de 4 à 6), Gecko (Mozilla Suite, Firefox, Epiphany), texte (Lynx) et autre (Opéra).

6. Distribution

Il ne reste plus qu’à packager le thème avec l’extension de DotClear et à mettre en ligne le fichier.