peLmeL.org
Accueil du site > Traductions > Comment créer vos propres sous thèmes à partir du thème Zen

Comment créer vos propres sous thèmes à partir du thème Zen

jeudi 15 janvier 2009, par Brice Favre


Traduction de How to build you’re own sub-theme (6.X).

Edit : Petit oubli notable en me penchant à nouveau sur le sujet ce matin, il manquait le lien vers le projet, voilà qui est résolu.

Comment créer vos propres sous thèmes à partir du thème Zen

Le thème de base Zen est développé pour être facilement étendus par ses sous-thèmes [1]. Vous n’aurez pas à modifier les fichiers CSS ou PHP situés dans le répertoire zen/[NDT : D’autres starter-thèmes incite au contraire à modifier les fichiers de bases] ; mais, au contraire, vous créerez un thème dérivé de zen qui pourra être situés en dehors du répetoire de base zen/ [2]. Les exemples ci-dessous prennent pour postulat que que zen et votre thème dérivé seront installés dans le répertoire sites/all/themes.

Explications. Pour comprendre, pourquoi vous ne devez en aucun cas modifier les fichiers situés dans le répertoire zen/, reportez vous à la page "Why use Zen ? (en anglais [3])".

1. Copiez le répertoire STARTERKIT en dehors du répertoire zen/ et renommez le pour en faire un nouveau sous-thème. Important : seul les minuscules et le caractère souligné peuvent être utilisés pour le nom de votre sous-thème.

Par exemple, copiez et renommer le répertoire sites/all/themes/zen/STARTERKIT en sites/all/themes/foo.

Explications. Chaque thème doit se trouver dans son propre répertoire. Contrairement à Drupal 5, les thèmes dérivés peuvent (et doivent) disposer d’un répertoire séparé du répertoire du thème dont ils héritent.

2. Dans le répértoire de votre nouveau sous-thème, renommez le fichier STARTERKIT.info par le nom de votre thème. Ensuite éditez le fichier, remplacez toutes les occurrences de STARTERKIT par le nom de votre thème et éditez les champs nom et description.

Par exemple, renommer le fichier foo/STARTERKIT.info en foo/foo.info. Editez le fichier foo.info et remplacez ""STARTERKIT.css" par "foo.css", "name = Zen Themer’s Starter Kit" par "name = Foo", et"description = Read..." par "description = Un sous-thème Zen".

Explications. Le fichier .info décris les différentes informations basiques de votre thème : son nom, sa description, ses apports, les zones définis par le template, les fichiers CSS et javascript. Voir le guide des thèmes de Drupal 6 pour plus d’infos.

3. Si vous désirez un cadre qui se redimensionne automatiquement pour votre thème, copiez le fichier layout-liquid.css du répertoire zen/ et placez le vers celui de votre thème. Si vous voulez un cadre aux largeurs fixes, copiez le fichier layout-fixed.css depuis le répertoire zen/ et placez le dans celui de votre thème. Renommez ensuite le fichier choisi en "layout.css".

Par exemple, copiez le fichier zen/zen/layout-fixed.css et renommez le en foo/layout.css. A noter que votre fichier .info contient une déclaration du fichier layout.css.

Explications. Dans le système de thème de Drupal 6, si vous voulez modifier une feuille de style incluse dans le thème de base ou par un module, vous devez d’abord copier la feuille de style depuis le répertoire de base (thème ou module) vers le répertoire de votre thème et ensuite déclarer , dans le fichier .info, cette feuille de style.

Exemple tiré d’un fichier .info :

  1. ; On surcharge le thème layout.css et html-element.css
  2. stylesheets[all][]  = layout.css
  3. stylesheets[all][]  = html-elements.css
  4. ; Par contre on ne surcharge pas tabs.css
  5. ;stylesheets[all][]  = tabs.css

Voir le guide des thèmes de Drupal 6 pour plus d’infos.

4. De même, copiez la feuille de style d’imporession et placez là dans le répertoire de votre thème.

Exemple, copier zen/zen/print.css vers foo/print.css. A noter que le fichier .info surcharge déjà le fichier print.css

5. Copier la feuille de style zen du répertoire zen et placez là dans le répertoire de votre thème. Renommer là en utilisant le nom de votre thème.

Par exemple, copier zen/zen/zen.css vers foo/foo.css. A noter que le fichier .info dispose d’une entrée pour le fichier foo.css et qu’il surcharge le fichier zen.css dans le but de l’enlever de votre thème.

6. Editez les fichiers template.php et theme-settings.php dans le répertoire de votre thème. Remplacez toutes les occurrences de "STARTERKIT" par le nom de votre thème.

Exemple : éditez foo/template.php et foo/theme-settings.php et remplacez "STARTERKIT" par "foo".

7. Connecte vous en tant qu’administrateur sur votre site Drupal. Rendez-vous sur la rubrique Administration > Construction du Site > Thèmes et activez votre thème.

Options :

8. Modification des feuilles de style du coeur de Zen : Si vous décidez de modifier un des thèmes du répertoire zen, copiez les d’abord dans le répertoire de votre nouveau thème avant de procéder au moindre changement. Assurez vous aussi de déclarez cette nouvelle feuille de styl dans votre fichier .info.

Exemple : copiez zen/zen/html-element.css dans foo/html-element.css. Ensuite modifier foo/foo.info en remplaçant :


;stylesheets[all][]  = html-elements.css

par


stylesheets[all][]  = html-elements.css

9. Modification des fichier de template du coeur de Zen : Si vous désirez modifier les fichiers de templates .tpl.php, copiez les tout d’abord dans le répertoire de votre nouveau thème.

Par exemple, copiez zen/zen/page.tpl.php en foo/page.tpl.php. N’oubliez pas ensuite de reconstruire le registre des thèmes.

10. Personnalisez le formulaire de recherche de Drupal : Copiez le fichier de template search-theme-form.tpl.php du répertoire modules/search/ et placez le dans le répertoire de votre thème.

Explications. Dans le système de thème de Drupal 6, si vous désirez modifier un template inclus par un module, vous devez copiez le fichier de template du répertoire du module dans le répertoire de votre thème et ensuite reconstruisez le registre des thèmes. Voir le guide des thèmes de Drupal 6 pour plus d’infos.

11. Plus de possibilités pour votre thème : Découvrez plusieurs possibilités pour étendre votre thème en lisant le guide des thème de Drupal 6 en ligne à l’adresse http://drupal.org/theme-guide

Notes

[1] NDT : Drupal propose un système d’héritage de thème très pratique que nous allons utiliser ici

[2] NDT : Attention ça ne marche que pour la branche 6.X de Drupal

[3] si vous avez des traductions de ces pages, merci de me le signaler pour que je mette à jour mon post

Répondre à cet article

3 Messages de forum


Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | SPIP | squelette