Le manuel des thèmes Drupal 6

La documentation Drupal 6 n'est plus maintenue et en cours de dépublication.


Consultez le guide utilisateur Drupal en français directement sur drupal.org.

Submitted by Anonyme (non vérifié) on

Introduction aux thèmes

[edit] Pré requis

Drupal est reconnu pour sa puissance et sa flexibilité, il est ainsi parfois difficile de comprendre comment interagissent les différents éléments qui composent l'application. Même s'il existe de nombreuses façons de réaliser un thème, toutes ne sont pas forcément recommandées. Avoir connaissance des bonnes pratiques permet de minimiser les erreurs et de faciliter la maintenance. Même si vous choisissez de ne pas respecter les règles et de mettre en œuvre votre propre méthode, vous aurez de meilleurs chances de succès en en ayant eu connaissance.

Cela ne veut pas dire que vous devez comprendre Drupal dans les moindres détails pour être capable de créer votre propre thème. En fonction de la complexité du résultat recherché, il vous faudra plus ou moins maitriser les spécificités du système de thème de Drupal.

Le but de ce manuel est d'introduire les notions qui vous permettront de mieux appréhender le fonctionnement de la couche graphique d'une application Drupal. Certains paragraphes nécessiteront des compétences techniques tandis que d'autres seront plus basiques. La complexité des sujets présentés dans les pages suivantes évoluera progressivement : depuis une présentation des concepts que tous les créateurs de thèmes devront maitriser jusqu'à des sujets plus spécifiques et parfois plus techniques.

Afin de tirer parti de ce manuel vous devrez maitriser les concepts suivants :

