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

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

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

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

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

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

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

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Un site Drupal, étape par étape, partie 4 sur 6

Référence en espagnol sur Cuenco Digital : http://cuencodigital.com/articulos/un_sitio_en_drupal_paso_paso_parte_4.html
23 Février 2009


L'un des sujets les plus intéressants lorsqu'on apprend Drupal est comment modifier l'aspect du site vu par l'utilisateur final.

Le Theme est un ensemble de fichiers qui définissent l'aspect final du site. Pour de nombreux concepteurs web habitués à maquetter en HTML et CSS, apprendre à faire un thème Drupal ne sera pas difficile.

Il faut néanmoins connaître quelques détails et façons de travailler pour savoir par où commencer lorsqu'on développe un Thème.

De A à Z ou...

Drupal.org fournit plusieurs thèmes prêts à l'emploi. Comme pour un module, on peut les télécharger et les installer et le changement d'aspect du site se verra automatiquement pour tout le site.

Pour des développements professionnels, on ne peut pas toujours choisir un thème préfabriqué. Il y a plutôt une charte graphique prédéfinie à respecter, celle que le client souhaite.

On a alors deux options. La première consiste à adapter un thème existant en modifiant les CSS et quelques autres fichiers pour obtenir le design souhaité. La deuxième option consiste à réaliser un thème de A à Z.

Aussi étonnant que cela puisse paraître, il est plus simple et plus courant de modifier un thème existant plutôt que d'en réaliser un de A à Z. Pour une raison simple, réaliser un thème depuis rien peut s'avérer une tâche vraiment difficile.

A cause de cela, un groupe de développeurs a réalisé une série de Thèmes spécialement conçus pour être facilement modifiés et adaptés aux besoins de tout un chacun. On trouve parmi eux Zen, Clean et Artists C01. Cette liste s'est récemment enrichie avec Stark, Basic, Foundation, et avec tous ces thèmes qui, à première vue, ont l'air très «pâles».

Un sous-thème de Zen

p4-1.png

Pour l'aspect visuel de Cuenco Digital, on a créé un thème dérivé de Zen. Pour ceux qui ne le connaissent pas, Zen est un thème Drupal qui se caractérise par une bonne documentation et un grand nombre de sélecteurs CSS prêts à l'emploi. Il permet en outre de créer des sous-thèmes à partir du thème principal. On peut ainsi réutiliser des designs existants ou définir des feuilles de styles communes à tous les thèmes.

Pour créer un thème dérivé de Zen, on doit télécharger l'archive depuis la page principale du projet http://drupal.org/project/zen et la décompresser dans le dossier /sites/all/themes situé dans le dossier d'installation de Drupal.

Après cela, on doit créer un nouveau dossier portant le nom du sous-thème, dans notre cas le nom choisi fut cuenco.

En utilisant des commandes Linux :

#créer le dossier themes dans sites/all s'il n'existe pas déjà
cd /var/www/apache2-default/drupal6/sites/all
mkdir themes

#Télécharger zen dans ce dossier (la version 1.1 n'est peut-être plus la version actuelle)
cd themes
wget http://ftp.drupal.org/files/projects/zen-6.x-1.0.tar.gz

#décompresser zen
tar xzvf zen-6.x-1.0.tar.gz

#créer un nouveau dossier dans zen avec le nom du sous-thème

cd zen
mkdir cuenco

