logo

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

Extra Paragraph Types (EPT) - analoge op paragrafen gebaseerde set modules.

Demo EPT-modules Download EPT-modules

Scroll
  1. Home
  2. Drupal Boek
  3. 6. Drupal: Theming
  4. 6.1. Drupal-corethema’s

6.1.1 - Een thema maken op basis van Zen in Drupal 8

17/10/2025, by Ivan

Menu

Zen is het populairste basisthema voor Drupal. Als je snel een responsief ontwerp wilt maken voor een site met een lay-out van drie kolommen, dan is Zen precies wat je nodig hebt. Je hoeft het alleen te installeren en het commando npm install uit te voeren — Zen bereidt vervolgens automatisch de basis voor jouw ontwerp voor. Laten we stap voor stap bekijken hoe dit werkt.

Download het Zen-hoofdthema van de officiële website:

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

Sinds Drupal 8 kunnen we thema’s direct in de map /themes plaatsen, dus we plaatsen de map met het thema daar.

In de map /themes/zen/STARTERKIT bevindt zich een subthema dat je handmatig kunt gebruiken als basis voor je eigen subthema. Hiervoor moet je overal STARTERKIT vervangen door de naam van jouw thema en vervolgens de map van jouw nieuwe subthema verplaatsen uit de /themes/zen-map, zodat het niet verloren gaat wanneer Zen wordt bijgewerkt. Maar ik raad ten zeerste aan om in plaats daarvan Drush of een thema-generator te gebruiken.

Voor het Zen-thema moeten we ook de module Components Libraries installeren:

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

Laten we nu het Zen-thema inschakelen, maar we zullen het nog niet als standaardthema instellen — dat doen we later voor ons subthema. Voer het volgende Drush-commando uit:

drush zen drupalbook

Drush maakt voor ons een subthema genaamd drupalbook. In plaats van drupalbook kun je uiteraard een andere naam voor je thema gebruiken. Nu kunnen we ons nieuwe subthema drupalbook inschakelen als standaardthema. Het thema zal werken, maar nu moeten we nog de Gulp-taken inschakelen. Hiervoor moet Node.js geïnstalleerd zijn.

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

Node.js kan worden geïnstalleerd op Windows, Mac OS, Ubuntu en andere besturingssystemen.

Na de installatie van Node.js moet je ook de pakketbeheerder van Node.js configureren — npm:

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

Ga nu in de PhpStorm-console naar de map /themes/drupalbook:

cd themes/drupalbook

En voer het commando uit dat alle afhankelijkheden van Zen in één keer installeert:

npm install

Klik vervolgens met de rechtermuisknop op het bestand gulpfile.js en kies Show Gulp Tasks:

drupal 8 zen

Standaard worden alle stijlen gecompileerd en opgeslagen in de map /themes/drupalbook/components/asset-builds/css. Om nieuwe stijlen te schrijven, gebruik je .scss-bestanden; Gulp zal deze automatisch hercompileren. Voer hiervoor de taak watch:css uit. Wanneer je vervolgens een Sass-bestand aanpast, genereert Zen automatisch de nieuwe CSS-bestanden (of bij het opslaan met Ctrl + S, afhankelijk van de instellingen in PhpStorm).

Om JavaScript in je thema te bewerken, kun je het meegeleverde bestand gebruiken: /themes/drupalbook/js/script.js.

Je Zen-gebaseerde subthema voor Drupal 8 is nu klaar voor verdere ontwikkeling:

drupal 8 zen

Tijdens de installatie van Node.js kunnen er soms fouten optreden bij Gulp. Laat in de reacties weten of het jou is gelukt om Zen correct te configureren.