Habillage du site et thèmes

9 Drupal
Travailler sur l’interface d’un site pour lui donner un caractère à la fois distinctif et attractif
requiert non seulement un savoir-faire technique mais aussi, comme pour toute activité de
conception graphique, une certaine créativité. Votre site est pour le moment fonctionnel, et
son apparence est loin d’être épouvantable : elle est certes quelconque, mais elle remplit son
rôle. Avec un minimum d’efforts, il n’est pas inconcevable de créer quelque chose d’entiè-
rement nouveau, et Drupal est par ailleurs livré avec un grand nombre de fonctionnalités
destinées à nous faciliter la vie.
Si, comme moi, vous appréciez particulièrement de travailler sur les aspects plus créatifs de
la mise en place d’un site web, ce chapitre devrait vous combler ! Il est temps maintenant de
concevoir, planifier et mettre en œuvre l’environnement visuel dans lequel seront immergés
les utilisateurs.
Ce chapitre abordera donc les sujets suivants :
• la conception d’une interface web ;
• les feuilles de style CSS ;
• les thèmes.
Lorsque vous concevez l’interface de votre site, prenez le temps d’étudier les sites web exis-
tants. Parmi toutes les difficultés auxquelles vous serez confronté durant votre processus de
conception, bon nombre ont déjà pu être résolues avec succès par d’autres (qui ne sont pas
nécessairement des utilisateurs de Drupal). N’ayez pas peur de considérer la conception de
votre site comme un processus en évolution permanente : s’il n’est jamais bon de changer
totalement l’apparence de votre site à la moindre occasion, vous pouvez néanmoins la main-
tenir au goût du jour par des adaptations et remises à niveau régulières.

Concevoir une interface web

Le principe suivant lequel la forme s’adapte à la fonctionnalité est largement appliqué dans
de nombreuses sphères de la connaissance humaine. Ce concept signifie, à la base, que la
manière de construire ou de fabriquer un objet doit refléter le but pour lequel celui-ci a été
conçu. Il s’agit de fait d’une notion extrêmement sensée, et l’appliquer à la conception gra-
phique de votre site vous fournira une mesure de sa qualité.
Ceci ne signifie pas pour autant que votre site doive ressembler à n’importe quel autre site
jouant un rôle comparable. De fait, vous devez chercher à rendre votre site aussi original
que possible, sans toutefois dépasser les limites de ce que votre utilisateur cible considère
comme le bon goût ou le bon sens.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 291 08/03/11 11:57

 292 Drupal 7

Comment y parvenir ? L’astuce consiste à mettre en regard les caractéristiques de votre site
web et votre public cible. Si vous comptez proposer des contenus intéressant potentielle-
ment les hommes aussi bien que les femmes, quels que soient leur âge, leur nationalité ou
leur religion, vous devez naturellement opter pour une solution utilisable par n’importe qui.
Ceci peut toutefois conduire à un site relativement insipide, si vous cherchez à éviter de mar-
ginaliser un groupe d’utilisateurs en favorisant explicitement un autre groupe. Néanmoins,
vous avez de la chance dans une certaine mesure, car votre public cible sera légèrement plus
simple à définir que cela : vous pourrez généralement envisager quelques concessions pour
un type d’utilisateur particulier.

Conception visuelle
Cela ne sert à rien de tourner autour du pot sur ce sujet. Vous devez rendre le site visuelle-
ment aussi simple que possible, sans pour autant cacher d’informations critiques ou utiles :
ne craignez pas de laisser de longues listes d’éléments sur une page si toutes ces informa-
tions sont utiles et fréquemment utilisées. Cacher aux utilisateurs des détails importants
(même s’ils sont extrêmement simples à trouver sur d’autres pages) les frustrera assurément,
ce qui peut avoir des conséquences néfastes sur votre popularité.
L’apparence que vous donnerez à votre site peut également avoir un impact notable sur la
manière dont les utilisateurs perçoivent son fonctionnement. Si, par exemple, vous utilisez
plusieurs polices pour différents types de liens, certains utilisateurs n’envisageront proba-
blement pas de cliquer sur l’un ou l’autre des liens du fait des différentes variantes de styles.
Prenez le temps d’y réfléchir : vous imaginez-vous réellement passer la souris sur chacun
des éléments du contenu pour déterminer s’il s’agit ou non d’un lien ?
Nous pouvons donc résumer ce point selon l’encadré suivant.

