--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Geef builderinhoud stijl met de CSS van je thema | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:32:27+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Builderinhoud van DXPR is deel van de pagina die je thema rendert, dus de CSS van je thema geeft het stijl in de editor en op de gepubliceerde pagina. Gebruik deze pagina wanneer een look op veel elementen of pagina's moet terugkeren, of wanneer de elementinstellingen hem niet kunnen maken. Je eindigt met een stylesheet in je thema en een klasse die redacteurs kunnen toepassen. Voor één element gebruik je zijn instellingendialoogvenster. tags: - 'Je huisstijl toepassen' 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: 'Geef builderinhoud stijl met de CSS van je thema' description: |- Builderinhoud van DXPR is deel van de pagina die je thema rendert, dus de CSS van je thema geeft het stijl in de editor en op de gepubliceerde pagina. Gebruik deze pagina wanneer een look op veel elementen of pagina's moet terugkeren, of wanneer de elementinstellingen hem niet kunnen maken. Je eindigt met een stylesheet in je thema en een klasse die redacteurs kunnen toepassen. Voor één element gebruik je zijn instellingendialoogvenster. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:32:27+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/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/customization/custom-css' description: |- Builderinhoud van DXPR is deel van de pagina die je thema rendert, dus de CSS van je thema geeft het stijl in de editor en op de gepubliceerde pagina. Gebruik deze pagina wanneer een look op veel elementen of pagina's moet terugkeren, of wanneer de elementinstellingen hem niet kunnen maken. Je eindigt met een stylesheet in je thema en een klasse die redacteurs kunnen toepassen. Voor één element gebruik je zijn instellingendialoogvenster. 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) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Geef builderinhoud stijl met de CSS van je thema. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Utility-klassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Gebruik de lettertypen van je merk op builderpagina's](/nl/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Voeg merkstijlen en knoppen toe aan de teksteditor](/nl/hc/documentation/learn-dxpr-builder/customization/text-editor) Builderinhoud van DXPR is deel van de pagina die je thema rendert, dus de CSS van je thema geeft het stijl in de editor en op de gepubliceerde pagina. Gebruik deze pagina wanneer een look op veel elementen of pagina's moet terugkeren, of wanneer de elementinstellingen hem niet kunnen maken. Je eindigt met een stylesheet in je thema en een klasse die redacteurs kunnen toepassen. Voor één element gebruik je zijn [instellingendialoogvenster](/hc/documentation/learn-dxpr-builder/element-settings). ## Voordat je begint - Je hebt toegang tot de bestanden van je thema en een manier nodig om ze te deployen. - Gebruik een aangepast thema of een subthema. Een update van een bijgedragen thema vervangt zijn bestanden, en daarmee je CSS. ## Instellen 1. Maak `css/custom.css` in de map van je thema, bijvoorbeeld `themes/custom/mytheme/css/custom.css`. 2. Declareer het bestand in `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Laad de library op elke pagina vanuit `mytheme.info.yml`: ```yaml libraries: - mytheme/global-styling ``` 4. Schrijf een regel voor een eigen klassenaam: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Wis de cache bij **Configuration** > **Development** > **Performance**(`/admin/config/development/performance`) met **Clear all caches**, of draai `drushcr`. 6. Open in de builder de instellingen van een **Section** en voeg `brand-hero` toe onder **HTML classes**. [HTML ID en klassen](/nl/hc/documentation/learn-dxpr-builder/element-settings/custom-css) toont hoe je een eigen klasse typt. Redacteurs kunnen de klasse ook uit de lijst **HTML classes** kiezen zodra je thema hem daar vermeldt; zie [Utility-klassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## Wat je ziet De sectie neemt het verloop en de witte tekst over zodra je de klasse toevoegt, omdat de editor draait op de pagina die je thema rendert. Bezoekers zien hetzelfde nadat je de pagina hebt opgeslagen. De klasse wordt in de HTML van de pagina bewaard, dus door de regel later te wijzigen werk je elk element met die klasse bij. ## Klassen die DXPR Builder schrijft Je eigen klasse is het veiligste doelwit. Deze klassen staan ook in de opgeslagen HTML: | Selector | Matcht | |---|---| | `.az-container` | de wrapper van elk DXPR Builder-veld; die heeft ook `.dxpr-editor` terwijl iemand het bewerkt | | `.az-section` | elke **Section**; erin zit een `.container`, of `.container-fluid` wanneer **Full width** aanstaat | | `.row` | elke **Row**; DXPR Builder gebruikt Bootsraps eigen klasse, geen `az-row` | | `.col-*` | elke kolom, bijvoorbeeld `.col-12.col-md-6`; er is geen `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | één elementtype: `az-` plus de naam van het element, zoals `.az-separator` voor de Divider | | `.az-element` | de meeste inhoudselementen, maar niet Image, Icon of Button | Het paneel **Style** schrijft inline `style`-attributen, die een klasseregel op dezelfde eigenschap verslaan. Bootstrap-utilityklassen zijn gemarkeerd met `!important` en verslaan beide. ## Als je de stijl niet ziet - **De klasse staat op het element, maar er verandert niets.** De library is niet geladen, of de cache bevat nog de oude CSS. Controleer of `mytheme.info.yml` de library vermeldt en wis daarna de caches op `/admin/config/development/performance`. - **Slechts enkele eigenschappen gelden.** Een **Style**-paneelwaarde op dezelfde eigenschap wint. Wis die waarde in het **Style**-paneel van het element, of verplaats de hele look naar je klasse. - **De stijl toont in de editor maar niet voor bezoekers.** **Apply text format filters to frontend content** staat aan en het tekstformaat van het veld stript `class`-attributen. Zet het uit onder **Text Filters** op `/admin/dxpr_studio/dxpr_builder/settings`, of sta klassen toe in het formaat. - **Een regel voor `.az-row` of `.az-column` matcht nooit.** DXPR Builder schrijft die klassen niet. Richt op `.row`, de `.col-*`-klassen of je eigen klasse. ## Wat nu? - [Utility-klassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes): vermeld je klassen onder **HTML classes** zodat redacteurs ze kunnen kiezen. - [Aangepaste lettertypen](/nl/hc/documentation/learn-dxpr-builder/customization/custom-fonts): laad merklettertypen op dezelfde manier. - [Teksteditor](/nl/hc/documentation/learn-dxpr-builder/customization/text-editor): bied klassen voor alinea's en woorden aan in de lijst **Styles**.