Depuis un an, le style visuel de mon bloug a évolué et en cette fin d'année, je ressens l'envie d'en changer. La tâche est ardue, tant les notions de Cascading Stylesheets ont pris le pas sur ma connaissance modeste, mais maintenant presque dépassée, du HTML. 
Heureusement, il existe des dizaines de thèmes libres et bien programmés, à partir desquels il est conseillé de repartir... j'ai en effet pour habitude d'aller au plus pragmatique et de ne pas réinventer la roue lorsque cela m'est possible.
Rappel des fichiers principaux qui définissent l'apparence d'un blog Dotclear :
- template.php, qui contient le code permettant d'afficher les billets, les commentaires (...)
- sidebar.php, qui contient le code HTML nécessaire à l'affichage de la barre de menu (ceci pour décharger le fichier template.php qui devient illisible à mesure que les éléments de menu augmentent).
- layout.css et style.css. Ces fichiers décrivent respectivement la disposition des éléments de la page, et leur habillage (polices, couleurs, tailles, ...).
L'idée est donc :
- soit d'aller faire un tour sur le site Dotclear afin d'y trouver un thème prêt à l'emploi.
- soit de faire le tour des thèmes sympas et d'en prendre un comme base de départ, et de modifier disposition des éléments et couleurs en fonction de vos goûts.
Pour ma part, le thème Pinky Blog de Deadly Breakfast m'inspire confiance 
Je pense partir de là, au moins pour ce qui est de la définition initiale du positionnement des éléments de page (layout.php).
Une fois layout.css intégré au blog, j'ajoute la ligne suivante à chaque zone de lapage (#main, #content, #sidebar, ...) :
border: #ff2f2f solid 1px; /* debug rouge */
en changeant les couleurs (#xxxxxx), ceci pour identifier clairement les différentes zones du blog en cadres de couleurs différentes.
Voici ce que cela donne :
Une fois toutes les zones du thème identifiées, il est beaucoup plus simple de re-travailler leur positionnement et l'aspect visuel des éléments qu'elles contiennent.
La suite au prochain épisode...