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. Articles

Een eigen Drupal-thema maken op basis van het Zen-thema

14/10/2025, by Ivan

Als je hebt besloten om geen kant-en-klaar Drupal-thema te gebruiken, maar je eigen thema te maken of een sjabloon van WordPress of Joomla over te zetten, zul je het thema vanaf nul moeten schrijven. Gelukkig bestaan er al frameworks (basisstructuren) die dit proces sterk vereenvoudigen.

Zen – http://drupal.org/project/zen

Fusion – http://drupal.org/project/fusion

Adaptive Theme – http://drupal.org/project/adaptivetheme

Omega – http://drupal.org/project/omega

Het meest gebruikte framework voor thema’s is Zen theme. Dit is een zeer handige themastructuur — in feite een kant-en-klaar, “kaal” drie-kolommen-thema voor Drupal dat automatisch de benodigde klassen genereert. Een ander voordeel van Zen is de manier waarop de content wordt geplaatst: het contentblok komt vóór de menu’s en sidebars. Dit is belangrijk voor SEO (zoekmachineoptimalisatie), omdat de unieke inhoud dan eerst wordt weergegeven, gevolgd door de herhalende onderdelen zoals menu’s, archieven en blokken.

Zo ziet het Zen-thema er standaard uit:

Drupal zen theme

Op basis van Zen gaan we ons eigen thema maken. Download Zen theme van drupal.org. Maak een map aan sites/all/themes (als die nog niet bestaat) en kopieer de map zen daarin.

Drupal zen theme

Nu moeten we een subthema (onderthema) maken op basis van Zen. Waarom een subthema maken als je alle aanpassingen ook direct in Zen kunt doen? Omdat je dan altijd de originele bestanden kunt behouden als back-up, mocht er iets misgaan met je aanpassingen. Bovendien kunnen anderen dan zien op welk thema jouw versie is gebaseerd.

Kopieer de map STARTERKIT en hernoem de kopie naar de naam van je subthema — in mijn geval sitemade. Binnen die map vind je het bestand STARTER.info.txt; hernoem dit naar de naam van je thema, bijvoorbeeld sitemade.info.

Drupal book theming

Om je subthema te activeren, ga naar de Drupal-beheeromgeving en schakel het thema Zen Sub-theme Starter Kit in (de naam kun je wijzigen in het .info-bestand).

Zen starter kit

Het subthema is nu ingeschakeld — dit is het thema dat we gaan bewerken.

Zen sub theme

Ga naar de thema-instellingen en klik op Turn off this feature om de optie Rebuild theme registry on every page uit te schakelen.

We hebben nu een “leeg” thema. Bepaal eerst of de breedte van de website vast (meestal 900–1000 pixels) of vloeibaar (volledige schermbreedte) moet zijn. Als een vaste breedte goed is, hoef je niets te veranderen — standaard is de breedte 960 pixels. Wil je een vloeibaar ontwerp, open dan de map css van je subthema en vervang de inhoud van layout-fixed.css door die van layout-liquid.css.

Drupal layout fixed

Vergeet niet dat in de map STARTERKIT een kopie van al deze bestanden staat — je kunt dus altijd de oorspronkelijke instellingen herstellen.

Tot slot: kopieer de map met sjablonen uit sites/all/themes/zen/templates naar de map van je thema sites/all/themes/zen/naam_van_je_thema/templates. Je kunt de sjablonen ook rechtstreeks in de oorspronkelijke map bewerken, maar het is beter om altijd een reservekopie bij de hand te hebben.