La première chose à faire lorsqu’on veut créer un thème pour Dotclear consiste à créer un dossier du nom du thème dans le dossier regroupant tous les thèmes utilisables par le blog. Tu n’es pas obligé de donner à ce dossier le nom du thème mais je trouve ça boooooocoup plus mieux pratique pour s’y retrouver.

Création du dossier du thème

Ensuite, j’y ai placé :

  • sa « carte d’identité » : un fichier _define.php qui contient les informations importantes dont Dotclear a besoin pour identifier le thème et le traiter ;
  • un fichier style.css qui regroupera les règles de présentation ;
  • ce fichier en appelle deux autres : mediaqueries.css et rebase.css que je place donc également dans ductile ;
  • un dossier img qui me servira à ranger les images utilisées par le thème ;
  • un dossier tpl pour y placer les fichiers templates qui diffèrent ou complètent ceux de la livraison de base.

Vue du dossier du thème Ductile

La carte d’identité

Le fichier _define.php est très simple, je t’en copie le contenu ci-dessous :

<?php
# -- BEGIN LICENSE BLOCK ---------------------------------------
#
# Copyright (c) Association Dotclear
# Licensed under the GPL version 2.0 license.
# See LICENSE file or
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
#
# -- END LICENSE BLOCK -----------------------------------------
if (!defined('DC_RC_PATH')) { return; }

$this->registerModule(
	/* Name */			"Ductile",
	/* Description*/		"Chantier pour un nouveau theme",
	/* Author */			"Dotclear Team",
	/* Version */			'0.1'
);
?>

Nous ferons évoluer le numéro de version au fur et à mesure des étapes que nous franchirons vers la construction du thème. Lorsqu’il sera fini, nous modifierons également sa description.

Les fichiers CSS

Ils sont pour le moment au nombre de trois. Pendant le chantier ils resteront séparés, quitte à les réunir plus tard, mais ils permettent de mieux comprendre le rôle différent des règles qu’ils contiennent.

  • style.css. C’est ici que prendront place les règles communes à toutes les déclinaisons du thème. Il contient peu de choses pour le moment : l’appel aux deux autres fichiers CSS et la présentation des liens. J’ai ajouté en fin de fichier des règles que nous n’utiliserons peut-être que sur ce blog.
  • rebase.css. Le fichier feignasses-compliant bâti au fil des années qui (re)définit les règles des balises html. Il remplit deux rôles : mettre tous les navigateurs d’accord (chaque navigateur définit des règles par défaut et bien sûr chacun à sa façon…) et se mettre en accord avec ce qui me semble bien. Je place ce fichier (ou plus couramment son contenu) à chaque fois que je débute un chantier html/css. Si tu souhaites plus de détails à ce sujet, j’y dédierai un billet spécifique.
  • mediaqueries.css. Ce fichier permet d’adapter la structure de la page en fonction de la taille de la fenêtre du navigateur et d’y placer des règles spécifiques (par exemple, le titre du blog est un peu plus petit pour les écrans dont la largeur est inférieure à 480px). Je vais y revenir dans un prochain billet.

L’essentiel de ce que tu vois aujourd’hui sur ce blog (dont l’apparence évoluera en même temps que la construction du thème) est essentiellement issu du fichier rebase.css puisque les deux autres ne contiennent pratiquement rien pour le moment.

Le dossier tpl

Il ne comporte pour le moment qu’un seul fichier, user_head.html. Son contenu viendra s’insérer dans l’entête de toutes les pages, à la suite de ce qui est déjà en place via le fichier head.html des templates utilisés par défaut par Dotclear.

J’en ai eu besoin pour insérer ceci :

<!-- media queries -->
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Nous y reviendrons lors du billet qui évoquera le fichier mediaqueries.css.

Tu trouveras, ainsi que pour chaque billet de cette série, un .zip comportant le thème en son état du jour.