J'avais jadis bidouillé mon thème sur base des Aorakit de Kozlika et je voulais, suite à l'appel 42[1] en autre, le revoir et en proposer un qui soit très (encore plus que l'actuel) épuré et surtout responsive. Tout ça from scractch.

Mes connaissances en CSS sont assez basiques et faire un design responsive n'est pas si simple qu'il n'y parrait. Sur le chan IRC de dotclear, j'ai vu passer Knacss qui offre une feuille de style permettant de « bien commencer ».

Armé de ce Knacss et de la doc dotclear, on peut commencer.

D'abord dire que c'est commencé en créant un répertoire pour son thème et en y ajoutant un fichier _define.php à l'allure suivante:

<?php
# ***** BEGIN LICENSE BLOCK *****
# …
# ***** END LICENSE BLOCK *****

$this->registerModule(
	/* Name */		"Mon beau thème",
	/* Description*/	"Responsive 1 colonne, très simple",
	/* Author */		"Juste Leblanc",
	/* Version */		'0.0.0.0.1'
);
?>

Dans le répertoire de mon thème doit apparaitre un répertoire tpl contenant tous les templates utiles à dotclear. Ces templates sont nommés en fonction de leur usage: post.html utilisé pour l'affichage d'un billet, home.html pour l'affichage de la page home, … Les templates par défaut se trouvent dans inc/public/default-templates pour les templates de base. Les autres, s'ils proviennent d'un plugin se trouvent dans plugin/<leplugin>/default-template.

La magie de dotclear est telle que si un template n'apparait pas dans le répertoire tpl du thème, c'est le template par défaut qui est utilisé.

La manière la plus simple de créer un thème est donc de créer un fichier _define.php et un fichier style.css sans créer de template. Le thème utilisera les templates par défaut et les modifications de style ne se trouveront que dans la feuille de style. C'est bien.

Le fonctionnement de Knacss est un peu différent (et un peu controversé): plutôt que de définir un style .sidebar {…} dans ma feuille de style précisant où et comment doit s'afficher la sidebar par exemple, je vais utiliser des styles prédéfinis par Knacss dans le template de dotclear pour mettre en forme cette sidebar.

C'est un peu comme si, dans un document LibreOffice [2], je n'utilise pas trop les styles mais je mets les paragraphes en forme au fur et à mesure.

Dans le cas de LibreOffice, c'est très mal ! Dans le cas de pages html, je trouve ça moyen mais dans le cas de templates, je trouve que c'est acceptable. Puisque l'on ne touche jamais aux templates, je suis sur que mon rendu sera identique pour toutes les pages de mon site.

Par contre … ça m'impose de passer en revue tout les templates …

Les particularités de ce design:

  • suppression de la sidebar et de la navbar;
  • ajout d'une signature dans le bas du billet, qu'il faut mettre à jour à la main
  • ajout du fichier _config.php qui permettra d'éditer le thème en ligne
  • nécessite le plugin Gravatar
  • j'utilise Disqus pour les commentaires [3]

Il reste a ajouter un fichier screenshot.jpg afin que l'utilisateur puisse voir à quoi ça ressemble.

Le thème va encore évoluer … je ne sais pas s'il arrivera un jour dans les thèmes « officiels ».

Il s'appelle Mine 13 et est disponible sur Bitbucket.

Enjoy !

Liens

Notes

[1] C'est le petit nom donné au coup de gueule / déprime de Franck

[2] MS Word en mieux

[3] Il faudra que je trouve un moyen de permettre la configuration de cet aspect si je veux diffuser le thème