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

Créer un sous-thème, vite fait mal fait (Quick and dirty)

Référence en anglais sur drupal.org : 23 Août 2009 - 21h18
http://drupal.org/node/441088


Comment styliser et restructurer votre site avec un minimum d'efforts

Cet article est plus une anti-sèche un peu développée qu'un guide approfondi, il vous servira d'aide-mémoire pour une personnalisation rapide du look-and-feel de votre site Drupal 6.x plutôt que pour le restructurer en profondeur. Cet article n'est pas un cours HTML, CSS ou sur les hooks Drupal - mais un minimum de connaissances est supposé.

Mettons les mains dans le cambouis. Accordez-vous quelques secondes pour créer un sous-thème. Pourquoi un sous-thème plutôt qu'un thème ? Parce qu'un thème oblige à spécifier ce que vous voulez obtenir, alors qu'un sous-thème vous permet de ne spécifier que ce que vous voulez de différent. Les sous-thèmes héritent de toutes les feuilles de style, de tous le javascript et de tous les gabarits (fichiers .tpl.php) du thème sur lequel ils sont basés. Ce qui vous permet de le utiliser rapidement et proprement - et tout cela sans avoir à hacker le code existant du thème, ce qui signifie que lorsqu'une nouvelle version du thème est publiée, le vôtre hérite automatiquement de toutes ses améliorations !

  1. Inventez un nom pour votre sous-thème. À partir de maintenant nous nous y référerons avec <subthemename>. Ensuite, dans /sites/all/themes,créez un dossier qui porte le nom de votre thème (ne créez pas ce dossier dans /themes !)

  2. Dans ce dossier, créez un fichier nommé <subthemename>.info qui contiendra les lignes suivantes :

    name = <le nom de votre thème en clair>
    description = <ce qui vous arrange>
    core = 6.x
    base theme = <nom du dossier de n'importe quel thème ou sous-thème, du core ou contribué, par ex. bluemarine>
    stylesheets[all][] = <subthemename>.css

  3. Toujours dans le dossier de votre sous-thème, créez un fichier vide nommé <subthemename>.css

  4. À l'inverse de tout le reste, le logo du thème de base n'est pas hérité par le sous-thème. Aussi, pour remplir le vide dans le coin haut à gauche de votre site, vous voudrez peut-être copier le fichier logo.png du dossier du thème de base vers le dossier de votre sous-thème; Ou vous pouvez créer votre propre fichier logo.png. Drupal l'utilisera automagiquement.

  5. Et voilà ! Avec le dossier de votre sous-thème et ces trois fichiers, vous avez jeté les base de vos futurs développements de thème.

    Allez dans Administrer » Construction du site » Thèmes pour activer votre theme. Sélectionnez-le dans la liste en cochant le bouton-radio Par défaut puis cliquez sur Enregistrer la configuration.

Voila qui est fait. Vous êtes maintenant prêt à personnaliser et restructurer les éléments des pages tels que menus, onglets, tableaux, blocs. Cela ne vous aura pas pris plus d'une minute - vous le dire ne vous aura pas fait de mal !

En dernier lieu, allez dans Administrer » Configuration du site » Thème de l'administration, sélectionnez Thème par défaut de l'administration (plutôt que Garland) et enregistrez la configuration. N'utiliser qu'un seul thème partout (à partir de maintenant) rendra la plupart des modifications immédiatement visibles.

Remarque : si vous le voulez, vous pouvez créer un screenshot.png (150 x 90 pixels) et le mettre dans le dossier de votre sous-thème. Si vous le faites, il sera affiché dans la page Administrer » Construction du site » Thème, sinon c'est le screenshot.png du thème de base qui sera hérité et affiché dans cette page.

Maintenant, allons droit au but avec quatre exemples simples qui couvrent chacun une technique de sous-theming différente :

Restyliser vs. Restructurer ou : CSS vs. gabarits (templates)

J'utilise le mot restylisation lorsqu'il s'agit de modifier les couleurs, les attributs de texte, etc à l'aide de feuilles de style (fichiers .css). J'utilise le mot restructuration lorsqu'il s'agit de redisposer la mise en page des blocs, des tableaux, des fils d'Ariane, sous-menus, et tous ces sortes de choses. Il ne s'agit pas de redisposer ces éléments vis à vis d'autres éléments de la page - cela relève de la conception de thème plutôt que des sous-thèmes (bien qu'il n'y ait pas de différence vraiment flagrante)