* xHMTL et CSS
* JavaScript et jQuery (si votre thème nécessite l'utilisation de script)
* La terminologie utilisée dans Drupal

Une connaissance de PHP sera nécessaire pour certains chapitres mais il est possible de s'en sortir sans expertise aucune avec des thèmes purement CSS.

Selon la complexité du cahier des charges de votre thème, la création d'un thème peut être simple ou terriblement complexe. Drupal est très ouvert, il est donc nécessaire d'être prudent sur ce que vous allez tenter de réaliser. Vous devez d'abord penser au cahier des charges du site. Il est beaucoup plus facile de réaliser un thème en ayant des objectifs très précis et spécifiques que de réaliser un thème flexible et généraliste.

Enfin si vous êtes bloqué, lisez la page de dépannage, demandez dans le forum sur les thèmes ou sur IRC @ #drupal-themes. Voyez comment utiliser l'IRC ici.

[edit] Les thèmes : vue d'ensemble

Une pratique courante dans le monde du développement web est de séparer le code et le graphisme d'un site. Il existe de nombreuses bonnes raisons pour agir de la sorte, la plus évidente étant que l'expertise nécessaire pour programmer l'application est très différente de celle nécessaire pour créer une interface belle et efficace. En tant que créateur de Thème, vous pouvez contrôler uniquement l'affichage et la présentation. Seul le cœur de l'application et ses modules peuvent travailler avec les données d'entrée. Par exemple, un module peut mettre en place un formulaire qui aura un aspect standard et qui va traiter les données rentrées par l'utilisateur avant de les sauver dans la base de donnée. Le rôle d'un thème sera « seulement » d'intercepter l'affichage du formulaire afin de le modifier pour l'adapter à la charte graphique du site.

Ce mécanisme d'abstraction est accomplie par la fonction « theme » de Drupal. Elle dirige vers le sous-système de thème. Elle permet aux moteurs de thèmes de fournir une couche optionnelle intermédiaire pour des langages de tags comme PHPTAL ou Smarty. Elle permet aussi aux thèmes de contrôler tout le marquage de présentation. Les moteurs de thèmes sont optionnels, tout comme les langages de tags. PHPTemplate est le moteur par défaut. Comme son nom le suggère, il utilise PHP comme langage pour afficher les variables qu'il associe au marquage xHTML.

Depuis Drupal 6, les contraintes pour la réalisation d'un moteur de thème ont été considérablement réduites.

Les moteurs de thèmes peuvent modifier une sortie venant de l'application ou de l'un de ses modules tandis que les thèmes peuvent intercepter n'importe quelle sortie. Notez que le moteur PHPTemplate ne peux pas intercepter de sorties au contraire des autres moteurs. Il y a cependant un cas spécial où les modules peuvent influencer l'affichage d'une sortie ou intercepter cette sortie mais il s'agit de cas vraiment très spécifiques et ils ne devraient pas impacter l'affichage dans la grande majorité des situations. Par exemple, le module devel le fait dans le but d'aider et assister les développeurs de thème. Plus de détails à venir dans un chapitre séparé.

Dans le cas où votre thème sera mis en forme uniquement par l'intermédiaire de feuille de style vous pouvez ignorer ce qui vient d'être dit. Mais quand le marquage à besoin d'être modifié il est alors important de savoir comment déterminer quelle est la source de la sortie afin de pouvoir la modifier.

* Notez que le cœur de Drupal et que de nombreux modules utilisent toujours des « fonctions de thème » et des « fichiers de gabarit » pour afficher leur marquage de présentation. Ne modifiez jamais des fichiers en dehors de votre répertoire de thème, cela vous posera des problèmes dès lors qu'il s'agira de mettre à jour votre application.

La puissance de l'open source est d'avoir une communauté qui gère les bugs et qui ajoute des nouvelles fonctions. Une fois que vous commencez à modifier le code source, vous créez un système fermé et vous perdez tous les bénéfices associés à la communauté. Drupal fournit toutes les fonctionnalités qui permettent d'intercepter et modifier l'affichage. Si vous avez besoin de modifier un fichier en dehors de ceux du thème, vous êtes soit en train de faire une erreur soit vous avez découvert un bug. Dans le dernier cas, merci de nous fournir un rapport de bug. Ou, encore mieux, donnez nous un patch qui permet de réparer ce problème.

* Pour ceux qui sont familiers avec les précédentes versions du moteur PHPTemplate, presque toutes les fonctionnalités sont mieux intégrées au cœur de l'application Drupal. La fonction de PHPTemplate est maintenant de détecter les fonctions de thème et les gabarits pour les besoins du thème. Il s'éloigne de se qu'on attend classiquement d'un moteur et se rapproche plus d'un assistant à la réalisation de thème. PHPTemplate a été développé initialement par Adrian Rossouw pour la version 4.7 de Drupal. Les changements pour Drupal 6 ont été l'oeuvre de Earl Miles. Le forum de discussion donne plus de détail sur les raisons qui sont sous-jacentes à la création du moteur et la liste suivante nous éclaire sur celles qui ont présidé à la nouvelle orientation du moteur de Drupal 6.

[edit] L'anatomie d'un thème Drupal

Si vous regardez le contenu du répertoire d'un thème phptemplate, vous y trouverez en général les fichiers suivants :

* Un fichier .info obligatoire pour y stocker des paramètres de configuration,
* Des gabarits en .tpl.php pour contrôler ce qui est affiché,
* Des feuilles de styles pour gérer l'apparence visuelle de ce qui est affiché,
* Un fichier template.php qui contiendra le code de fonctions spécifiques au thème afin, si nécessaire, de manipuler et transformer les données,
* Divers autres fichiers : logo, miniature…

[edit] .info (requis)

Ce fichier est obligatoire pour que votre thème soit détecté par Drupal. Son rôle est de configurer certaines éléments de votre thème. Vous pouvez y définir :

* Les méta données,
* L'emplacement des feuilles de styles qui vont contrôler l'affichage,
* L'emplacement des scripts JavaScripts,
* Le nom des différentes régions de vos blocs de contenus,
* Le nom du thème « parent » dans le cas d'un sous-thème (voir plus loin)
* Et plus encore, mais tout le reste est optionnel.

Le nom interne du thème est aussi déduit de ce fichier. Par exemple, si il est nommé « drop.info », alors Drupal considèrera que le thème s'appelle « drop ».

Les version 5 et précédentes de Drupal utilisaient le nom du répertoire qui contenait les fichiers du thème pour en déduire le nom interne du thème.

Les fichier info pour les thèmes sont nouveaux dans Drupal 6. Dans la version 5, les fichiers .info étaient seulement utilisés pour les modules.
[edit] Fichiers de gabarits (template) (.tpl.php)

Chaque élément de contenu (nœud, block, page, etc.) est contrôlé par son propre gabarit. Ce sont ces gabarits qui vont déterminer quels champs de chaque contenu vont être affichés. Pour accomplir leur rôle, ces gabarits sont principalement constitués de textes (pour le contenu statique), de variables PHP (pour le contenu dynamique) et de balises xHTML (pour la structuration du contenu).

Il y a des situations où ils peuvent afficher d'autres types de données -xmls rss par exemple. Chaque fichier .tpl.php manipule l'affichage de données spécifiques au thème et dans certaines situations, il peut manipuler plusieurs fichiers .tpl.php au travers du mécanisme de « suggestions ».

Faites attention à ne pas compliquer inutilement la logique et le contenu de ces fichiers. Dans la plupart des cas, ils ne devraient contenir que des balises xHTML et des variables PHP. Vous pouvez utiliser le fichier template.php pour y intégrer le code plus complexe (voir ci-dessous).

Ces fichiers sont optionnels et s'il n'en existe aucun dans votre thème, l'affichage des contenus sera celui par défaut. En effet, de nombreux gabarits standard existent dans les répertoires de l'application et de ses modules. Ce sont eux qui seront utilisés par défaut. En les copiant dans votre répertoire de thème vous vous assurez que Drupal prendra votre version en compte.

Note : Le « registre de thème » stocke les données de thème en cache Il doit être actualisé lorsque vous ajoutez ou modifiez des fichiers de gabarit ou des fonctions de thème.
[edit] Les feuilles de styles (.css)

Les feuilles de style CSS contrôlent l'apparence visuelle des contenus affichés par les gabarits. A l'image des fichiers de gabarit, elles sont optionnelles car les feuilles de styles standards de Drupal et de ses modules sont actives par défaut. Par contre chaque déclaration placée dans une feuille de style de votre thème interceptera la déclaration standard et sera donc prise en compte.

[edit] Le fichier template.php

Les fonctions spécifiques à votre thème, les fonctions de thème que vous interceptez et toutes autres spécificités doivent être placées ici. Ce fichier va gérer toute la logique conditionnelle et manipuler les données de sortie. Cela n'est pas obligatoire, mais afin d'améliorer la lisibilité des fichiers .tpl.php vous pouvez inclure dans le fichier template.php des pré-processeurs qui vont générer des variables avant quelles soient incluses dans les balises des fichiers .tpl.php.

Le fichier doit commencer par une balise d'ouverture PHP « < ? php », par contre il est recommandé de ne pas inclure la balise de fermeture.

[edit] Les sous-thèmes

Image:Sub-theme_branching.png

Pour faire court, on peut dire que les sous-thèmes se comportent comme n'importe quel autre thème. La seule différence est qu'ils héritent des ressources de leurs thèmes « parents ». Pour créer un sous-thème, il faut indiquer quel est son thème de base dans le fichier .info. Le sous-thème héritera alors de toutes les ressources du thème parent. Il peut y avoir de multiples niveaux d'héritage car un sous-thème peut être le thème de base d'un autre sous-thème. En fait il n'y aucune limite matérielle à cela.

Drupal 5 et les versions précédentes, demandaient à ce que les sous-thèmes soient placés dans des sous-répertoires du thème parent. Ce n'est plus le cas avec Drupal 6.

[edit] Autres

* Le logo et la capture d'écran ne sont pas nécessaires pour faire fonctionner le thème. Ils sont cependant recommandés, surtout si vous souhaitez partager votre thème avec la communauté. La miniature sera affiché dans l'interface d'administration des thèmes et dans celle de gestion des paramètres utilisateurs pour sélectionner un thème. Pour plus d'information, voyez les conseils relatifs aux captures d'écran.
* Afin de fournir plus d'information de paramétrage (logo, recherche, mission, etc.) un fichier "theme-settings.php" peut être utilisé. Ceci est une fonctionnalité avancée. Plus d'information dans la section Paramétrage Avancé du manuel.
* Pour le support du module « color », un répertoire « color » avec un fichier « color.inc » et quelques autres fichiers est nécessaire.

Si vous voulez baser votre travail sur un thème existant, utilisez la méthode des sous-thèmes ou faites une copie et renommez le thème. Il fortement déconseillé de modifier directement Garland ou Minelli parce qu'ils sont utilisés pour les processus d'installation et de mise à jour. Tous les thèmes doivent être installés dans le répertoire « sites/all/themes » afin de les séparer des fichiers standards. Lisez le chapitre sur les installation multi-site pour voir toutes les possibilités d'emplacement.

[edit] Le fichier .info

Dans Drupal 6, les fichiers .info sont désormais obligatoires pour chaque thème. Ce fichier doit se trouver dans le répertoire de votre thème. Si ce fichier est manquant, le thème ne sera pas visible par Drupal. Il doit obligatoirement se terminer par l'extension ".info" Le nom utilisé en interne (sans caractère spécial) du thème est dérivé de ce fichier. Par exemple, si le fichier est nommé "drop.info", alors pour Drupal, le nom du thème sera "drop". Soyez sûr de ne pas utiliser de caractère spécial, car ce nom sera utilisé pour informer Drupal de la manière dont seront formées certaines fonctions PHP. De ce fait, les limitations de nommage des fonctions PHP s'appliquent également au nom de ce fichier : doit démarrer avec un caractère alphabétique, pas d'espace ou ponctuation. Les Underscores sont autorisées mais pas les tirets. Les chiffres sont également autorisés si ce n'est pas le premier caractère.

La syntaxe est similaire aux fichiers INI. Il s'agit d'un fichier texte statique permettant de configurer le thème. Chaque ligne est composée d'une valeur clé à gauche, et d'une valeur à droite, avec un signe égal "=" entre eux. (par exemple : clé = valeur). Les "points-virgules" sont utilisés afin de mettre une ligne en commentaire.

Drupal comprend les clés listées ci-dessous. Si une clé n'est pas présente, Drupal utilisera la valeur par défaut.

* name !
* description *
* screenshot
* version *
* core !
* engine *
* base theme
* regions
* features
* stylesheets
* scripts
* php

name (requis)

* Le nom "naturel" du thème, qui peut désormais être différent de celui du nom "interne".

description (recommandé)

* Courte description du thème. Elle est affichée sur la page de sélection du thème "Administer Site building Themes"

screenshot

* Cette clé optionnelle donne le chemin où Drupal peut trouver une miniature d'illustration du thème. Si cette clé n'est pas renseignée, Drupal utilisera "screenshot.png" dans le répertoire du thème.
* Utilisez cette clé uniquement si vous souhaitez utiliser un fichier non nommé "screenshot.png" ou si vous désirez placer la miniature dans un répertoire autre que la base du thème (par ex. screenshot = images/screenshot.png).

version (recommandé)

* Cette chaine est automatiquement ajoutée par drupal.org quand une nouvelle version est créée et qu'un tarball est créé. Vous pouvez omettre cette chaîne si vous contribuez votre thème sur drupal.org. Sinon, vous pouvez renseigner la version de votre thème.

core (requis)

* Les .info doivent indiquer, impérativement, avec quelle version majeure du core de Drupal ils sont compatibles. La valeur renseignée ici est comparée avec la constante "DRUPAL_CORE_COMPATIBILITY". Si la comparaison est fausse, le thème sera désactivé.
* Ex: core = 6.x

engine (recommandé)

* Le moteur du thème qui sera utilisé. Si aucune chaîne n'est spécifiée, Drupal considèrera que le thème est autosuffisant. La plupart des thèmes devraient utiliser "phptemplate".

base theme

* Les sous-thèmes peuvent déclarer un thème de base. Cela permet un héritage des ressources de la part du thème de base.

regions

* Les régions (pour les blocks) disponibles pour ce thème sont définis en spécifiant ces clés "regions" suivies par le nom interne entre crochets [ ].
* Ex : regions[laRegion] = nom de la région
* Si aucune région n'est définie, les valeurs par défaut seront utilisées.

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

Features

* Divers éléments des pages rendues peuvent être activés ou non directement dans le fichier .info. Si ces éléments sont désactivés, les cases à cocher n'apparaitront plus sur la page de configuration du thème.

features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links

stylesheets

* Par défaut, les thèmes utilisent le fichier style.css de manière automatique. Néanmoins, il est possible de définir d'autre feuilles de style à ajouter.

script

* Permet de définir des fichiers javascript à insérer automatiquement dans votre thème.

php

* Cette chaine définit la version minimum de PHP qui doit être présente sur le serveur afin de supporter votre thème.
* Pour la plupart des thèmes, cette chaine de devrait pas être spécifiée.

[edit] Valeurs par défaut

regions

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

features

features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links

stylesheets

stylesheets[all][] = style.css

scripts

scripts[] = script.js

screenshot

screenshot = screenshot.png

php (minimum support)

DRUPAL_MINIMUM_PHP est une constante. Elle permet d'indiquer la version minimum de PHP qui doit être présente.

php = DRUPAL_MINIMUM_PHP

[edit] Feuilles de style
[edit] Blocs, contenus et régions

Les régions disponibles pour le thème en cours sont définies dans le fichier .info.

Les noms qui y sont définis sont convertis en variables dans le fichier "page.tpl.php" de manière automatique. Par exemple, pour l'entrée "regions[left] = Left Sidebar", on pourra utiliser la variable $left dans le fichier "page.tpl.php". De ce fait, les restrictions de nommage des variables php s'appliquent aux noms internes des régions. Elles ne peuvent contenir que des caractères alphanumériques et des underscores, mais ne peuvent commencer par un chiffre.

Gardez également à l'esprit :

* Qu'il existe des fichiers de template (.tpl.php) pour définir individuellement chaque block.
* Ajouter une région empêche les régions par défaut d'être utilisées. Si vous souhaitez garder les valeurs par défaut en plus de votre nouvelle région, vous devez également ajouter dans le fichier .info les valeurs par défaut.
* L'ordre de définition des régions influencera l'ordre dans lesquelles elles apparaitront dans le back office.
* Le contenu du fichier .info est mis en cache dans la base de donnée, donc si vous le modifiez, drupal ne prendra pas en compte la modification. Pour prendre en compte les changements,
o Utilisez le bouton "clear" sur la page "administer > Site configuration > Performance"
o Aller simplement sur la page de sélection de thème "Administer > Site building > Themes

[edit] Préférences personnalisées d'un thème

Divers éléments d'une page rendue par un thème peuvent être activés ou désactivés sur la page de configuration située dans Administration > Construction du site > Thèmes > nomDuTheme. Par exemple, le slogan peut être supprimé en décochant la case « Slogan du site » sur cette page.

Image:Features_enabled.png

[edit] Fonctionnalités activées

L'état de ces cases à cocher est dépendant des fonctionnalités activées à l'intérieur du fichier .info. Celles-ci doivent être définies avec le mot clé 'features' suivi de crochets ouvrant et fermant vides puis de la fonctionnalité elle même, e.g., features[] = la_fonctionnalité. Si rien n'est défini, les valeurs suivantes sont appliquées.

features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links

Pour désactiver ces fonctionnalités, ajoutez seulement celles que vous désirez dans le fichier .info. Définir seulement les fonctionnalités requises désactivera les autres. Certaines de ces fonctionnalités activeront également un champ de formulaire associé. Par exemple, 'logo' activera un champ d'envoi de fichier pour l'image à côté de la case à cocher.

Remarques:

* Le contenu du fichier [[#Le fichier .info[.info]]] est mise en cache dans la base de données. Drupal ne s'apercevra alors plus de vos modifications. (Ne pas confondre cela avec l'enregistrement du thème). Pour le vider, effectuez l'une de ces opérations :
o Cliquez sur le bouton 'Vider' situé dans Administrer > Configuration du site > Performance.
o Avec le bloc devel activé (fourni avec le module devel), cliquez sur le lien « Vider le cache ».
o Visitez tout simplement la page de sélection de thème dans Administrer > Construction du site > Themes.
* hook_features() n'est plus supporté.

[edit] Préférences avancées

Dans la section administration de Drupal, chaque thème a sa propre page de configuration dans admin/build/themes/settings/themeName. Cette page a un formulaire avec des paramètres standards tels que « Configuration du logo » et « Configuration de l'icône de raccourci ».

Dans Drupal 6, les auteurs de thèmes peuvent maintenant personnaliser cette page en ajoutant des champs de configuration au formulaire. Les utilisateurs de Drupal 5 devront avoir installé le module «Theme Settings API » (5.x-2.1 ou supérieur) afin de disposer de cette fonctionnalité et pouvoir poursuivre.

[edit] Ajouter des champs de formulaires pour le réglage de vos paramètres personnalisés

Tout d'abord, créez un fichier theme-settings.php dans le répertoire de votre thème et ajoutez-y la fonction themeName_settings() ou themeEngineName_settings(). Cette dernière est conseillée puisqu'elle permet plus facilement à d'autres utilisateurs de créer des thèmes dérivés du votre. La fonction doit utiliser l'interface de programmation « Forms » pour créer les champs additionnels.

Par exemple, pour ajouter des réglages au thème Garland, la fonction garland_settings() ou phptemplate_settings() doit être placée dans le fichier theme-settings.php du theme.

Si un utilisateur avait précédemment sauvegardé le formulaire de réglage du thème, les valeurs sauvegardées seront passées en paramètres à cette fonction dans la variable $saved_settings. Les champs à ajouter au formulaire doivent être retournés en tant que tableau de l'API« Forms ».

Les commentaires dans le code suivant vous en explique les détails :

<?php
// Un exemple du fichier themes/garland/theme-settings.php.

/**
* Implementation de la fonction THEMEHOOK_settings().
* 
* @param $saved_settings
*   array Un tableau contenant les réglages sauvegardés pour ce thème.
* @return
*   array Un tableau représentant les champs du formulaire.

function phptemplate_settings($saved_settings) {
 /*
   * Les valeurs par defaut des variables du thème. Assurez vous que $defaults
   * corresponde à $defaults dans le fichier template.php.
   */
  $defaults = array(
    'garland_happy' => 1,
    'garland_shoes' => 0,
  );

  // Fusionne les variables sauvegardées avec leurs valeurs par défaut
  $settings = array_merge($defaults, $saved_settings);

  // Crée les champs de formulaires additionnels en utilisant l'API « Form »
  $form['garland_happy'] = array(
    '#type' => 'checkbox',
    '#title' => t('Get happy'),
    '#default_value' => $settings['garland_happy'],
  );
  $form['garland_shoes'] = array(
    '#type' => 'checkbox',
    '#title' => t('Use ruby red slippers'),
    '#default_value' => $settings['garland_shoes'],
  );

  // Retourne les champs de formulaire additionnels
  return $form;
}
?>

Remarquez que les auteurs de thèmes peuvent créer des formulaires complexes, dynamiques en utilisant les fonctions avancées de l'API « Form » et des fonctionnalités javascript de « JQuery » (auto-completion, groupement de champs rétractibles).
[edit] Récupération des valeurs de configuration dans vos fichiers de thème

Pour récupérer les valeurs de configuration dans les fichiers de thème template.php ou .tpl.php, utilisez simplement theme_get_setting('varname'). Consultez l'API Drupal pour plus de détails : [1]

Par exemple :

<?php
$happy = theme_get_setting('garland_happy');
?>

[edit] Initialiser les valeurs par défaut

Puisque nous ne pouvons garantir que l'utilisateur se rendra sur la page admin/build/themes/settings/themeName, nous devons nous assurer que les valeurs par défaut de nos paramètres personnalisés soient initialisées.

Les variables de configuration du thème ne sont pas définies tant que nous ne soumettons pas le formulaire admin/build/themes/settings/themeName une première fois. Dans notre fichier template.php nous devons donc vérifier si les variables sont définies ou non. Si elles ne sont pas encore définies, nous devons leur assigner une valeur par défaut. Cela est accompli en récupérant une des variables et en regardant si sa valeur est null. Si elle l'est, nous enregistrons les valeurs par défaut en utilisant variable_set() et forçons un rafraichissement des paramètres dans les entrailles de Drupal avec theme_get_setting(, TRUE).

Ajoutez le code suivant vers le début de votre fichier template.php :

<?php
/<em>
</em> Initialise les réglages du thème
<em>/
if (is_null(theme_get_setting('garland_happy'))) {  // <-- changez cette ligne
  global $theme_key;

  /</em>
   * Les valeurs par defaut des variables du thème. Assurez vous que $defaults
   * corresponde à $defaults dans le fichier template.php.
   */
  $defaults = array(             // <-- changez ce tableau
    'garland_happy' => 1,
    'garland_shoes' => 0,
  );

  // Récupère les paramètres par défaut du thème.
  $settings = theme_get_settings($theme_key);
  // Ne pas sauvegarder les variables toggle_node_info_
  if (module_exists('node')) {
    foreach (node_get_types() as $type => $name) {
      unset($settings['toggle_node_info_' . $type]);
    }
  }
  // Sauvegarde les paramètres par défaut du thème.
  variable_set(
    str_replace('/', '_', 'theme_'. $theme_key .'_settings'),
    array_merge($defaults, $settings)
  );
  // Force un rafraichissement des paramètres.
  theme_get_setting('', TRUE);
}
?>

Notez que la variable nommée garland_happy dans la première ligne du code précédent doit être remplacée par le nom de variable d'un de vos paramètres de configuration et que $defaults doit être copié depuis votre fichier theme-settings.php.
[edit] Ajouter de nouveaux paramètres de configuration à une nouvelle version de votre thème

Après avoir publié une version 1.0 de votre thème, vous voudrez éventuellement ajouter de nouveaux paramètres de configuration personnalisés pour la version 2.0. Le procédé est quasiment identique. Cependant, faites attention au code d'initialisation dans la troisième étape :

1. Dans votre fichier theme-settings.php, ajoutez vos nouveaux paramètres de configuration aux variables $default et $form.
2. Dans votre fichier template.php, ajoutez vos paramètres à la variable $defaults dans le code d'initialisation des paramètres du thème.
3. Dans votre fichier template.php, mettez à jour le code d'initialisation pour vérifier l'existence d'un de vos nouveaux paramètres. Par exemple, si vous avez ajouté plusieurs paramètres y compris le paramètre garland_slippers, vous changeriez la première ligne du code d'initialisation du thème, ce qui donnerai :

if (is_null(theme_get_setting('garland_slippers'))) {

Cela assurera que les paramètres par défaut pour les nouveaux paramètres personnalisés soient ajoutés aux valeurs des anciens paramètres personnalisés.
[edit] Intégration du module couleur

Le module Color permet à l'administrateur de changer complètement le jeu de couleurs d'un thème. En sélectionnant une palette de 5 couleurs (aussi bien à partir d'un jeu de couleurs prédéfini ou manuellement), vous pouvez entièrement changer les couleurs d'un thème.

Le module peut altérer la feuille de style et regénérer les images. Toutefois le thème doit fournir plusieurs « hooks » spécifiques afin que cela soit possible et le design doit être créé pour spécifiquement pour s'y prêter.

Ce document explique les bases afin de créer un thème colorable.
[edit] Design

Il est important de réaliser que tous les designs ne se prêtent pas à cette pratique à cause de la façon dont le module color fonctionne.

Image:Color.module.png

Commencez par prendre une image transparente du design (la base), qui inclut tout excepté le fond. Composez ensuite cette image au dessus d'un fond coloré pour en obtenir les versions colorées. Enfin, découpez cette image en plusieurs petites images et sauvegardez les dans des fichiers séparés.

Il faut également adapter le fichier css et changer toutes les couleurs basées sur celles que vous avez définies. Le module change les couleurs en utilisant une palette comme référence. Les couleurs qui n'apparaissent pas literalement sont ajustées à la couleur la plus proche de la palette couleur (aussi bien pour un lien, texte que pour une couleur de fond).

Le maquettage du design dans votre logiciel de retouche d'image va consister à créer un fichier avec un ou plusieurs calques de couleurs de fond en bas et tout le reste qui se fond dessus en haut de la pile. Lorsque vous enregistrerez votre fichier, vous devrez fusionner tous les calques ensemble à l'exception des calques de couleurs de fond qui eux devront être rendus invisibles. Observez le fichier base.png du thème Garland pour en voir un exemple (ouvrez le à l'intérieur de votre logiciel de retouche pour voir les zones et niveaux de transparence. Afin de mieux les visualiser, vous pouvez créer un calque en dessous et le remplir de couleur). Il y a une vidéo qui vous montre comment créer votre propre fichier base.png avec Photoshop.

Tous les fichiers générés durant cette procédure sont stockés dans /files/css et utilisés à la place du répertoire images par défaut. Cela veut dire q'un thème devrait toujours fonctionner avec le jeu de couleur par défaut du thème même sans le module Color.
[edit] En pratique

Prenons Garland comme exemple. Les fichiers le plus importants se trouvent dans le sous répertoire themes/garland/color :

base.png

Ce fichier contient le design de base du thème, qui est composé et découpé en images.

color.inc

Ce fichier contient tous les paramètres nécessaires pour colorer le thème. Voyez plus bas.

preview.css

Ce fichier css est utilisé pour générer un aperçu lorsque vous changez une couleur.

preview.png

Cette image est utilisée pour générer un aperçu lorsque vous changez une couleur.

La présence de color/color.inc fait apparaître un sélecteur de couleur sur la page de configuration du thème. C'est un fichier php classique qui contient un tableau $info avec les valeurs suivantes :
[edit] Jeux de couleurs

<?php
array('schemes' => array(
    '#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'),
    '#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'),
    '#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'),
    '#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'),
    '#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'),
    '#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'),
    '#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'),
    '#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'),
    '#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'),
    '#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'),
    '#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'),
    '#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'),
    '#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'),
    '#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'),
    '#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'),
  ));
