Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Développement de thème : débutant, intermédiaire et avancé

Traduction de la page http://drupal.org/node/805968
publiée / actualisée le 2 Mars 2011 sur Drupal.org


Lors de la création d'un site Drupal, vous disposez de plusieurs options pour la mise en place de son thème graphique. Pour vous faciliter la tâche, quelques-unes de ces façons de faire sont expliquées ci-dessous, groupées par niveau de connaissances.

Pour les débutants

S'il s'agit de votre premier site Drupal et si vous n'avez pas encore d'expérience concernant les CSS ou la mise en page de sites, vous devriez choisir et installer un thème (page en anglais) utilisable tel quel et dont l'aspect est proche de ce que vous souhaitez. Vous pourriez par exemple installer :

Sachez que certains aspects de la présentation d'un site peuvent être facilement modifiés dans la partie Thèmes de l'administration Drupal (Administrer >> Construction du site >> Thèmes >> Configurer ou URL admin/build/themes/settings). Par exemple :

  • Modifier la palette de couleurs de certains thèmes, comme le thème Garland du core (cela demande l'activation du module Color). C'est encore plus simple pour d'autres thèmes depuis Drupal 7.

  • Modifier le logo par défaut du site, son slogan et son favicon.

  • Le module Field (disponible comme moduler tiers sous Drupal 6 : le Content Construction Kit) : utilisé au départ pour la création de nouveaux types de contenus, il permet également de modifier les libellés et l'agencement des champs dans ces types de contenus.

  • Des thèmes facilement personnalisables depuis l'interface Utilisateur, offerts par des services Drupal comme Drupal Gardens d'Acquia ou Buzzr de Lullabot et d'autres, ou par des générateurs de thèmes.

Un grand nombre de modules tiers vous permettent de paramétrer certains aspects de votre thème via l'interface d'administration (voir leur documentation). Par exemple:

  • Views : active l'affichage de listes de nodes. Ces listes peuvent être paramétrées pour n'afficher que certains champs de ces nodes.

  • Des thèmes célèbres utilisant le module Skinr ont leurs styles disponibles dans l'interface Utilisateur de Drupal et n'ont pas besoin de codage CSS.

Pour les niveaux intermédiaires

Si vous êtes en train d'apprendre à faire des thèmes via les CSS, il y a quelques options à considérer pour que votre thème soit vraiment le vôtre. Vous pouvez copier un thème et modifier quelques-uns de ses fichiers, ou vous pouvez créer un thème dérivé (sub-theme).

Une bonne façon d'apprendre consiste à modifier un thème existant, en installant un de ceux mentionnés dans la section Débutants, ou en copiant un des thèmes se trouvant dans le dossier themes. Chaque thème est enregistré dans son propre dossier. Pour en faire une copie, créez un dossier appelé, par exemple, sites/all/themes/montheme. Vous copierez tous les fichiers du thème choisi dans ce nouveau dossier. Par exemple, copiez tous les fichiers de theme/bartik dans sites/all/themes/montheme. Ensuite vous modifierez le contenu du fichier .info pour lui donner le nom de votre thème à vous.

Une deuxième option serait de créer un sous-thème (voir la traduction en français : thèmes dérivés), ce qui facilitera les mises à jour. Cela présente également comme avantage le fait de ne pas avoir à copier tous les fichiers du thème parent. Pour créer un sous-thème, créez un dossier, par exemple sites/all/themes/monsoustheme et mettez-y un fichier .info qui contient une ligne pointant vers le thème parent.

Dans les deux cas, l'un des points de départ pour la personnalisation du thème consistera à modifier votre copie du fichier style.css (celui qui se trouve dans le dossier de votre thème). De cette façon, vous « surchargez » le fichier .css par défaut. Vous testerez les modifications des CSS à l'aide de Firebug et effectuerez vos changements pas à pas.

Pour d'autres infos, reportez-vous à Tools, best practices and conventions (voir traduction en français : ici). Pour un survol des CSS, consultez la page CSS de Wikipedia.

Une troisième option, et une alternative aux sous-thèmes, est la réalisation d'une feuille de style locale, dont l'existence et l'utilisation est supporté par certains thèmes.

Par la suite, vous pourrez créer des sous-thèmes dérivés d'un « starter theme » et lui ajouter vos propres feuilles de style.

Pour les experts

Pour les concepteurs de thèmes chevronnés œuvrant via des CSS, les starter themes mentionnés précédemment permettent un gain de temps appréciable puisqu'il suffit de leur ajouter du code CSS. Néanmoins, une fois étoffées vos compétences en thèmes, vous pourrez travailler avec des fichiers gabarits ou avec les fonctions de thèmes.

Des fichiers gabarits de thèmes sont des fichiers situés dans le dossier de votre thème qui se terminent par l'extension .tpl.php. Ce que vous devrez faire sera créer votre propre dossier pour le thème, comme indiqué ci-dessus, puis y placer les fichiers gabarits de mise en page dont vous aurez besoin. Ces fichiers gabarits supplanteront les fichiers gabarits par défaut. Vous pouvez avoir plusieurs fichiers .tpl.php dans votre dossier, qui supplanteront tel ou tel type de contenu, mais au départ, vous travaillerez sans doute avec le fichier gabarit principal d'une page.

Le fichier gabarit principal est appelé page.tpl.php, il contient principalement du code HTML, et comprendre comment s'en servir n'est pas trop compliqué. C'est le fichier majeur qui crée le code HTML de chaque page, en le modifiant vous modifiez donc l'aspect de la page.

Vous pouvez effectuer votre propre copie de ce fichier et y placer votre code HTML et votre code PHP afin que la page ressemble à ce que vous souhaitez. Le code PHP consiste essentiellement en instructions conditionnelles qui masquent certaines parties de la page si elles ne contiennent pas de données.

La deuxième façon de travailler pour créer votre propre thème est de surcharger les fonctions PHP. Vous devez pour cela trouver l'exemplaire original de la fonction puis vous la surchargerez avec une fonction dont le nom est cohérent avec votre thème. Ce point est abordé plus loin dans ce document.

D'autres infos sur la création d'un thème de A à Z sont disponibles dans le Guide de thème Drupal (en français sur kolossaldrupal) ou dans des livres sur Drupal. Consultez également le forum et le groupe sur les techniques avancées de conception de thème.

Par la suite, si vous le souhaitez, vous pouvez mettre les thèmes que vous concevez à disposition, pour aider d'autres personnes à débuter dans la conception de thèmes Drupal.

Notes

Pour connaître les modifications entre Drupal 6 et Drupal 7, consultez la page converting 6.x themes to 7.x page (voir la traduction en français sur kolossaldrupal).

Les sections qui suivent expliquent comment déclarer la structure d'un thème, les noms de région des thèmes, les feuilles de style, le JavaScript, et le fichier .info obligatoire.