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.
' - '@type': Question name: 'Kan een AI-agent het subthema en zijn instellingen opzetten?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': Question name: 'Welke Drupal-versies ondersteunt een DXPR Theme-subthema?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': Question name: 'Overschrijft een DXPR Theme-update mijn subthema?' acceptedAnswer: '@type': Answer text: '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.
' - '@type': TechArticle headline: 'Een DXPR Theme-subthema maken (Drupal 11)' description: '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.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:46:43+0000' dateModified: '2026-10-24T05:09:53+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-theme-leren/subthema-maken/dxpr-theme-subthema-maken' articleSection: 'Een subthema maken' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-theme-leren/subthema-maken/dxpr-theme-subthema-maken' description: '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.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Theme leren](/nl/hc/documentation/learn-dxpr-theme) /[Een subthema maken](/nl/hc/documentation/learn-dxpr-theme/creating-sub-theme) # Een DXPR Theme-subthema maken (Drupal 11). DXPR Theme lerenEen subthema maken ## In deze gids 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](/nl/drupal-agent-skills). ## Vragen over DXPR Theme-subthema’s ### Heb ik een subthema nodig voor kleuren en lettertypen? 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. ### Kan een AI-agent het subthema en zijn instellingen opzetten? 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. ### Welke Drupal-versies ondersteunt een DXPR Theme-subthema? 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. ### Overschrijft een DXPR Theme-update mijn subthema? 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.