?>

Cette entrée contient un juste un tableau des jeux de couleurs prédéfinis. Chaque entrée doit avoir 5 couleurs, formatées comme ci-dessus, avec un titre.

Le premier jeu défini est utilisé comme référence et doit correspondre approximativement aux couleurs utilisées par vos images et feuille de style dans votre thème par défaut. Sinon les couleurs finales peuvent différer de ce que l'utilisateur en attendrai. Référez vous à la section « feuille de style » pour plus d'information sur la façon dont les couleurs sont calculées.
[edit] Images à copier

<?php
  array('copy' => array(
    'images/menu-collapsed.gif',
    'images/menu-expanded.gif',
    'images/menu-leaf.gif',
  ));
?>

Ce tableau contient une liste des images qui ne doivent pas être modifiées. Elles sont copiées à l'endroit où les images et la feuille de style sont générées.
[edit] Zones de remplissage et dégradés

Pour colorer l'image, une image cible de la même taille que l'image de base est créée, puis remplie avec des zones de couleurs et un dégradé. Pour plus de flexibilité, la localisation de ces zones est définie en spécifiant leurs coordonnées en utilisant (x, y, largeur, hauteur) :

<?php
  array('gradient' => array(0, 37, 760, 121));
?>

Vous pouvez spécifier un dégradé vertical de deux couleurs.

