--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/theming' title: 'DXPR Builder themen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:59:42+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Builderinhoud is gewone HTML op je pagina, dus je thema stijlt het als elke andere inhoud. Deze pagina behandelt wat een thema overerft, hoe het klassen toevoegt aan de editor, en waar je overrides plaatst. Wat je thema stijlt Gepubliceerde builderinhoud overerft de stijlen van je thema: tags: - 'Bouw erop voort' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'DXPR Builder themen' description: |- Builderinhoud is gewone HTML op je pagina, dus je thema stijlt het als elke andere inhoud. Deze pagina behandelt wat een thema overerft, hoe het klassen toevoegt aan de editor, en waar je overrides plaatst. Wat je thema stijlt Gepubliceerde builderinhoud overerft de stijlen van je thema: image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:59:42+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/development/theming' articleSection: 'Bouw erop voort' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/theming' description: |- Builderinhoud is gewone HTML op je pagina, dus je thema stijlt het als elke andere inhoud. Deze pagina behandelt wat een thema overerft, hoe het klassen toevoegt aan de editor, en waar je overrides plaatst. Wat je thema stijlt Gepubliceerde builderinhoud overerft de stijlen van je thema: 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 --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Bouw erop voort](/hc/documentation/learn-dxpr-builder/extend/build-on-it) # DXPR Builder themen. Learn DXPR BuilderExtendBouw erop voort ## In this guide Builderinhoud is gewone HTML op je pagina, dus je thema stijlt het als elke andere inhoud. Deze pagina behandelt wat een thema overerft, hoe het klassen toevoegt aan de editor, en waar je overrides plaatst. ## Wat je thema stijlt Gepubliceerde builderinhoud overerft de stijlen van je thema: - Koppen, bodytekst en links gebruiken de stijlen van je thema. - Lay-out gebruikt Bootstrap 5-rijen en kolommen, dus een Bootstrap 5-thema lijnt ermee uit. Ga met elk ander thema naar **DXPR Studio > DXPR Builder > Algemene instellingen** en zet **Bestanden van Bootstrap bijladen** op **Bootstrap 5**. - Elk element heeft één klasse per type, zoals `az-card` of `az-button`, en de meeste hebben ook `az-element`; zie [CSS-architectuur](/nl/hc/documentation/learn-dxpr-builder/development/css-architecture). ## Klassen toevoegen aan de editor ### In de info.yml van het thema Som klassen op onder `dxpr_builder_classes` in de `.info.yml` van je thema. Ze verschijnen in de lijst **HTML-klassen** van elk element, in een optiegroep genoemd naar het thema, zolang het thema is ingeschakeld: ```yaml # mytheme.info.yml dxpr_builder_classes: brand-header: 'Brand header style' brand-cta: 'Call to action style' bg-gradient-primary: 'Primary gradient background' ``` ### Vanuit een module Implementeer `hook_dxpr_builder_classes_alter()`. De naam moet eindigen op `_alter`; zie [Hooks API-referentie](/nl/hc/documentation/learn-dxpr-builder/development/hooks-api). ```php /** * Implements hook_dxpr_builder_classes_alter(). */ function mymodule_dxpr_builder_classes_alter(&$classes) { $classes['optgroup-custom'] = t('Custom Styles'); $classes['custom-card'] = t('Custom card'); $classes['custom-hero'] = t('Custom hero'); } ``` ## Knopstijlen Het Knop-element biedt de Bootstrap-stijlen Primary, Secondary, Success, Info, Warning, Danger, Link, Light en Dark. De lijst is vast in de editor; de buttons-folders-hook verandert hem niet. Om knoppen je merkuiterlijk te geven, stijl je de `btn-*`-klassen van Bootstrap in je thema, of voeg je je eigen klasse toe via **HTML-klassen**. ## CSS-overrides Overschrijf builderuitvoer in de CSS van je thema: ```css /* Section padding */ .az-section { padding-top: 4rem; padding-bottom: 4rem; } /* Card shadows */ .az-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } ``` Instellingen die een editor maakt op het tabblad Stijl worden geschreven als inline stijlen. Inline stijlen winnen van themaregels zonder `!important`, dus gebruik thema-CSS voor standaarden en laat editors ze per element overschrijven. ## De editor en je thema De editor draait op de pagina waar het veld wordt getoond, dus in je frontend-thema, niet het beheerthema. Zijn besturingsbalken, menu's en dialogen dragen de klasse `dxpr-builder-ui` en laden hun eigen stylesheet, `dxpr_builder_backend.css`. Themaregels die brede selectors als `button` of `.modal` raken kunnen ze nog steeds bereiken; beperk je regels tot je inhoudsregio's om dat te voorkomen.