Een DXPR Theme-subthema maken (Drupal 11).

DXPR Theme lerenEen subthema maken

DXPR Theme wijzigt kleuren, lettertypen, header, witruimte en lay-out vanuit zijn instellingendashboard, dus de meeste sites hebben nooit een regel CSS nodig. Een subthema is voor de rest: je eigen stylesheet, template-overschrijvingen, extra bibliotheken of een kleurenpalet dat je met de code meelevert. Het subthema erft elke stylesheet en template van DXPR Theme, krijgt eigen instellingen, en updates van DXPR Theme laten het ongemoeid.

Deze handleiding behandelt DXPR Theme 8.2 op Drupal 10.3 en Drupal 11. De starterkit die hij gebruikt zit in het thema op dxpr_theme/dxpr_theme_STARTERKIT; het generate-theme-commando van Drupal-core wordt niet gebruikt, omdat DXPR Theme een eigen starterkit en commando meebrengt.

Voordat je begint

Voeg DXPR Theme toe en schakel zijn helpermodule in, die het thema nodig heeft voordat Drupal het installeert:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. Genereer het subthema uit de starterkit

Het snelst gaat het met het Drush-commando dat DXPR Theme Helper biedt. Draai het vanuit je projectroot; het valideert de machinenaam, kopieert de starterkit naar themes/custom en hernoemt alles voor je:

drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"