<?php
  array('fill' => array(
    'base' => array(0, 0, 760, 568),
    'link' => array(107, 533, 41, 23),
  ));
?>

Vous pouvez spécifier des régions pour chacune des couleurs de la palette. La région sera remplie avec la couleur sélectionnée. Les couleurs disponibles sont 'base', 'link', 'top', bottom' et 'text'.
[edit] Tranches de l'image

Ensuite, vous devez définir les zones de l'image de base à découper pour chacune des images. De nouveau, vous spécifiez leurs coordonnées de la forme (x, y, largeur, hauteur) à la suite du nom de fichier de l'image, tel qu'utilisé dans la feuille de style. Les découpes du logo et de la capture d'écran sont spéciaux et ont toujours le même nom de fichier. La capture d'écran sera redimensionnée à 150x90 pixels.

<?php
  array('slices' => array(
    'images/body.png'                      => array(0, 37, 1, 280),
    'images/bg-bar.png'                    => array(202, 530, 76, 14),
    'images/bg-bar-white.png'              => array(202, 506, 76, 14),
    'images/bg-tab.png'                    => array(107, 533, 41, 23),
    'images/bg-navigation.png'             => array(0, 0, 7, 37),
    'images/bg-content-left.png'           => array(40, 117, 50, 352),
    'images/bg-content-right.png'          => array(510, 117, 50, 352),
    'images/bg-content.png'                => array(299, 117, 7, 200),
    'images/bg-navigation-item.png'        => array(32, 37, 17, 12),
    'images/bg-navigation-item-hover.png'  => array(54, 37, 17, 12),
    'images/gradient-inner.png'            => array(646, 307, 112, 42),

    'logo.png'                             => array(622, 51, 64, 73),
    'screenshot.png'                       => array(0, 37, 400, 240),
  ));
