Créer un thème Drupal personnalisé

En jargon Drupal, le "thème" d'un site correspond à son apparence, à sa charte graphique. Si vous créez un site professionnel ou que vous souhaitez donner une apparence unique à votre site, vous ne pourrez probablement pas vous contenter des thèmes fournis par défaut avec Drupal. De plus, contrairement à d'autres solutions Open Source, la communauté Drupal ne propose pas énormément de thèmes à télécharger librement. Pour toutes ces raisons, vous serez sûrement amené un jour ou l'autre à créer votre propre thème Drupal. Ce tutoriel détaille les étapes à respecter, depuis la conception du design jusqu'à l'intégration en HTML/CSS.

Concevoir une charte graphique pour Drupal

La conception du design d'un site web débute généralement dans un logiciel de traitement d'images comme Photoshop. Les sites Drupal n'échappent pas à la règle et il est conseillé de commencer par faire une maquette de votre site dans un de ces logiciels.

A ce stade, bien connaître le fonctionnement de Drupal peut déjà vous être utile. Par exemple, le fait de savoir qu'une page Drupal se compose typiquement de plusieurs zones (en-tête, pied de page, colonne de droite, colonne de gauche, centre...) vous permettra de concevoir une charte graphique tenant compte de cette organisation.

Ensuite, il faut garder en tête la façon dont Drupal remplit ces zones : le contenu principal (pages, articles...) est envoyé dans la colonne centrale, alors que les blocs sont envoyés dans les colonnes latérales droite ou gauche, selon votre paramétrage ; la navigation apparaît en général dans l'en-tête ; un texte peut apparaître dans le pied de page...

Par ailleurs, n'oubliez pas que le contenu est dynamique : il est injecté dans la page en fonction de ce qui a été saisi par l'utilisateur ; il est donc impossible de prévoir à l'avance la place occupée par ce contenu. Votre design doit donc présenter une certaine flexibilité : si par exemple vous donnez une largeur fixe à la page, vous la laisserez s'agrandir ou se rétrécir en hauteur, pour qu'elle puisse s'adapter au volume de données affichées.

Si vous n'avez aucune expérience de Drupal, le plus simple est d'installer un nouveau site avec le thème bluemarine et d'y créer du contenu bidon : créez quelques articles, des blocs, entrez une navigation dans les Primary Links, entrez du texte dans le pied de page... Cela vous permettra de voir comment Drupal les affiche par défaut, et quels éléments doivent être pris en compte dans votre design.

Comprendre la structure d'un thème Drupal

Les thèmes sont situés dans le répertoire /themes de votre installation Drupal :

IMAGE

Comme on peut le voir, Drupal 4.7.x propose 3 thèmes par défaut (bluemarine, chameleon, pushbutton), chacun dans son propre sous-répertoire.

Concrètement, un thème est un ensemble de fichiers contenant du code HTML, du code PHP, des images, et des feuilles de styles CSS. Examinons chacun de ces fichiers en nous basant sur le thème par défaut de Drupal 4.7.x : bluemarine. Il contient :

• block.tpl.php : template pour afficher un bloc
• box.tpl.php : template pour afficher une boîte
• comment.tpl.php : template pour afficher un commentaire
• logo.png : image correspondant au logo
• node.tpl.php : template pour afficher un node
• page.tpl.php : template pour afficher une page
• screenshot.png : image correspondant à l'aperçu du thème visible sur administer » themes
• style.css : feuille de styles CSS

Les templates

Les fichiers de templates (.tpl.php) contiennent le code HTML qui sert de charpente à chaque page de votre site Drupal.

En gros, chaque page affichée sur votre site correspond au template page.tpl.php dans lequel Drupal a injecté du contenu aux endroits appropriés. Ce contenu utilise également des templates : par exemple, les commentaires sont affichés avec le template comment.tpl.php, les blocs avec le template block.tpl.php...

Ainsi, si vous voulez modifier le code HTML de votre site, c'est l'un de ces fichiers qu'il faut modifier. Par exemple, pour faire en sorte que le titre des blocs soit affiché avec la balise h3, il faut modifier le code de block.tpl.php de sorte qu'il contienne :

Vous remarquerez que le code HTML des templates contient des petits bouts de PHP (délimités par <?php ... ?>). Ces derniers permettent à Drupal d'insérer le contenu en provenance de la base de données aux endroits appropriés. En effet, chaque bloc est affiché à partir du même template, mais le contenu du bloc, lui, vient de variables PHP alimentées par la base de données.

Les styles CSS

Les styles CSS se trouvent tous dans le fichier style.css. Si vous le souhaitez, vous pouvez réorganiser vos styles dans plusieurs fichiers séparés que vous importerez tous dans style.css.

Pour partir d'une base vierge, vous pouvez effacer tous les styles contenus dans style.css et créer les vôtres, mais je ne vous le conseille pas. En effet, en conservant style.css, vous verrez toutes les balises et classes qui peuvent être stylées et cela facilitera beaucoup votre travail.

De plus, si vous effacez tout, vous risquez de supprimer les styles auxquels vous n'aviez pas pensé, mais qui finalement vous convenaient tels qu'ils étaient.

Les images

Le fichier screenshot.png n'est pas très important, vous pouvez le laisser tel quel.

En revanche, vous voudrez probablement enregistrer votre logo au format PNG et l'appeler logo.png de sorte que quand vous le mettrez dans le répertoire de votre thème, il s'affichera automatiquement en haut à gauche de chaque page.

Créer votre propre thème Drupal

Pour créer votre propre thème, le plus simple est de partir d'un thème existant. bluemarine étant le thème par défaut de Drupal 4.7.x et un des plus simples à comprendre, il est tout indiqué !

Nous allons donc faire une copie du répertoire bluemarine et la renommer en ce que nous voulons (sans espace ni accent), par exemple "psychedelic". NB : cette copie doit se trouver dans le répertoire /themes de votre installation Drupal.

Rendez-vous ensuite dans administer » themes et cliquez les colonnes Enabled et Default pour le thème que vous venez de créer devienne actif.

Il ne vous reste plus qu'à modifier les fichiers de votre thème pour lui donner l'apparence voulue.