Habillage du site et thèmes Drupal



Documents pareils
Formation Webmaster : Création de site Web Initiation + Approfondissement

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7

Les outils de création de sites web

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog :

Drupal Développeur. Theming et développement pour Drupal. Une formation Formateur : Fabien Crépin. Drupal Développeur.

INTRODUCTION AU CMS MODX

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN ING

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

Dans l Unité 3, nous avons parlé de la

Administration du site (Back Office)

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Introduction aux concepts d ez Publish

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

Créer un site WordPress

PHP 5.4 Développez un site web dynamique et interactif

GUIDE Excel (version débutante) Version 2013

Initiation à html et à la création d'un site web

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

Utiliser un CMS: Wordpress

Optimiser pour les appareils mobiles

JOOMLA 1.5 avancé SUPPORT DE COURS + annexe

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Sage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8

WordPress : principes et fonctionnement

Freeway 7. Nouvelles fonctionnalités

Guide de réalisation d une campagne marketing

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

Spip 2. Premiers pas pour créer son site web. Anne-Laure Quatravaux Dominique Quatravaux. Avec la contribution de Sandrine Burriel

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

Cahier n o 6. Mon ordinateur. Fichiers et dossiers Sauvegarde et classement

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

Paiement sécurisé sur Internet. Tableau de bord Commerçant

Création de maquette web

Introduction à HTML5, CSS3 et au responsive web design

Chapitre 3 : outil «Documents»

Introduction à Expression Web 2

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

Comment utiliser FileMaker Pro avec Microsoft Office

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

Rédiger pour le web. Objet : Quelques conseils pour faciliter la rédaction de contenu à diffusion web

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

Notes pour l utilisation d Expression Web

Intégrateur Web HTML5 CSS3

Création d un site Internet

Tutoriel. Votre site web en 30 minutes

1.1 Des concepts et termes techniques à maîtriser La formule magique du référencement Tricher ou non en référencement

creer votre site internet en html/css

Tutoriel : Feuille de style externe

Bureautique Initiation Excel-Powerpoint

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Agence Web innovatrice

Tutoriaux : Faites vos premiers pas avec Microsoft Visio 2010

novatis Agence Web innovatrice

Création WEB avec DreamweaverMX

Un site web collaboratif avec Drupal. Judith Hannoun - Journées INSHS 16 Octobre 2012

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

Comment créer des rapports de test professionnels sous LabVIEW? NIDays 2002

Manuel d'utilisation du site Deptinfo (Mise en route)

HTML, CSS, JS et CGI. Elanore Elessar Dimar

Découvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice


Créer un site Internet dynamique

SITE I NTERNET. Conception d un site Web

Édu-groupe - Version 4.3

Dans cette Unité, nous allons examiner

Votre site Internet avec FrontPage Express en 1 heure chrono

Initiation à linfographie


Cahier des charges pour la création du site sous DRUPAL

Travaux dirigés n 10

Utilisation de l éditeur.

MODE D'EMPLOI DU CONTRIBUTEUR WEB UAPV "CONTRIBUER DANS UNE RUBRIQUE DU SITE WEB"

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

Optimiser les s marketing Les points essentiels

CMS Open Source : état de l'art et méthodologie de choix

ENVOYER DES NEWSLETTER (POM0580) (/PORTAIL/SERVICES-AU-PUBLIC/1262- ENVOYER-DES-NEWSLETTER-POM0580)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

LE CONCEPT DU CMS CHAPITRE 1

<Créer un site Web. avec/> Suzanne Harvey

Licence de Biologie, 1ère année. Aide. [Aide 1] Comment utiliser l'explorateur Windows? Comment créer des dossiers?

Fiches d aide à l utilisation

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

Base de Connaissances SiteAudit. Utiliser les Rapports Planifiés. Sommaire des Fonctionnalités. Les Nouveautés

Normes techniques 2011

WORDPRESS : réaliser un site web

Stage «Créer et animer un site Web en équipe»

Comment formater votre ebook avec Open Office

OFFRE DE SERVICE.

Préparation d un post (article) pour idweblogs

Formation tableur niveau 1 (Excel 2013)

Guide d utilisation 2012

Avant-propos FICHES PRATIQUES EXERCICES DE PRISE EN MAIN CAS PRATIQUES

Ouvrir le compte UQÀM

Groupe Eyrolles, 2006, pour la présente édition, ISBN :

Manuel d utilisation de l outil collaboratif

Transcription:

9 Habillage du site et thèmes 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 existants. 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 maintenir 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 graphique 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.

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 potentiellement 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 marginaliser 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 visuellement 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 informations 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 probablement 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 apparaissent 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.

Habillage du site et thèmes Drupal 293 Vous pouvez consulter le site web A List Apart 1 (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 attention 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 importance 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.

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 important 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 utiliser 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 important 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 élevé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.

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 afficher 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 section 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 ;

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 appliquer 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 terminent 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; }

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 (respectivement 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 possé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ésentant 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 recommandons 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.

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 mentionné, 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 template contrôle une zone dans la page web. html.tpl.php page.tpl.php region.tpl.php region.tpl.php node.tpl.php region.tpl.php block.tpl.php comment-wrapper.tpl.php comment.tpl.php region.tpl.php

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.

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).

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 souhaitez 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 aborderez 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!

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.

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. Remarquez 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 obtenir la liste des thèmes adaptés à votre installation.