?>

[edit] Fichiers

Pour finir, vous devez définir les emplacements des fichiers pour votre thème. Vous avez besoin d'une image et d'une feuille de style pour l'aperçu ainsi que de l'image de base* :

<?php
array(
  'preview_image' => 'color/preview.png',
  'preview_css' => 'color/preview.css',
  'base_image' => 'color/base.png',
);
?>
  • Avec Drupal 6, le module Color ne requiert plus d'image de base, rendant possible l'utilisation du module sans images.
    [edit] Feuilles de styles

Le module Color va lire le fichier style.css du thème ainsi que les autres feuilles de styles qui sont importées avec l'instruction @import et créer un nouveau fichier style.css. Il va changer les couleurs dans le fichier css en utilisant une des couleurs de la palette de référence choisie, en fonction du contexte :

* Links : la couleur 'link' est utilisée pour les règles qui s'applique aux éléments a.
* Text : la couleur 'text' est utilisée pour les règles écrites sous la forme color:.
* Base : la couleur 'base' est utilisée pour tout le reste.

Toutefois, si une couleur dans la feuille de style correspond exactement à une des couleurs de référence, le contexte sera ignoré et la couleur de remplacement correspondante utilisée à la place.

Image:Color-shift.png

Par exemple, supposez que votre couleur de référence soit dark blue par défaut, mais vous la changez en red. Votre feuille de style par défaut contient light blue et gray purple, toutes deux relatives à cette couleur de référence.