Pour restyliser votre site, vous modifiez le fichier .css du dossier de votre sous-thème.

Exemple 1a : surcharger un style (global)

Pour modifier l'aspect de (la plupart des) tableaux de votre site, ajoutez cette ligne à votre fichier .css :

  tr.odd {
    background-color: pink;
  }

La modification sera aussitôt visible sur des pages comme Administrer » Gestion du contenu » Contenu ou

Si vous voulez baliser des éléments HTML en particulier dans des pages données, vous devrez compter sur le développeur qui a associé les classes CSS et/ou les ID à ces éléments HTML, par exemple <table class="table-nodes">.... Vous pouvez déterminer le CSS responsable de l'aspect d'un élément HTML en analysant le code-source de la page dans votre navigateur, en comprenant l'éventuelle complexité hiérarchique des sélecteurs CSS impliqués. Des outils plus pratiques, comme Firebug (pour Firefox) vous montrent la hiérarchie complète des styles CSS appliqués à un élément HTML en le survolant de la souris (chouette!).

Exemple 1b : surcharger un style (spécifique)

Si le module Search (du core) est activé et qu'un bloc est paramétré pour contenir le formulaire de recherche (via Administrer » Construction du site » Blocs), ajouter les lignes suivantes dans votre fichier .css le fera vraiment ressortir :

  .block-search {
    background-color: lightblue;
    border: 1px solid blue;
  }

Les CSS sont puissantes mais peuvent s'avérer complexes, surtout si vous avez un grand nombre d'éléments HTML imbriqués. Une explication approfondie dépasse le cadre de cet article, mais il y a quelques liens sympas (avec des tutoriels) qui peuvent aider : w3schools.com/css, http://css.maxdesign.com.au/, OpenWeb (français). Voir aussi HTML and CSS techniques and tools. (ici la traduction française sur KolossalDrupal).

Faisons un peu de restructuration... Si votre page est correctement templated, les éléments que vous souhaitez changer sont rendus par des fichiers .tpl.php qui se trouvent, euh... quelque part. Les endroits où regarder sont le sous-dossier /modules du module qui pourrait avoir affaire avec la page affichée et le dossier /themes du thème utilisé.

Il y a aussi un bel outil Drupal : le module Devel. Semblable à Firebug, il conseille des endroits où chercher des templates qui s'appliquent à la zone de l'écran que vous survolez de la souris.

Une fois le gabarit trouvé, comment le surcharger ? C'est très simple : copiez le fichier .tpl.php dans le dossier de votre sous-thème (ne lui changez pas son nom) et modifiez-le à votre guise.

Remarque : pour que la surcharge du gabarit fonctionne, votre thème de base doit être piloté par un moteur de template (vérifiez le fichier .info du thème de base). Ainsi, Chameleon et Marvin ne répondront pas aux surcharges de gabarits, bien que vous puissiez surcharger leurs styles comme indiqué à l'exemple 1a.

Exemple 2 : surcharger un gabarit (.tpl.php)

Supposons que vous voulez alléger la présentation des résultats de recherche en affichant le titre et le résultat mais sans les données concernant le type, l'auteur et la date de modifications des articles trouvés. Chaque élément individuel dans la liste des résultats est mis en forme via un gabarit : modules/search/search-result.tpl.php. Copiez simplement ce gabarit dans le dossier /sites/all/themes de votre thème puis modifiez-le à votre guise. Par exemple, effacez les trois lignes qui précèdent la balise </dd>. Rafraîchissez le cache du thème, en allant par exemple dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Effectuez une recherche et regardez les résultats.

Une fois que le fichier se trouve dans le dossier de votre sous-thème, toutes ses modifications seront immédiatement prises en compte, vous n'avez pas besoin de rafraîchir les cache à nouveau.

Gabarits vs. fonctions theme_hook()

Les gabarits et les fonctions theme_hook() renvoient tous deux aux theme hooks et ont la même fonction : entourer l'HTML de contenu généré dynamiquement. Les Web designers préfèrent les gabarits puisqu'ils sont essentiellement composé d'HTML, avec très peu de code PHP. Du point de vue d'un web designer, un theme_hook() est une fonction PHP qui veut être un gabarit (fichier .tpl.php).

