--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'Builder-Inhalte mit Theme-CSS stylen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:04:13+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR-Builder-Inhalte sind Teil der Seite, die Ihr Theme rendert, daher stylt Ihr Theme-CSS sie im Editor und auf der veröffentlichten Seite. Nutzen Sie diese Seite, wenn ein Look über viele Elemente oder Seiten wiederkehren soll oder die Elementeinstellungen ihn nicht erzeugen können. Sie enden mit einem Stylesheet in Ihrem Theme und einer Klasse, die Bearbeitende anwenden können. Für ein Element nutzen Sie dessen Einstellungsdialog. 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: 'Builder-Inhalte mit Theme-CSS stylen' description: |- DXPR-Builder-Inhalte sind Teil der Seite, die Ihr Theme rendert, daher stylt Ihr Theme-CSS sie im Editor und auf der veröffentlichten Seite. Nutzen Sie diese Seite, wenn ein Look über viele Elemente oder Seiten wiederkehren soll oder die Elementeinstellungen ihn nicht erzeugen können. Sie enden mit einem Stylesheet in Ihrem Theme und einer Klasse, die Bearbeitende anwenden können. Für ein Element nutzen Sie dessen Einstellungsdialog. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:04:13+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/de/hc/documentation/learn-dxpr-builder/customization/custom-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/customization/custom-css' description: |- DXPR-Builder-Inhalte sind Teil der Seite, die Ihr Theme rendert, daher stylt Ihr Theme-CSS sie im Editor und auf der veröffentlichten Seite. Nutzen Sie diese Seite, wenn ein Look über viele Elemente oder Seiten wiederkehren soll oder die Elementeinstellungen ihn nicht erzeugen können. Sie enden mit einem Stylesheet in Ihrem Theme und einer Klasse, die Bearbeitende anwenden können. Für ein Element nutzen Sie dessen Einstellungsdialog. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[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) # Builder-Inhalte mit Theme-CSS stylen. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [Dienstklassen](/de/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [Marken-Fonts auf Builder-Seiten nutzen](/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [Markenstile und Buttons in den Texteditor bringen](/de/hc/documentation/learn-dxpr-builder/customization/text-editor) DXPR-Builder-Inhalte sind Teil der Seite, die Ihr Theme rendert, daher stylt Ihr Theme-CSS sie im Editor und auf der veröffentlichten Seite. Nutzen Sie diese Seite, wenn ein Look über viele Elemente oder Seiten wiederkehren soll oder die Elementeinstellungen ihn nicht erzeugen können. Sie enden mit einem Stylesheet in Ihrem Theme und einer Klasse, die Bearbeitende anwenden können. Für ein Element nutzen Sie dessen [Einstellungsdialog](/hc/documentation/learn-dxpr-builder/element-settings). ## Bevor Sie beginnen - Sie brauchen Zugang zu den Dateien Ihres Themes und einen Weg, sie auszurollen. - Nutzen Sie ein eigenes Theme oder ein Sub-Theme. Ein Update eines beigesteuerten Themes ersetzt seine Dateien, und Ihr CSS mit ihnen. ## Einrichtung 1. Legen Sie `css/custom.css` im Ordner Ihres Themes an, zum Beispiel `themes/custom/mytheme/css/custom.css`. 2. Deklarieren Sie die Datei in `mytheme.libraries.yml`: ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. Laden Sie die Bibliothek aus `mytheme.info.yml` auf jeder Seite: ```yaml libraries: - mytheme/global-styling ``` 4. Schreiben Sie eine Regel für einen eigenen Klassennamen: ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. Leeren Sie den Cache unter **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) mit **Clear all caches**, oder führen Sie `drush cr` aus. 6. Öffnen Sie im Builder die Einstellungen eines **Section**-Elements und fügen Sie `brand-hero` unter **HTML classes** hinzu. [HTML-ID und Klassen](/de/hc/documentation/learn-dxpr-builder/element-settings/custom-css) zeigt, wie Sie eine eigene Klasse tippen. Bearbeitende können die Klasse auch aus der Liste **HTML classes** wählen, sobald Ihr Theme sie dort listet; siehe [Dienstklassen](/de/hc/documentation/learn-dxpr-builder/customization/utility-classes). ## Was Sie sehen Der Abschnitt nimmt Verlauf und weißen Text, sobald Sie die Klasse hinzufügen, weil der Editor auf der Seite läuft, die Ihr Theme rendert. Besucher sehen dasselbe, nachdem Sie die Seite speichern. Die Klasse liegt im HTML der Seite, daher aktualisiert eine spätere Regeländerung jedes Element, das sie trägt. ## Klassen, die DXPR Builder schreibt Ihre eigene Klasse ist das sicherste Ziel. Diese Klassen stehen ebenfalls im gespeicherten HTML: | Selektor | Passt auf | |---|---| | `.az-container` | der Wrapper jedes DXPR-Builder-Felds; er hat außerdem `.dxpr-editor`, während jemand ihn bearbeitet | | `.az-section` | jeden **Section**-Abschnitt; darin sitzt ein `.container` oder `.container-fluid`, wenn **Full width** an ist | | `.row` | jede **Row**-Zeile; DXPR Builder nutzt Bootstraps eigene Klasse, ganz ohne `az-row` | | `.col-*` | jede Spalte, zum Beispiel `.col-12.col-md-6`; es gibt kein `az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | einen Elementtyp: `az-` plus Elementname, etwa `.az-separator` für den Divider | | `.az-element` | die meisten Inhaltselemente, aber nicht Image, Icon oder Button | Das Panel **Style** schreibt Inline-Attribute `style`, die eine Klassenregel auf derselben Eigenschaft schlagen. Bootstrap-Dienstklassen sind mit `!important` markiert und schlagen beide. ## Wenn Sie den Stil nicht sehen - **Die Klasse steht auf dem Element, aber nichts ändert sich.** Die Bibliothek ist nicht geladen, oder der Cache hält noch das alte CSS. Prüfen Sie, dass `mytheme.info.yml` die Bibliothek listet, dann leeren Sie Caches unter `/admin/config/development/performance`. - **Nur manche Eigenschaften greifen.** Ein **Style**-Panel-Wert auf derselben Eigenschaft gewinnt. Leeren Sie diesen Wert im **Style**-Panel des Elements, oder verlagern Sie den ganzen Look in Ihre Klasse. - **Der Stil erscheint im Editor, aber nicht für Besucher.** **Apply text format filters to frontend content** ist an, und das Textformat des Felds streift `class`-Attribute. Schalten Sie es unter **Text Filters** auf `/admin/dxpr_studio/dxpr_builder/settings` aus, oder erlauben Sie Klassen im Format. - **Eine Regel für `.az-row` oder `.az-column` passt nie.** DXPR Builder schreibt diese Klassen nicht. Zielen Sie auf `.row`, die `.col-*`-Klassen oder Ihre eigene Klasse. ## Wie geht es weiter? - [Dienstklassen](/de/hc/documentation/learn-dxpr-builder/customization/utility-classes): listen Sie Ihre Klassen unter **HTML classes**, damit Bearbeitende sie wählen können. - [Eigene Fonts](/de/hc/documentation/learn-dxpr-builder/customization/custom-fonts): Marken-Fonts genauso laden. - [Texteditor](/de/hc/documentation/learn-dxpr-builder/customization/text-editor): Klassen für Absätze und Worte in der **Styles**-Liste anbieten.