Les couleurs résultantes (mauve et marron) sont similairement différentes de red tout comme les couleurs originales l'étaient de dark blue. En d'autres termes, la différence relative en teinte, saturation, luminance est préservée.

Si vous vous apercevez que le module Color utilise la mauvaise couleur de référence, essayez de séparer les différents morceaux en règles css séparées, chacune dans son propre sélecteur { ... }, de telle sorte qu'il ne puisse y avoir de confusion de contexte possible.

Notez que si vous éditez votre feuille de style après avoir changé de jeu de couleur, vous devez de nouveau soumettre votre jeu de couleur pour régénérer la nouvelle version des couleurs relatives.

Si vous souhaitez préserver certaines couleurs dans votre feuille de style, vous devez placer leur règle CSS sous le marqueur suivant :

/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/

Vous ne pouvez utiliser ce marqueur qu'une seule fois dans votre fichier style.css. Il s'applique globalement, donc si vous l'utilisez à l'intérieur d'une feuille de style importée, toutes les couleurs situées sous l'instruction @import de cette feuille de style seront également préservées.
[edit] Faire correspondre les couleurs

Il est important que les images générées correspondent aux couleurs relatives de la feuille de style générée. Sinon des arrêtes moches peuvent apparaître.

Pour que cela fonctionne, les pixels de l'image de base doivent être de couleur unie dans les zones qui doivent correspondre avec les couleurs définies par la feuille de style. Parce que les zones où apparaissent ces couleurs dans l'image de base ne sont pas connues, une couleur de fondue qui doit être la même pour tout le design est utilisée. Garland utilise le blanc. Notez que l'image de base de Garland inclut des pixels gris et noirs, mais seulement dans les zones où des images sont utilisées comme fonds (par exemple l'entête). Autres que le blanc, le gris et le noir sont aussi de bons candidats.

<?php
  array('blend_target' => '#ffffff');
?>

Les masochistes peuvent jeter un coup d'œil aux entrailles du module Color, tout particulièrement à la fonction _color_shift() si vous êtes intéréssés par le pourquoi et le comment de ceci.

Finalement, vous devez faire appel au module Color dans votre thème. Pour l'exemple, un thème basé sur le moteur PHPTemplate est utilisé, mais cela s'applique également aux autres moteurs.

Dans votre fichier template.php, ajoutez le code suivant (pour Drupal 6.x) :

<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function phptemplate_preprocess_page(&$vars) {
  // Hook into color.module
  if (module_exists('color')) {
    _color_page_alter($vars);
  }
}
?>

Dans Drupal 5.x, vous aurez besoin de ce code :

<?php
/**
* Override or insert PHPTemplate variables into the templates.
*/
function _phptemplate_variables($hook, $vars) {
  if ($hook == 'page') {

    // Hook into color.module
    if (module_exists('color')) {
      _color_page_alter($vars);
    }
    return $vars;
  }
  return array();
}
?>

Cela va autoriser le module à surcharger le logo, la feuille de style et la capture d'écran de votre thème. Si vous effectuez d'autres changements dans _phptemplate_variables, vous devrez les inclure dans ce code.
[edit] Personnaliser la page de maintenance