Zonder argumenten vraagt het commando om beide namen. Zonder Drush gebruik je het script dat met het thema wordt meegeleverd: ga naar web/themes/contrib/dxpr_theme, maak de scripts eenmalig uitvoerbaar met chmod +x scripts/*, draai ./scripts/create_subtheme.sh en vul de humane naam en de machinenaam in als erom wordt gevraagd. Het script draait alleen vanuit die map.

Hoe dan ook krijg je web/themes/custom/northwind_theme, met de bestanden en configuratie van de starterkit hernoemd naar je machinenaam en de THEMETITLE-placeholder vervangen in de info- en schemabestanden.

2. Schakel het in en sla de instellingen eenmalig op

  1. Ga naar Vormgeving en kies Installeren en als standaard instellen voor je subthema.
  2. Open de Instellingen van het subthema en druk op Configuratie opslaan zonder iets te wijzigen.

Die eerste save genereert de instellingenstylesheet voor het nieuwe thema. Het subthema start vanuit de standaardinstellingen van de starterkit, niet vanuit de instellingen die je in DXPR Theme hebt gemaakt. Om die over te nemen, exporteer je ze uit DXPR Theme en importeer je ze in het subthema:

drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme

Vanaf dan werkt het dashboard precies zoals bij DXPR Theme: kleuren, typografie, header, voettekst en witruimte horen allemaal bij het subthema.

Houd de regio’s van het subthema identiek aan die van het basisthema. De starterkit declareert dezelfde veertien regio’s als DXPR Theme, en de optie Regio’s verbergen van DXPR Theme Helper op inhoud verwijst ernaar bij naam.

3. Wat de starterkit je geeft

  • northwind_theme.info.yml: base theme: dxpr_theme, de regio’s, en één bibliotheek, global-styling, die je stylesheet laadt. Een becommentarieerd libraries-override-blok toont de DXPR Theme-bibliotheken die je het waarschijnlijkst uitzet, van dxpr_theme/bootstrap-5 tot dxpr_theme/helper-classes.
  • css/dxpr_theme_subtheme.css: laadt op elke pagina na de stylesheets van het thema zelf. Je CSS hoort hier.
  • templates/: leeg op een README na. Kopieer een template uit dxpr_theme/templates hierheen om hem te overschrijven.
  • config/install en config/schema: de standaardinstellingen en hun schema, hernoemd naar je thema.
  • color-settings.json: je eigen benoemde kleurenpaletten, getoond in de kleurenschemalijst naast de ingebouwde.
  • logo.svg, favicon.ico, screenshot.png: vervang ze door je eigen.

4. Schrijf CSS die de instellingen volgt

DXPR Theme schrijft zijn instellingen weg als CSS-variabelen: --dxt-color-* voor het palet en --dxt-setting-* voor typografie, witruimte en lay-out, en koppelt ze aan de --bs-*-variabelen van Bootstrap. Gebruik de variabelen in je stylesheet in plaats van vaste waarden, en je CSS blijft het dashboard volgen als iemand een kleur of lettertype wijzigt.

/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}

De basiskleur, accentkleuren, tekst, koppen, links, kaarten en voettekst hebben allemaal een variabele. De volledige lijst staat in de README van het thema onder CSS Custom Properties (Variables) Reference.

5. Overschrijf templates en bibliotheken

Kopieer de template die je wilt wijzigen van themes/contrib/dxpr_theme/templates naar de map templates van je subthema, behoud de bestandsnaam, bewerk hem en leeg de caches. Drupal pakt eerst de kopie van het subthema.

Om een stylesheet of script van het basisthema te laten vallen, becommentarieer je de regel libraries-override: in je infobestand uit samen met de regels van de bibliotheken die je wilt verwijderen; ze staan al op false. Om je eigen toe te voegen, declareer je meer bibliotheken in northwind_theme.libraries.yml en vermeld je ze onder libraries in het infobestand, zoals de starterkit doet voor global-styling.

6. Geef redacteuren je classes in DXPR Builder

Classes gedeclareerd onder dxpr_builder_classes: in het infobestand van het subthema verschijnen in de classkiezer van DXPR Builder, dus redacteuren passen je donkere band of glaspaneel toe zonder een classname te typen. Stijl de class in dxpr_theme_subtheme.css, toegespitst op de DXPR Builder-elementen waarvoor hij is bedoeld.

7. Lever een kleurenpalet met het thema mee

Voeg benoemde schema’s toe aan color-settings.json in de subthemaroot. Elk schema zet dezelfde sleutels als het dashboard gebruikt: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle en de rest. Het schema verschijnt in de kleurenschemalijst van het instellingenformulier, zodat een site met één klik naar het merkpalet schakelt.

8. DXPR Theme later bijwerken

  1. Werk het basisthema bij met Composer: composer update drupal/dxpr_theme --with-dependencies.
  2. Draai database-updates en leeg de caches.
  3. Open het instellingenformulier van het subthema en sla het nog een keer op, zodat de instellingenstylesheet opnieuw wordt gegenereerd met eventuele nieuwe variabelen.
  4. Lees de release notes op template- of regiowijzigingen, en vergelijk elke template die je hebt overschreven met de nieuwe versie.

Laat je AI-agent het themen doen

DXPR Theme 8.1.1 en later leveren een agent-skill mee. Draai drush dxt:setup-ai in je project, en je codingagent (Claude Code, Codex, Gemini CLI of Cursor) leert de thema-instellingen en hun betekenis. Beschrijf het merk, en de agent stelt kleuren, typografie, headerlay-out en witruimte in via dezelfde instellingen als waar het dashboard naartoe schrijft, zodat je het op de site beoordeelt. Hij kan ook het subthema aanmaken met drush dxt:subtheme:create.

De DXPR Builder-skill doet hetzelfde voor pagina’s, en Drush Webmaster voor inhoud en Views. Zie de agent-skills in actie.

Vragen over DXPR Theme-subthema’s

Nee. Kleuren, lettertypen, header, voettekst, witruimte en lay-out zijn instellingen in het DXPR Theme-dashboard. Een subthema is alleen nodig voor je eigen CSS, template-overschrijvingen, extra bibliotheken of een palet dat je met de code meelevert.

Ja. Na drush dxt:setup-ai kent de agent de thema-instellingen en wijzigt hij ze vanuit een briefing, en hij kan het subthema zelf aanmaken met drush dxt:subtheme:create. Je beoordeelt het resultaat op de site.

Dezelfde als DXPR Theme 8.2: Drupal 10.3 en later, en Drupal 11. Het infobestand van de starterkit declareert ook oudere versies, maar DXPR Theme 8.2 hangt af van modules die Drupal 10.3 nodig hebben.

Nee. Composer vervangt alleen themes/contrib/dxpr_theme; je subthema leeft in themes/custom. Sla het instellingenformulier van het subthema na een update eenmalig op, zodat zijn stylesheet nieuwe variabelen oppakt.