Builder-Inhalte mit Theme-CSS stylen.

DXPR Builder lernenWebsite verwaltenMarke umsetzen

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.

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

Legen Sie css/custom.css im Ordner Ihres Themes an, zum Beispiel themes/custom/mytheme/css/custom.css.

Deklarieren Sie die Datei in mytheme.libraries.yml:

global-styling:
  css:
    theme:
      css/custom.css: {}

Laden Sie die Bibliothek aus mytheme.info.yml auf jeder Seite:
```
libraries:
  - mytheme/global-styling
```

Schreiben Sie eine Regel für einen eigenen Klassennamen:

.brand-hero {
  background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
  color: #ffffff;
}

Leeren Sie den Cache unter Configuration > Development > Performance (/admin/config/development/performance) mit Clear all caches, oder führen Sie drush cr aus.
Öffnen Sie im Builder die Einstellungen eines Section-Elements und fügen Sie brand-hero unter HTML classes hinzu. HTML-ID und Klassen 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.

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: listen Sie Ihre Klassen unter HTML classes, damit Bearbeitende sie wählen können.
Eigene Fonts: Marken-Fonts genauso laden.
Texteditor: Klassen für Absätze und Worte in der Styles-Liste anbieten.