La page de maintenance est utilisée quand le site est mis en mode hors ligne. Vous pouvez activer ce mode dans Administrer > Configuration du site > Maintenance du site. Ce mode va également entrainer des échecs d'accès à la base de données. Par défaut, le thème du noyau Minnelli est utilisé dans ce mode même si un autre thème est sélectionné. Pour utiliser votre thème pour la page de maintenance, cela doit être indiqué dans votre fichier « settings.php » situé soit dans « sites/default » ou dans « sites/votre.domaine.com ».

Dans ce fichier, activez le par la variable $conf avec le nom interne de votre thème :

<?php
$conf['maintenance_theme'] = 'nomDuTheme';
?>

Ensuite, copiez votre fichier principal « page.tpl.php » et renommez le « maitenance-page.tpl.php » ou copiez le modèle situé dans « modules/system/maintenance-page.tpl.php » dans le répertoire de votre thème et éditez-le de façon à ce qu'il s'accorde à votre site. Vérifiez les changements en mettant votre site en mode hors ligne puis déconnectez-vous.

Pour traiter les erreurs d'accès à la base de données, essayez de désactiver votre base. Tout appel à une fonction qui dépend de la base de données devrait d'abord vérifier qu'elle soit active avec db_is_active. La variable db_is_active peut être utilisée par le modèle.

Pour empêcher les alertes à propos de la connexion à la base de données d'apparaître, vous pouvez également placer un fichier modèle nommé « maintenance-page-offline.tpl.php » et changer la variable $content avec votre message personnalisé. Ce modèle de fichier étant un modèle suggéré basé sur « maintenance-page-offline.tpl.php », les deux doivent exister.

Une feuille de style « maintenance.css » est incluse dans ce mode. Elle est située dans « modules/system/maintenance.css ». Vous pouvez surcharger ce fichier avec les instructions fournies dans la section feuilles de styles.

Notes :

* L'installation et la mise à jour de votre site dépend des thèmes du noyau, Minnelli et Garland. Cela ne peut être changé pour ces modes.
* Le theme registry n'est pas mis en cache lorsque le mode hors ligne est activé.

[edit] Régler les problèmes de votre thème

Malgré tous les efforts que vous consacrerez à construire votre site, la chose la plus importante pour vos utilisateurs est l'aspect de votre site. Gérer les incohérences dans votre thème pour chaque navigateur, chaque module, et pour les thèmes sélectionnables par vos utilisateurs peut être un véritable challenge.

Premièrement vous devez vous familiariser avec les concepts basiques des feuilles de styles en cascade (CSS). Parcourez CSS Discuss ou HTML Dog pour des ressources CSS. Un bon aperçu de la puissance de CSS peut être vu sur le site CSS Zen Garden.
[edit] Validez ! Toujours. Validation XHTML 1.0 Strict.

Vous ne pouvez être sûr en aucune façon de ce qu'un certain navigateur ferait dans certaines situations imprévisibles. Ce qui cause des incohérences. Mais ajouter votre couche à ces incertitudes rend les choses plus difficiles, voire impossibles pour que d'autres vous aident. Ce n'est qu'une fois que vous aurez un code XHTML et CSS valide et que si cela à l'air bon dans des navigateurs respectueux des normes que vous pourrez commencer à debugguer. Trop souvent on entend des designers dire « Mais, si je le rend valide, ça ne rend pas terrible, je ne veux pas tout recommencer à zéro une nouvelle fois ». Dans ce cas, le fait que le designer avait une mise en page correcte était due à un bug ! Débugguer par dessus des bugs n'est simplement pas la bonne option !

Et vraiment : une mise en page propre, valide fonctionnera 90% du temps, aura 9% du temps des corrections faciles à faire et ne requerra des interventions difficiles que 1% du temps. Vraiment !

Si vous souhaitez valider votre site entier vous pouvez utiliser un de ces outils.
[edit] Votre page ne devrait pas s'afficher partout de la même façon