#copier les fichiers du dossier STARTERKIT dans le dossier venant d'être créé
cp -R STARTERKIT/* cuenco

STARTERKIT est un point de départ pour que le concepteur de thème puisse créer son propre thème dérivé. Il manque encore deux étapes pour que Zen reconnaisse le nouveau thème. La documentation indique qu'il faut remplacer toutes les chaînes STARTERKIT par le nom de notre thème, en l'occurrence cuenco.

Ainsi, chaque fois que l'on trouvera

<?php
function STARTERKIT_preprocess_page(&$vars) {
  
$vars['sample_variable'] = t('Lorem ipsum.');
}
?>

on mettra

<?php
function cuenco_preprocess_page(&$vars) {
  
$vars['sample_variable'] = t('Lorem ipsum.');
}
?>

Les remplacements doivent êtres faits dans les fichiers .php trouvés dans le dossier du nouveau thème.

La dernière étape consiste à choisir le type de maquette pour la mise en page du site. Zen en propose deux. Une mise en page Liquide et une autre Fixe. Si on choisit une mise en page liquide, on devra copier le fichier layout-liquid.css dans le dossier cuenco. Si on choisit une mise en page statique, on copiera layout-fixed.css.

Quel que soit l'option choisie, vous devrez renommer le fichier en layout.css.

#copier le fichier
cd /var/www/apache2-default/drupal6/sites/all/themes/zen
cp layout-fixed.css cuenco

#et le renommer
cd cuenco
mv layout-fixed.css layout.css

Une touche de CSS

p4-2.png

Expliquer pas à pas la création de chaque élément visuel du site serait une perte de temps.

En fait, la démarche est propre à chaque concepteur de thème. Je ne me considère pas comme un expert en CSS et il est probable que certains aspects puissent être résolus autrement. Ce qui suit est le fichier cuenco.css, j'y ai placé tous les styles propres au thème. En réalité, ce n'est pas une façon de faire très professionnelle. Certains subdivisent les fichiers CSS selon le thème ou les sections qu'ils modifient. Mais dans notre cas, l'intérêt se trouve dans le fait que je peux montrer dans un seul endroit les différences par rapport au thème Zen de départ.

Le fichier CSS personnalisé est visible ici.

Comme indiqué précédemment, Zen fournit deux types de mise en page. Une liquide, dans laquelle les différentes sections s'étirent ou se rétrécissent, en fonction des changements de dimension de la fenêtre du navigateur. Et une autre fixe dans laquelle toutes les sections gardent leurs dimensions.

Pour que le Thème reconnaisse le fichier CSS, il est nécessaire de l'ajouter au fichier cuenco.info. C'est une nouveauté des thèmes Drupal 6.

stylesheets[all][]   = layout.css
;stylesheets[all][]   = html-elements.css
; stylesheets[all][] = tabs.css
; stylesheets[all][] = messages.css
; stylesheets[all][] = block-editing.css
; stylesheets[all][] = wireframes.css
stylesheets[all][]   = cuenco.css
stylesheets[all][]   = garland.css
stylesheets[print][] = print.css

Toutes les feuilles de styles mises en commentaires par un point-virgule seront chargées à partir du thème Zen, c'est un des avantages procuré par Zen. Certains auront noté la présence du fichier garland.css. Ce n'est pas une erreur, personnellement j'apprécie le traitement que Garland applique aux tableaux et les fieldsets déroulants. C'est pour cette raison que j'ai copié cette partie du css de Garland et que je l'ai ajoutée à mon propre thème.

L'une des choses que j'ai réussi à obtenir avec ce thème, à laquelle je n'étais pas arrivé auparavant, est de n'avoir pas eu à modifier le thème Zen pour placer les menus primaires dans le header. Il y a une méthode via les CSS pour placer la barre de navigation dans le div header. Cela permet de faire des thèmes avec des menus organisés comme dans drupal.org et comme dans beaucoup d'autres sites qui utilisent ces dispositions.

p4-3.png

Les fichiers gabarits .tpl dans Drupal

Connaître les fichiers gabarits et leur fonctionnement peut rendre le thème réellement souple.

Sans trop entrer dans les détails, Drupal utilise des fichiers ayant l'extension .tpl pour générer le code HTML final du site. On peut voir ces fichiers comme une matrice qui fera le code HTML en fonction des données que Drupal enverra au fichier gabarit.

Le fichier gabarit page.tpl.php est chargé du rendu général du site. Il agit un peu comme s'il était le squelette général. C'est là que se trouveront les menus, les blocs, les contenus, etc.

On peut procéder de deux façons pour modifier le fichier gabarit de Zen. On peut modifier directement le fichier gabarit dans le dossier Zen ou on peut copier ce fichier gabarit dans le dossier du thème dérivé pour l'y modifier. Ainsi, le thème dérivé utilisera le fichier gabarit modifié à la place de celui fournit par défaut par Zen et on évite aussi de modifier la fichier gabarit originel de Zen, modifications qui se répercuteraient alors à tous les sous-thèmes dérivés de Zen.

Mon conseil : modifiez le moins possible les fichiers gabarits. Cela évitera des complications dans les mises à jour futures des thèmes de Drupal.

La raison principale pour laquelle on aurait à modifier un fichier gabarit est l'ajout de nouvelles régions. Il existe d'autres méthodes, qui seront abordées plus loin dans cet article, pour modifier des composants du fichier gabarit.

De nouvelles régions

L'une des nouveautés apportées par les thèmes de Drupal 6 est que l'on peut intégrer des régions directement à partir du fichier .info. Ainsi, ce qui en Drupal 5 aurait été fait de cette façon :

Dans le fichier template.php écrire :

<?php
function cuenco_regions() {
  return array(
    
'left' => t('left sidebar'),
    
'right' => t('right sidebar'),
    
'navbar' => t('navigation bar'),
    
'content_top' => t('content top'),
    
'content_bottom' => t('content bottom'),
    
'header' => t('header'),
    
'pre_footer' => t('pre footer'), //nueva región
    
'footer' => t('footer'),
    
'closure_region' => t('closure'),
  );
}
?>

Se fera comme ça dans Drupal 6 :

Dans le fichier cuenco.info:

regions[left]           = left sidebar
regions[right]          = right sidebar
regions[navbar]         = navigation bar
regions[content_top]    = content top
regions[content_bottom] = content bottom
regions[header]         = header
regions[pre_footer]     = pre_footer
regions[footer]         = footer
regions[closure_region] = closure

Cependant, dans Drupal 5 comme dans Drupal 6, il faudra apporter une modification au gabarit page.tpl.php:

    <div id = "pre_footer">
      <div id ="pre_footer-inner">
        <?php print $pre_footer;?>
      </div>
    </div>

Ce code indique au thème où doit s'afficher le contenu des blocs placés dans la région. En d'autres termes, $pre_footer sera remplacé par tous les blocs qui auront été placés dans la région Pre footer.

Widgets pour les commentaires

Quand un article possède des commentaires, on peut voir une image dans la partie supérieure droite avec le nombre de commentaires du node. Pour cela, il faut modifier un autre fichier gabarit : le fichier gabarit des nodes.

p4-4.png

Ainsi, tout comme le fichier gabarit page.tpl.php est le gabarit global du site, il y a un fichier node.tpl.php qui est le fichier gabarit global pour l'affichage du contenu d'une node.

Si on modifie ce fichier gabarit, on modifiera la façon dont s'affichent chacun des nodes du site. Si on veut ne modifier que l'apparence d'un type de contenu donné, on peut utiliser, par exemple, un fichier gabarit node-billets.tpl.php qui ne changera que le style des types de contenus billets.

La modification du fichier gabarit fut simple. On n'a fait qu'ajouter le code suivant au div ayant la classe content :

<?php
print $comment_widget;
?>

Seulement, $comment_widget n'existe pas. C'est une création propre à ce site. Pour initialiser la valeur de $comment_widget, on doit modifier le fichier template.php comme ceci :

<?php
function cuenco_preprocess_node(&$vars) {
  if(
$vars['comment_count']) {
    
$vars['comment_widget'] = '<a href = "#comments"><div class = "comment_widget">'format_plural($vars['comment_count'], '1 Comment''@count Comments') .'</div></a>';
  }
}
?>

Cette fonction se charge de créer les vaaibles "personnalisées" pour le fichier gabarit du node. Par chance, Zen fournit la structure de la fonction pour que nous n'ayons qu'à lui ajouter le code.

Plus de variables

Le widget pour les commentaires n'est qu'un exemple de la puissance des variables. Pour ce thème j'ai créé quelques variables qui surchargent le contenu de variables existantes.

Par exemple, dans ce thème, le logo comme le nom du site sont des images. Dans le gabarit page.tpl.php, le code est défini comme suit :

 <?php if ($logo): ?>
    <div id="logo"><a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
      <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo-image" /></a>
    </div>
  <?php endif; ?>

  <?php if ($site_name): ?>
    <?php if ($title): ?>
      <div id="site-name"><strong>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
        <?php print $site_name; ?>
        </a>
      </strong></div>
    <?php else: ?>
      <h1 id="site-name">
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home">
        <?php print $site_name; ?>
        </a>
      </h1>
    <?php endif; ?>
  <?php endif; ?>

Bon, maintenant, comment faire pour que $site_name soit une image ? Une fois de plus, les variables permettent de modifier cette valeur.

Avec cette simple fonction, la variable site_name (dont la valeur est le nom du site) est remplacé par une image :

<?php
function cuenco_preprocess(&$vars$hook) {
  
$site_name $vars['site_name'];
  
$vars['site_name'] = theme_image(path_to_theme() . '/images/logo_text.png'$site_namet('Home'));
}
?>

Dernières remarques

A première vue, on pourrait penser que la réalisation d'un thème Drupal est quelque chose de compliqué. Bon, c'est vrai qu'au début ce n'est pas très facile. Mais on peut obtenir des designs très chouettes avec un peu de pratique, pas comme celui-ci :), qui se conformeront aux détails et à la configuration du site. Et dont les modifications futures ne se feront que via les CSS.

Beaucoup de personnes, parmi lesquelles je me situe, conseillent de ne pas utiliser qu'un seul fichier CSS pour la totalité du thème. Cela simplifie la maintenance future. Dans mon cas, j'ai choisi de tout centraliser dans un seul fichier pour faciliter les explications.

Ce qui reste n'est rien d'autre que du CSS. Expliquer chacun des détails n'a pas de sens, et n'importe quel concepteur web qui connaît le fonctionnement des fichiers gabarits de Drupal est en mesure de créer son propre thème.

Pour ceux qui souhaitent approfondir le sujet, il existe quelques livres (en anglais) comme Drupal 5 Themes ou sa version pour Drupal 6.

La documentation de Zen ou les vidéos de la documentation du thème Genesis sont également appréciables. Bien qu'elles soient en anglais.

Enfin, je conseille cet article en espagnol : qui explique très bien un cas réel. Notamment en ce qui concerne la conception initiale et la méthodologie à appliquer.

Mariano D'Agostino - Cuenco Digital