Pourquoi les thèmes (et sous-thèmes) ne se font-ils pas entièrement via des gabarits ?

  1. les fonctions theme_hook() s'exécutent plus rapidement (bien que cela ne se remarque pas côté utilisateur)
  2. certains programmeurs préfèrent écrire une seule fonction plutôt que repartir le code dans un gabarit "alimenté" par une fonction de pré-traitement qui initialise les données ($variable) affichées par le gabarit; cette dernière approche paraissant, à première vue, un poil plus compliquée - nous la montrerons dans l'exemple 4.

Exemple 3 : surcharger un theme_hook() avec une fonction

Pour cela, créez un fichier template.php dans le dossier de votre sous-thème, avec une ligne <?php vide au début. Puis identifiez la fonction theme_hook() en charge du rendu du HTML que vous souhaitez modifier. Disons que vous voulez appuyer davantage l'accentuation rendu par les placeholders du theme. theme_placeholder() se trouve dans le fichier includes/theme.inc. Copiez le code dans votre fichier template.php, modifiez le nom de la fonction en subthemename_placeholder() et modifiez le corps en ce que vous souhaitez, par exemple :

  function subthemename_placeholder($text) {
    return '<strong><em>'. check_plain($text) .'</em></strong>';
  }

Rafraîchissez le cache du thème, en allant dans Administrer » Construction du site » Thèmes et en cliquant sur le bouton Enregistrer la configuration. Maintenant, rendez-vous, disons, dans l'onglet Révisions (.../node/%/revisions) et vous verrez que le titre et version en cours sont fortement accentués (à supposer que le node ait plus d'une version)

Comme pour les autres fichiers du dossier de votre sous-thème, les modifications futures des fonctions existantes de template.php prennent effet immédiatement, vous n'avez pas à modifier le cache à nouveau.

Nous avons indiqué que les gabarits sont généralement préférés aux fonctions theme_hook(). Voyons si le vilain petit canard theme_hook() peut être transformé en gabarit...

Exemple 4 : surcharger un theme_hook() avec un gabarit

La partie facile ressemble beaucoup à l'exemple 2 et se base sur la règle que chaque fichier <theme>.tpl.php dans le dossier de votre sous-thème surcharge automatiquement tout hook de thème existant, indépendamment de l'endroit où il est implémenté, que ce soit dans par une fonction ou un gabarit. Aussi, pour surcharger la fonction theme_user-name() (/includes/theme.inc) et rendre le HTML plus designer-friendly, vous n'avez qu'à créer un fichier nommé username.tpl.php dans le dossier de votre sous-thème. Donnez-lui le contenu suivant et rafraîchissez le cache :

  <span style="color:orange">*author goes here*</span>

Vous n'aurez pas à aller loin pour voir le résultat de cette modification, Administrer » Gestion du contenu » Contenu.

Maintenant le plus dur... récupérer le nom de l'auteur à partir du contexte PHP dans lequel le hook de thème username est utilisé et le placer dans le code HTML précédent.

C'est là que les fonctions de pré-traitement entrent en jeu. Ajoutez le code suivant à votre fichier template.php (n'oubliez pas de changer le préfixe subthemename pour qu'il corresponde à votre sous-thème).

  /**
   * Implémentation de <subthemename>_preprocess_hook().
   * Surcharge  /includes/theme.inc/theme_username($object).
   * Appelé avant la mise en forme par le gabarit, ce qui nous permet
   * d'initialiser les variables utilisées dans le gabarit.
   *
   * @param $variables, contient l'objet utilisateur à mettre en forme
   * @return rien
   */
  function subthemename_preprocess_username(&$variables) {
   $user = $variables['object'];
    // … autre code et initialisations de variables si besoin
    $variables['username'] = check_plain($user->name);
  }

Les dernières lignes rendent la variable $username disponible dans le gabarit, vous pouvez donc en tirer parti dans votre fichier username.tpl.php comme indiqué ci-dessous :

  <span style="color:orange">*<?php print $username ?>*</span>

Rafraîchissez le cache à nouveau (Administrer » Construction du site » Thèmes) et revenez à la page Contenus. Ou, pour changer, visitez la page Gestion des utilisateurs » Utilisateurs.

Et voilà. Le theme_hook() qui amalgamait, dans une seule fonction difficile à décrypter, le traitement des données et leur présentation, est maintenant divisé en plusieurs fichiers PHP et HTML, qui peuvent être maintenus séparément par des concepteurs de thèmes et des programmeurs.