Une autre chose très importante à noter est la nature de HTML et CSS. Ils sont conçus pour s'afficher différemment dans différents endroits. Mon téléphone mobile n'est pas capable d'afficher votre mise en page fantaisiste de 6 colonnes à largeur fixe avec javascript. Et il ne devrait pas l'être. Safari et Konqueror ont décidé de ne pas autoriser certains styles dans les formulaires (pour des raisons de sécurité et d'homogénéité du bureau). Les écrans larges vont redimensionner votre police ce qui peut casser votre mise en page fixe. Des personnes utilisant de vieux écrans auront des tailles de polices définies plus grandes. Des personnes avec de mauvaises connexions désactivent souvent l'affichage des images, ou même les CSS.

Donc gardez à l'esprit que votre style n'est ni plus ni moins qu'un conseil à l'intention les navigateurs pour afficher votre page d'une certaine manière. Ce n'est en aucun cas une loi.
[edit] Les outils pour gérer les incohérences dans votre thème

  1. Nous vous recommandons de commencer par utiliser un navigateur respectueux des normes tel que Firefox pour vos thèmes. Firefox vous permet de mettre en surbrillance des portions de votre page et en cliquant sur le bouton droit de voir le code source pour comprendre quelles sont les classes CSS de votre thème. Comprendre comment sont appliquées les classes CSS au code xhtml sous-jacent de votre thème est la clé pour comprendre votre thème.
  2. Utilisez des conventions de nommage standards. Nous vous recommendons d'adopter ces conventions de nommage pour vos classes CSS.
  3. Sélectionnez un DOCTYPE valide pour votre thème et incluez sa déclaration (DTD).
  4. Afin de vous aider à analyser votre code HTML et CSS, nous vous recommendons d'installer l'extension Firebug pour Firefox. C'est un outil inestimable qui vous permet de regarder votre code HTML et CSS et vous permet de le changer en temps réel pour visualiser les effets de vos modifications. Une autre extension Firefox très utile est la barre d'outil du développeur Web (Web developer toolbar) qui comprend des tonnes d'utilitaires pratiques.
  5. L'extension Vue formatée du source (View formatted source) pour Firefox affiche le source formaté et coloré et des informations CSS optionnelles pour chaque élément.
  6. Avant de commencer à modifier votre code CSS pour corriger vos bugs, il est important de vous assurer que vous travaillez sur du code HTML ou XHTML valide. Il y a un validateur web inclus dans la barre d'outil du développeur Web. Opera a un outil interne de validation, pressez simplement Ctrl+Alt+V.
  7. Un outil plus avancé pour analyser des pages HTML, pour regarder le code, repérer les erreurs est l'outil Watchfire WebXACT.
  8. Si vous trouvez un problème avec du code XHTML invalide dans un module, remontez le problème en incluant des captures d'écran montrant comment cela cause problème dans le thème.
  9. Pour voir à quoi votre site ressemble aux yeux des moteurs de recherches vous pouvez utiliser Lynx viewer.
    1. Les problèmes de positionnement dans votre site avec Internet Explorer peuvent être résolus en utilisant ces références : Position Everything Internet Explorer Primer
    2. Une collection d'exemples de problemes peut être trouvée sur Quirks mode.

[edit] Compatibilité multi navigateurs (FireFox, Internet Explorer, Opera, Safari)

Il est difficile de vérifier ses thèmes dans tous les navigateurs. Il y a un certain nombre d'outils qui sont disponibles pour vous aider à voir votre thème dans de nombreux navigateurs.

  1. Browser shots est librement disponible mais peut prendre un certain temps pour prendre vos captures d'écrans.
  2. BrowserCam est un service payant avec une période d'essai de 24 heures.

Sur Windows vous pouvez utiliser Internet Explorer et télécharger Firefox ou Opéra. Sur Linux vous pouvez utiliser Konqueror, un navigateur basé sur KHTML que Safari utilise sur MacOS, Opera, Firefox pour Linux, et Internet Explorer peut être lancé sous WINE. Sur Mac OSX vous pouvez utiliser Safari et télécharger Firefox ou Opera.
[edit] Problèmes graphiques et de couleurs

  1. Si vous essayez de sélectionner des couleurs vous pouvez utiliser Color schemes.
  2. Si votre thème provoque des erreurs dans vos logs avec « favico not found » vous pouvez créer un favicon avec ces deux outils favicon from pics et favicon generator.
  3. Pour vérifier la visibilité de votre site pour les utilisateurs daltoniens voyez Vischeck

[edit] Choisir un thème de base

Si vous cherchez un thème pour démarrer, Zen ou Foundation sont de bons thèmes de base pour une personnalisation par CSS. Il y a aussi BlueMarine qui utilise des tableaux pour la mise en page.
[edit] CSS spécifiques aux modules

Certains modules pour Drupal sont fournis avec un fichier CSS par défaut. Vous devriez utiliser un outil tel que la barre d'outil du développeur web pour voir si la feuille de style d'un module style vos éléments et cause problème. Quand vous installez un nouveau module vous pouvez également regarder dans le répertoire d'un module s'il inclut un fichier CSS.
[edit] Débogguer réellement les problèmes dans votre style

Il n'y a pas de solution facile pour débogguer votre thème. Si vous avez du mal vous devriez essayer d'utiliser un thème de base le plus simple possible ou sélectionner un thème connu pour fonctionner et qui soit le plus proche possible de votre but. Apprendre les classes CSS de votre thème est critique pour comprendre comment les changements dans votre fichier CSS vont être appliqués. Essayez de trouver d'autres « themers » en discutant sur IRC, fournissant de la documentation et des tutorials sur ce qu'ils ont fait. Rendez vos thèmes disponibles afin que d'autres puissent l'évaluer et vous faire par de leurs réactions sur ce que vous avez fait. Se faire des amis avec des programmeurs PHP qui peuvent vous aider à comprendre ce que fait le moteur de thème PHP sous-jacent est également très important. Considérez un échange de compétences pour obtenir du soutien.

Traduction de la page écrite par Kieran Lal, et Trae McCombs de CivicSpace Labs avec Theodore Serbinski. Si vous souhaitez contribuer ou aider à rendre le theming dans Drupal plus facile, rejoignez la themes mailing list ou contactez Kieran.
[edit] Convention de codage pour les thèmes

Les auteurs de thèmes devraient prendre soin à écrire du code propre, bien structuré à l'instar d'un codeur pour n'importe quel autre projet. En faisant cela, le code devient plus facile à lire, comprendre et maintenir. Alors que différentes organisations ont différentes conventions, il est habituellement mieux de suivre les standards de Drupal puisque cela aide à la collaboration ou pou demander de l'aide.

* Utilisez 2 espaces pour l'indentation; en lieu et place de l'indentation par tabulation
* Faites correspondre l'indentation des balises ouvrantes et fermantes de longs blocs HTML
* Faites la distinction entre indentation PHP et HTML.

Ne pas faire :

... 

<?php
 if ($header): 
?>
<?php
 print $header; 
?>

<?php
 endif; 
?>

...

<

pre>

mais plutôt :

<

pre>
... 

<?php
 if ($header): 
?>
<?php
 print $header; 
?>

<?php
 endif; 
?>

...

Cela facilite la recherche des balises ouvrantes et fermantes correspondantes définies avec différentes indentations.

* Préférez du code PHP dans du HTML plutôt que du HTML dans du PHP à l'intérieur de vos modèles. Par exemple,

pas cela :

<?php
if (!$page) {
  print "<h2><a href="$node_url" title="$title">$title</a></h2>";
}
if ($submitted) {
  print "<span class="submitted">$submitted</span>";
}
?>

mais ceci :

<?php
 if (!$page): 
?>

<?php
 print $title 
?>

" rel="nofollow">

<?php
 print $title 
?>

<?php
 endif; 
?>

<?php
 if ($submitted): 
?>
<?php
 print $submitted 
?>
<?php
 endif; 
?>

Après tout, PHP est un langage de script incorporé au langage HTML - et non l'inverse.
[edit] Soumettre votre thème sur drupal.org

Pour ajouter votre thème à Drupal.org, il doit être en accord avec la GPL. N'incluez pas d'images ou autres travaux sous copyright que vous ne voulez pas voir réutilisés ou même modifiés.

Les thèmes sont gérés de la même manière que le code, dans le dépôt CVS. Vous devrez faire la demande d'un compte CVS. Une fois approuvée, vous serez en mesure de mettre votre thème dans le dépôt CVS de Drupal. Créez un projet et le téléchargement pour celui-ci sera créé automatiquement.

Si vous ajoutez votre thème, des utilisateurs posteront surement des suggestions, remonteront des bugs, et généralement désireront que vous mainteniez le thème à jour pour les versions actuelles de Drupal.

Lisez également les recommandations pour les captures d'écrans.

Vous pouvez trouver plus d'information sur les procédures pour contribuer au code et thèmes et maintenir un projet sur Drupal.org dans le guide du développeur.

Version de Drupal : 
6.x