Le theming drupal n’est pas facile à comprendre quand l’on commence à s’y intéresser. En effet, certains conseillent de partir de rien et de construire son thème « from scratch » d’autres conseillent de partir d’un thème existant… mais ceux-ci sont souvent complexes pour une première approche.

Personnellement, je pense que partir d’un thème existant est la meilleure solution, sous certaines conditions. Il s’agit de partir d’un thème simple, de l’adapter à notre besoin et de ainsi comprendre de nouveaux mécanismes (que l’on n’aura pas forcément saisis dès le départ) et ainsi progresser pour appréhender des thèmes plus complexes.

 
Quel kit de départ choisir ?

Pour commencer, il faut se rappeler des bases !

En suite, il s’agit simplement de prendre un thème simple pour le modifier. Dans mon cas, j’aime utiliser le kit de départ « Basic » , en le modifiant un peu. Je ne garde que les fichiers « .tpl.php » et le dossier « css ». Je supprime les autres fichiers, renomme le fichier basic.info en fonction du nom de mon nouveau thème… et j’adapte son contenu à mes besoins. Par exemple je n’utilise pas les « features » car je considère que cela est bien pour des thèmes génériques mais pas pour un thème custom… Finalement, je garde le fichier « template.php » au départ, mais je le vide complètement.

En bref, déjà que ce kit de départ est simpliste, mais moi, je le nettoie encore de son code, selon moi superflu.

Certains conseillent d'utiliser le starter kit "Zen"... personnellement, je ne le conseil pas car il est complexe. En effet, les thèmes de départ, sensés être simples dépendent fortement du thème principal (dont en fait ils sont des "sous-theme"). Ainsi, le thème Zen est sympa, mais pas simple a exploiter. Si vous l'utilisez, vous constaterez que le thème drupal de ce blog ressemble a l'un des sous thème Zen... sauf qu'il est en fait construit avec une copie personnalisé par mes soins du thème "basic". 

La structure des css

Le système d’organisation de drupal permet de remplacer les fichiers par ceux que l’on souhaite… en fait, par défault, drupal va utiliser ses fichier de gabarit a lui dans le cas ou le thème choisi n’en possède pas. Ainsi, on remplace en quelque sorte les gabarits du système par les nôtres en utilisant un thème spécifique. Ces remplacements concernent les fichiers « .tpl.php ». 

Bien évidemment, nos gabarits utilisent nos feuilles de style (css) qui sont elle même contenu dans le répertoire du thème.

La structure des fichiers CSS est elle aussi un peu spéciale, mais terriblement logique et efficace. Cette structure permet de savoir tout de suite quel fichier est à modifier pour obtenir un style précis sur un élément du code html.

Dans le cas de notre thème de base, nous avons :

• css/default.css : contient les propriétés concernant la structure de la page (wireframe), c’est a dire les mises en formes génériques concernant les différents blocks html. Il est le cadre le plus haut et concerne les éléments tel que le header, le wrapper (content) et le footer.
• css/layout.css vient juste en dessous de default.css et affine les mises en forme en gérant les principaux blocks que sont les « sidebars », les régions, etc. Cependant, ce fichier contient surtout des propriété de positionnement des éléments les uns par rapports aux autres. Ce fichier contient des propriétés portant sur les id et classes laissés sur les balises html (#content, .sidebar, etc).
• css/style.css concerne quant à lui les balises html. On retrouvera ainsi les mises en forme de liens, etc…

Ces trois fichiers permettent de tout mettre en forme. En effet, on part de default.css pour une organisation générale du rendu. On passe en suite a layout.css pour mettre en forme les blocks de la page tel que les dimension et positionnement des « sidebars », pour finalement finir par les balises html. On constate que tout reste général. Cela permet de garder une cohérence sur tout le site. Cependant, dans le cas d’un besoin précis de mettre en forme un élément en particulier, je vous invite a le faire dans un nouveau fichier css que vous indexerez dans le fichier montheme.info pour qu’il soit pris en considération par « montheme ».

Outils conseillés

Pour ces manipulations, vous n’aurez pas besoins de logiciels spécifiques. Un « block note » avec une coloration syntaxique suffit (Notepad++, SciTE, Smultron, etc). La coloration n’est pas obligatoire, mais est plus confortable ! Pour vous aider dans le choix des éléments a mettre en forme et déterminer quelle propriété intervient sur l’élément concerné, je vous conseil d’installer le plugin pour firefox nommé firebug.  

Créer un thème n’est pas très complexe, mais il faut savoir comment ils fonctionnent pour arriver à un résultat propre. Vous constaterez que je n’ai pas parlé de modification concernant le fichier template.php. En fait, j’utilise ce fichier essentiellement pour la suggestion de Template. Ce sujet sera abordé lors d’un prochain billet.