logo

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

Types de blocs supplémentaires (EBT) – types de blocs stylisés et personnalisables : diaporamas, onglets, cartes, accordéons et bien d’autres. Paramètres intégrés pour l’arrière-plan, la boîte DOM, les plugins JavaScript. Découvrez dès aujourd’hui le futur de la création de mises en page.

Démo des modules EBT Télécharger les modules EBT

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

Types de paragraphes supplémentaires (EPT) – ensemble de modules basé sur les paragraphes analogiques.

Démo des modules EPT Télécharger les modules EPT

Défilement
  1. Accueil
  2. Livre Drupal
  3. 6. Drupal : Thématisation
  4. 6.1. Thèmes du noyau Drupal

6.1.1 - Création d’un thème basé sur Zen Drupal 8

07/07/2025, by Ivan

Menu

Zen est le thème constructeur le plus populaire pour Drupal. Si vous avez besoin de réaliser rapidement un design responsive basé sur une mise en page à trois colonnes, Zen est ce qu’il vous faut. Il suffit de l’installer, de lancer npm install, et Zen prépare la base de votre design. Prenons cela dans l’ordre.

Téléchargez le thème parent Zen depuis le site officiel :

https://www.drupal.org/project/zen

Depuis Drupal 8, il est possible de placer les thèmes directement dans le dossier /themes, placez donc le dossier du thème à cet endroit.

Dans le dossier /themes/zen/STARTERKIT, il y a un sous-thème que vous pouvez utiliser pour créer manuellement votre propre sous-thème. Pour cela, remplacez partout STARTERKIT par le nom de votre thème et supprimez ensuite le dossier de votre nouveau sous-thème du dossier /themes/zen, afin que lors de la mise à jour du thème Zen, votre sous-thème ne soit pas perdu. Cependant, je recommande vivement d’utiliser drush ou un générateur de thème.

Pour le thème Zen, il est aussi nécessaire d’installer le module Components Libraries :

https://www.drupal.org/project/components

Activons le thème Zen, mais sans l’installer par défaut, nous installerons plus tard notre sous-thème. Lancez la commande drush :

drush zen drupalbook

Drush créera un sous-thème drupalbook pour vous, vous pouvez remplacer drupalbook par le nom que vous souhaitez. Vous pouvez maintenant activer votre nouveau sous-thème drupalbook par défaut. Le thème fonctionnera, mais il faudra maintenant activer les tâches gulp. Pour cela, il faudra installer Node.js :

https://nodejs.org/en/download/

Node.js peut être installé sous Windows, Mac OS, Ubuntu et autres systèmes.

Une fois Node.js installé, il faudra configurer le gestionnaire de paquets npm :

https://docs.npmjs.com/getting-started/installing-node

Passez ensuite dans le dossier /themes/drupalbook via la console PhpStorm :

cd themes/drupalbook

Et lancez la commande qui installe toutes les dépendances de Zen d’un coup :

npm install

Cliquez ensuite avec le bouton droit sur le fichier gulpfile.js et sélectionnez Show Gulp Tasks :

drupal 8 zen

Au départ, tous les styles sont compilés et se trouvent dans le dossier /themes/drupalbook/components/asset-builds/css. Pour écrire de nouveaux styles, vous devez les coder en .scss et gulp les recompiler automatiquement. Pour cela, lancez la tâche watch: css. Désormais, quand vous modifierez vos fichiers Sass, Zen générera automatiquement les fichiers CSS (ou en sauvegardant avec Ctrl + S, vous pouvez configurer PhpStorm).

Pour éditer le JavaScript du thème, vous pouvez utiliser le fichier /themes/drupalbook/js/script.js.

Votre sous-thème basé sur Zen pour Drupal 8 est prêt pour continuer le travail :

drupal 8 zen

Lors de l’installation de Node.js, des erreurs liées à gulp peuvent survenir fréquemment, n’hésitez pas à écrire dans les commentaires si vous avez réussi à configurer Zen.