Veillez à rendre votre site visuellement cohérent et à ce qu’il n’y ait pas de différence dans les styles
utilisés d’une page à l’autre.

Dans un autre registre, si vous êtes en train de lire une page de texte et si les liens apparais-
sent tous dans la même police que le texte, la fonctionnalité de lien hypertexte est totalement
oblitérée.
Il existe un nombre assez important de prétendues règles de conception graphique que vous
pourriez appliquer à votre site. Parmi les plus connues, citons en particulier :
• la règle des tiers, selon laquelle une page structurée en trois parties (lignes ou colonnes)
est plus agréable à l’œil que toute autre organisation ;
• la règle du centre visuel, selon laquelle le cœur visuel d’une page (c’est-à-dire le point
d’attraction maximal du regard) se situe juste au-dessus et à droite du centre réel d’une
page.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 292 08/03/11 11:57

 Habillage du site et thèmes Drupal 293

Vous pouvez consulter le site web A List Apart1 (http://www.alistapart.com/), qui présente
de nombreux articles intéressants sur la conception graphique pour le Web ; vous pouvez
également rechercher des sites dignes d’intérêt par le biais de Google.

Rédaction
Voici une étape fort intéressante de la conception de votre site web : l’art d’écrire pour le
Web est bien plus subtil qu’une simple description de ce que vous avez en tête. En effet, vous
rédigez dans un objectif non seulement de consommation humaine mais aussi de traitement
par des machines. Dans la mesure où un programme ne peut suivre qu’un nombre limité de
règles lorsqu’il analyse une page, c’est aux auteurs des textes d’accepter des concessions au
niveau du langage utilisé (si tant est qu’ils souhaitent faire figurer leur site en bonne place
dans les moteurs de recherche !).
Avant de vous préoccuper de l’optimisation de vos textes pour les moteurs de recherche,
voici quelques points fondamentaux à prendre en considération. Pour commencer, veillez à
utiliser un langage clair et concis : c’est un point primordial ! N’hésitez pas à sacrifier vos
effets de style si le texte peut gagner en clarté et mettre davantage en lumière vos idées. L’at-
tention que peuvent vous accorder vos lecteurs est en général de courte durée lorsqu’il s’agit
de documents web ; vous devez donc rester aussi synthétique que possible.
Outre la qualité de votre expression, l’apparence visuelle et la structure de vos textes ont
également leur importance. Utilisez des polices grasses ou plus grandes pour mettre en
valeur les titres et les points essentiels. Veillez à aérer votre texte pour rendre la page plus
agréable à l’œil et, par conséquent, plus facile à lire et à comprendre.

Images
La gestion des images pour le Web, c’est tout un art ! Je ne veux pas dire par là qu’il faille
avoir des qualités artistiques pour réussir vos images ; j’entends plutôt souligner l’impor-
tance de la gestion des fichiers d’images eux-mêmes. Pour tout aspirant webmaster, créer un
environnement visuel à la fois agréable et cohérent demande un travail important. En effet,
le Web est un environnement qui repose essentiellement sur l’effet produit par les images
sur les utilisateurs : la vue et l’ouïe sont, pour le moment, les deux seuls sens touchés par
Internet.
Pour pouvoir manipuler en toute liberté les images nécessaires pour votre site, vous aurez
besoin d’un outil raisonnablement puissant.

1. NdT : le site A List Apart publie uniquement des articles anglophones, mais vous pouvez trouver des traductions en
français de la plupart de ces articles sur http://www.pompage.net.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 293 08/03/11 11:57

 294 Drupal 7

Dans le cas présent, nous parlons des images faisant partie de l’interface du site. En ce qui concerne
les images qui font partie des contenus du site, Drupal 7 offre une prise en charge sophistiquée et
exhaustive, comme nous l’avons indiqué au Chapitre 7, "Multimédia".

Gimp (http://www.gimp.org) est un excellent exemple d’environnement de manipulation

d’images, mais tout logiciel qui vous permettra d’enregistrer des fichiers dans différents
formats ou de redimensionner vos images devrait être largement suffisant.
Lorsque l’on travaille avec des images, il faut se pencher attentivement sur un certain nombre
de problématiques pour produire un environnement graphique intégré et agréable :
• L’un des principaux problèmes liés aux images est le volume qu’elles représentent (tant
au niveau du stockage que pour la bande passante du site), considérablement plus impor-
tant que du code ou du texte. Pour cette raison, vous aurez besoin d’une méthodologie
efficace pour gérer les images en grand format. Par exemple, vous pouvez exploiter les
CSS pour répéter une petite image d’arrière-plan suivant les axes X ou Y, plutôt qu’uti-
liser une image de grande taille.
• Décider du format d’images que vous souhaitez utiliser parmi la multitude de formats
graphiques disponibles peut également se révéler difficile : certains formats sont plus
volumineux, d’autres sont tout simplement impossibles à rendre correctement dans un
navigateur. Les trois formats graphiques les plus répandus sont le GIF, le PNG et le JPG.
• L’utilisation que vous prévoyez pour ces images peut également être un facteur impor-
tant dans le choix de la taille ou du format du fichier. Ainsi, il est conseillé d’enregistrer
les icônes et les logos au format GIF ou PNG, tandis que le format JPG doit être réservé
aux photographies et aux images complexes ou de grande taille, pour lesquelles il est
plus efficace.
Présentons rapidement ces formats graphiques.
Le format GIF (Graphics Interchange Format) est connu pour ses taux de compression éle-
vés et sa capacité à stocker et à afficher plusieurs images dans un même fichier pour produire
les GIF animés. Son inconvénient principal est qu’il ne peut afficher plus de 256 couleurs.
Toutefois, vous pouvez faire appel au format GIF pour :
• les images à fond transparent ;
• les animations graphiques ;
• les images plus petites et moins complexes qui ne requièrent pas plus de 256 couleurs.
Le format PNG (Portable Network Graphics) a été conçu pour remplacer les fichiers GIF.
De façon générale, il permet d’atteindre de meilleurs taux de compression, offre une plus
grande profondeur de couleurs et présente également d’autres avantages. Contrairement aux
fichiers GIF, les fichiers PNG ne gèrent pas les animations. Vous pouvez opter pour le format
PNG pour tout fichier susceptible d’être au format GIF, à l’exception des animations.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 294 08/03/11 11:57

 Habillage du site et thèmes Drupal 295

Internet Explorer ne parvient pas toujours à rendre correctement la transparence dans les images
PNG ; vous devez donc être conscient que cela peut affecter l’opinion que certains lecteurs se feront
de votre site. Des ombres non prévues autour des images de votre site peuvent le faire paraître de
piètre qualité.
Ce problème peut, la plupart du temps, être résolu en supprimant les informations gAMA du fichier
PNG, par exemple à l’aide d’un outil comme TweakPNG (http://entropymine.com/jason/
tweakpng/).

Incidemment, il existe aussi un format MNG permettant de stocker des animations : si vous
recherchez une solution alternative aux GIF animés, ce format mérite un détour.
Le format JPEG (Joint Photographic Experts Group) est conseillé pour la présentation des
images de qualité photographique. Il permet de compresser des images de grande taille tout
en conservant la qualité générale de l’image. Les fichiers JPEG peuvent utiliser un nombre
virtuellement illimité de couleurs. Le format JPEG est conseillé pour :
• les photographies ;
• les images complexes ou de grande taille nécessitant plus de 256 couleurs pour s’affi-
cher correctement.
Notez que le format JPG repose sur une compression avec perte : pour gérer efficacement
les images, il y a donc perte de qualité au cours du processus de compression.
Avant d’étudier plus en détail les thèmes qui permettent de gérer quasiment tous les aspects
relatifs à l’apparence de votre site, nous devons encore parler d’une dernière technologie
vitale : les CSS. Si vous êtes déjà familiarisé avec les CSS, n’hésitez pas à sauter cette sec-
tion pour vous rendre directement à la section "Thèmes".

CSS
Les pages d’un site Drupal récupèrent toutes les informations relatives à leur mise en forme
dans les feuilles de style (on parle également de CSS ou Cascading Style Sheets) associées
au thème et hébergées dans les répertoires respectifs des thèmes ou modules. L’utilisation
des feuilles de style offre aux graphistes un contrôle très fin sur l’apparence des pages web
et permet des effets intéressants. Grâce aux feuilles de style des thèmes, vous pouvez contrô-
ler l’apparence de chaque aspect du site (ou presque), et vous aurez seulement besoin de
quelques connaissances sur les polices de caractères, les couleurs et la syntaxe des feuilles
de style.
Cela vous facilitera les choses de préparer une liste des éléments que vous devez modifier
au moyen de la feuille de style. Voici les éléments les plus courants pour lesquels les feuilles
de style peuvent être utilisées :
• fond ;

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 295 08/03/11 11:57

 296 Drupal 7

• texte ;
• polices ;
• couleurs ;
• images ;
• bordures ;
• marges ;
• espacement des bords (padding) ;
• listes.
En plus de pouvoir modifier tous ces aspects du code HTML, vous pourrez également appli-
quer des effets en fonction de certaines conditions, par exemple le passage de la souris sur
une zone spécifique (ce que nous expliquerons un peu plus loin). Vous pouvez aussi spécifier
des attributs directement dans certaines balises HTML et ainsi appliquer un style à une balise
particulière, plutôt que définir des modifications pour l’intégralité du site. Si, par exemple,
vous disposez d’un style de paragraphe dont l’attribut class a été défini comme ici :
<p class="signature"></p>

vous pouvez alors spécifier ce type de paragraphe explicitement dans votre feuille de style,
par exemple pour définir sa couleur :
p.signature {
color: green;
}

L’analyse de cette ligne met en lumière la structure d’un bloc de code standard d’une feuille
de style, qui apparaît constitué :
• d’un sélecteur, dans notre cas p.signature ;
• d’une propriété, ici color ;
• d’un délimiteur, qui est toujours le caractère ":" ;
• d’une valeur, ici green.
Notez que toutes les paires propriété/valeur sont encadrées par des accolades et se termi-
nent par un point-virgule. Pour chaque sélecteur, on peut renseigner plusieurs propriétés,
mais aussi utiliser les mêmes propriétés dans différents sélecteurs. Ainsi, le bloc suivant est
extrait de la feuille de style style.css du thème Garland ; elle sert à définir pour tous les
titres du thème une apparence semblable en leur donnant les mêmes propriétés :
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: normal;
font-family: Helvetica, Arial, sans-serif;
}

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 296 08/03/11 11:57

 Habillage du site et thèmes Drupal 297

Dans cet exemple, nous avons spécifié plusieurs sélecteurs sous la forme d’une liste d’élé-
ments séparés par des virgules, chaque sélecteur se voyant attribuer quatre propriétés (res-
pectivement margin, padding, font-weight et font-family) pour contrôler l’apparence
des titres.
Il est important de réaliser que l’on peut référencer les balises soit au moyen de l’attribut
class, soit avec l’attribut id, soit avec les deux. Ainsi, le code HTML suivant :

<p class="signature" id="unique-signature"></p>

permet de référencer cette balise d’une part comme appartenant à une classe de balises pos-
sédant toutes la même propriété, d’autre part par son attribut unique id. La distinction entre
ces deux notions est importante car la classe offre un pouvoir plus étendu sur l’ensemble des
balises qu’elle comprend, tandis que l’identifiant offre un contrôle fin sur la balise présen-
tant l’identifiant unique.
Cette introduction aux CSS a été très rapide, mais il existe un grand nombre de ressources
disponibles sur ce sujet. Si vous souhaitez approfondir le thème des CSS (et nous le recom-
mandons chaudement), consultez l’un des nombreux tutoriels (disponibles aussi bien en
français qu’en anglais) disponibles sur Internet. Une simple recherche Google sur le mot clé
CSS devrait vous renvoyer vers de nombreuses sources pertinentes.

Thèmes
Les thèmes confèrent à Drupal une exceptionnelle souplesse dès lors qu’il s’agit de travailler
sur l’interface du site. Comme les fonctionnalités du site sont découplées de la présentation,
il est très simple de modifier l’apparence sans s’inquiéter de causer des dommages aux
fonctionnalités. C’est naturellement une caractéristique très intéressante car elle vous donne
toute liberté pour expérimenter, avec l’assurance que, dans le pire des cas, vous pourrez
réinitialiser l’ensemble pour revenir aux paramètres par défaut.
Vous pouvez voir un thème comme un modèle ou template pour votre site, que vous pouvez
modifier pour qu’il corresponde à n’importe quel critère graphique. Bien sûr, les attributs
varient grandement d’un thème à l’autre : il est donc important de commencer par trouver
le thème le plus proche de ce que vous cherchez à accomplir, de manière à réduire la charge
de travail requise pour le faire correspondre exactement au graphisme que vous envisagez.

Il faut bien comprendre que tous les thèmes disponibles en téléchargement ne sont pas de qualité
équivalente. Certains sont mieux conçus que d’autres. Dans ce chapitre, nous utilisons le thème Zen,
qui est l’un des plus propres et flexibles qui soient.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 297 08/03/11 11:57

 298 Drupal 7

Notez que chaque thème possède sa propre implémentation. Certains utilisent des mises
en page figées et à base de tableaux (qu’il vaut mieux éviter : les interfaces de sites web ne
doivent pas reposer sur des tableaux), d’autres utilisent des balises div et des CSS (préférez
ce type de thème, plus souple et plus puissant). Jouez avec plusieurs thèmes afin de vous
familiariser avec différentes méthodes de création de pages web. Comme nous l’avons men-
tionné, nous ne pouvons traiter ici que le thème Zen, mais les leçons que vous pourrez tirer
de cet exemple seront faciles à transposer à d’autres modèles.
Avant de nous lancer dans l’étude d’un exemple effectif, il est essentiel d’avoir un aperçu
général de la construction des thèmes.

Anatomie d’un thème

Les thèmes Drupal sont constitués d’un ensemble de fichiers définissant et contrôlant les
caractéristiques des pages du site (cela va des fonctionnalités à inclure à la page jusqu’aux
données individuelles à présenter sur la page), à l’aide de code PHP, HTML, CSS et d’images.
Les différents fichiers templates Drupal 7 contrôlent diverses régions de la page, comme
illustré à la Figure 9.1.

Figure 9.1
Chaque fichier html.tpl.php
template contrôle
une zone dans la
page.tpl.php
page web.
region.tpl.php

region.tpl.php region.tpl.php

node.tpl.php block.tpl.php

comment-wrapper.tpl.php

comment.tpl.php

region.tpl.php

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 298 08/03/11 11:57

 Habillage du site et thèmes Drupal 299

L’organisation des fichiers d’un thème au sein de Drupal nous fournit des indications sur le
processus général et sur la structure de ce thème. Gardez à l’esprit qu’il existe différentes
manières de créer un thème fonctionnel et que tous les thèmes ne reposent pas forcément sur
des fichiers templates. Pour le thème Garland, qui fait partie des thèmes livrés en standard
avec le cœur Drupal, nous observons l’organisation illustrée à la Figure 9.2.

Figure 9.2
Répertoire du thème
Garland.

La colonne de gauche nous montre les dossiers apparaissant dans le répertoire themes. On y
trouve les thèmes standard fournis avec Drupal, ainsi qu’un répertoire engines qui héberge
un fichier phptemplate.engine intégrant les modèles au système de thèmes de Drupal.
Étudiez les fichiers présents dans le répertoire garland : notez la présence d’un certain
nombre de fichiers PHPTemplate d’extension .tpl.php. Ces fichiers utilisent du code
HTML et PHP pour modifier l’apparence de Drupal. Les versions par défaut de ces fichiers
(utilisées par un thème ne possédant pas ses propres fichiers PHPTemplate) sont visibles
dans le répertoire modules approprié. Ainsi, le fichier comment.tpl.php par défaut se
trouve dans le répertoire modules/comment, tandis que le fichier page.tpl.php par défaut
se trouve dans le répertoire modules/system, avec d’autres fichiers encore.
Chaque fichier template se focalise sur une page ou un élément de page spécifique. Le
fichier template.php, quant à lui, permet de changer le comportement des templates et de
contourner les fonctions non standard d’un thème (c’est-à-dire autres que les blocs, cases,
commentaires, nœuds ou pages).
Le répertoire des thèmes héberge également les feuilles de style, ainsi que les images et,
pour le thème par défaut du moins, les couleurs. Les fichiers .info sont particulièrement
intéressants : ils contiennent des informations sur le thème permettant à Drupal d’identifier
et de configurer un grand nombre de paramètres différents.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 299 08/03/11 11:57

 300 Drupal 7

Le fichier .info d’un thème contient les informations de base relatives à un thème et nécessaires au
bon fonctionnement de Drupal, à savoir : nom, description, fonctionnalités mises en œuvre, régions
du template, fichiers CSS et JavaScript.

Voici le contenu du fichier .info du thème Garland :

; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $
name = Garland
description = A multi-column theme which can be configured to modify colors and
switch between fixed and fluid width layouts.
package = Core
version = VERSION
core = 7.x
stylesheets[all][] = style.css
stylesheets[print][] = print.css
settings[garland_width] = fluid

; Information added by drupal.org packaging script on 2011-01-05

version = "7.0"
project = "drupal"
datestamp = "1294208756"

Notez que ce fichier contient, entre autres :

• name : nom du thème lisible pour une personne ;
• description : description du thème ;
• core : version majeure de Drupal avec laquelle ce thème est compatible ;
• stylesheets : stipule les feuilles de style à utiliser pour ce thème.
Ce ne sont pas les seules informations susceptibles de figurer dans un fichier .info. Comme
nous le verrons un peu plus loin, lorsque vous souhaitez intégrer des scripts à un thème vous
pouvez les ajouter dans le fichier .info.
Pour voir exactement comment les fichiers .info sont utilisés, observez le fichier .info
correspondant au répertoire update_test_subtheme dans tests :
; $Id: update_test_subtheme.info,v 1.2 2010/11/07 00:27:20 dries Exp $
name = Update test subtheme
description = Test theme which uses update_test_basetheme as the base theme.
core = 7.x
base theme = update_test_basetheme
hidden = TRUE

; Information added by drupal.org packaging script on 2011-01-05

version = "7.0"
project = "drupal"
datestamp = "1294208756"

Remarquez que ce fichier contient une directive base theme utilisée pour spécifier le thème
parent (ou thème de base).

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 300 08/03/11 11:57

 Habillage du site et thèmes Drupal 301

Un sous-thème partage le code de son parent, mais en modifie certains éléments pour produire une
nouvelle apparence, de nouvelles fonctionnalités, ou les deux à la fois.

Drupal nous permet de mettre en place un nouveau sous-thème simplement en créant un

nouveau répertoire dans le répertoire themes et en exploitant la directive base theme dans
le fichier .info, comme nous venons de le voir.
En bref, Drupal offre un éventail de fonctions standard permettant d’exhiber les données
sous-jacentes et de les présenter à l’aide des thèmes. Les thèmes peuvent choisir les élé-
ments de contenu qu’ils souhaitent afficher ou non (la méthode la plus populaire reposant
sur l’utilisation des fichiers PHPTemplate conjointement aux feuilles de style et à un fichier
.info). Il est facile de créer et de modifier des thèmes et sous-thèmes, à condition d’avoir
quelques connaissances en CSS et HTML (PHP peut vous aider à réaliser des opérations
plus complexes).
Il doit vous apparaître clairement maintenant que ce système facilite grandement la création
d’un nouveau thème à condition d’avoir quelques connaissances en PHP. Voici le processus
à suivre :
1. Créez un nouveau dossier themes dans le répertoire sites/all de votre installation ;
dans ce dossier, ajoutez le répertoire destiné à héberger votre thème (vous pouvez lui
donner le nom de votre choix, à condition qu’il diffère des noms de thème existants).
2. Copiez les fichiers templates par défaut (ou les fichiers d’un autre thème que vous sou-
haitez modifier) vers le dossier de thème que vous venez de créer, ainsi que tous les
fichiers nécessaires (par exemple les fichiers CSS).
3. Modifiez le fichier .info afin de refléter les attributs et conditions de fonctionnement
du nouveau thème ; en particulier, n’oubliez pas la directive base theme.
4. Modifiez la présentation des pages (c’est ici que vos connaissances en PHP et HTML
seront utiles) et ajoutez votre touche personnelle par le biais de votre feuille de style
(incluse dans le nouveau thème grâce au fichier .info).
Avant de poursuivre, nous devons soulever une petite question pratique. Lorsque vous abor-
derez le développement des thèmes, vous devrez vous rappeler qu’il existe de nombreux
navigateurs web qui ne sont pas tous égaux devant les contenus. Cela signifie qu’une page
dont le rendu est réussi sur un navigateur peut avoir une allure épouvantable sur un autre ou,
pire, ne pas fonctionner correctement.

Pensez bien à toujours tester votre site avec différents navigateurs web !

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 301 08/03/11 11:57

 302 Drupal 7

Le site d’aide Drupal vous donne également sur les navigateurs un conseil intéressant à lire
dans l’astuce suivante.

Il est recommandé d’utiliser le navigateur Firefox et de lui adjoindre des extensions de développement
web qui vous permettent d’inspecter le contenu d’une page HTML ainsi que des feuilles de style qui
lui sont associées.

J’approuve vigoureusement. Vous pouvez télécharger le navigateur Firefox à l’adresse

http://www.mozilla.com/fr/firefox/. Vous devriez par ailleurs en étendre les fonctionnalités
avec Firebug, qui est un outil particulièrement intéressant pour le débogage de site web côté
client ; vous le trouverez à l’adresse https://addons.mozilla.org/fr/firefox/addon/1843/.

Choisir un thème de base

Comme nous l’avons déjà mentionné, Drupal est livré avec un certain nombre de thèmes par
défaut. Par ailleurs, la section Downloads du site Drupal en propose bien d’autres encore.
La Figure 9.3 illustre la page principale de gestion des thèmes, accessible depuis le menu
Apparence de la barre d’outils.

Figure 9.3
Les thèmes par
défaut livrés
avec le cœur
Drupal.

Dès que vous ajoutez un thème à votre site, vous devez passer par cette page pour l’activer,
le désactiver, le configurer ou l’établir comme thème par défaut.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 302 08/03/11 11:57

 Habillage du site et thèmes Drupal 303

Certains thèmes n’implémentent pas nécessairement des fonctionnalités qui sont par ailleurs
importantes pour votre site. Veillez à tester chaque thème de manière approfondie avant d’autoriser
des utilisateurs à les sélectionner.

Si nous activons le thème Stark et que nous l’établissons comme thème par défaut, le site
(présenté jusqu’à présent suivant le thème standard Bartik) prend l’apparence visible à la
Figure 9.4.

Figure 9.4
Le thème Stark
sur le site de
démonstration.

Voilà un changement plutôt important par rapport à l’apparence précédente du site. Remar-
quez que l’agencement global du site a été modifié lui aussi : les colonnes sont moins bien
définies, il n’y a plus d’en-tête visible, etc. Par ailleurs, les polices et couleurs précédentes
sont également passées à la trappe.

Prenez le temps d’étudier chacun des thèmes disponibles par défaut dans Drupal afin d’avoir une idée
précise des résultats très différents que peuvent avoir les divers thèmes.

Toutefois, les thèmes ne s’arrêtent pas là : le site de Drupal nous propose également un
grand nombre de thèmes à explorer. Dirigez-vous donc vers la page correspondante, http://
drupal.org/project/themes/, et filtrez les thèmes suivant votre version de Drupal pour obte-
nir la liste des thèmes adaptés à votre installation.

© 2011 Pearson Education France – Drupal 7 – David Mercer

Livre Drupal 7.indb 303 08/03/11 11:57