Dienstklassen.

Jedes Element hat ein Feld HTML classes mit einer Liste benannter Klassen. Bootstrap-5-Dienstklassen und Schatten sind eingebaut. Ihr Theme kann eine eigene Gruppe über seine .info.yml hinzufügen, und ein Modul über einen Alter-Hook. Diese Seite erklärt, was die Liste enthält und wie Sie eigene Klassen registrieren, damit Bearbeitende einen Marken-Look per Name wählen, statt Klassennamen zu tippen.

Klasse anwenden

1. Öffnen Sie die Einstellungen des Elements und finden Sie HTML classes unten im Panel General.
2. Klicken Sie in das Feld und wählen Sie eine Klasse aus der Liste. Tippen im Feld filtert die Liste.
3. Um eine Klasse einzugeben, die nicht in der Liste steht, klicken Sie auf Edit as text und tippen Sie sie.
4. Klicken Sie im Dialog auf Save, dann in der Builder-Symbolleiste auf Save.

Die Klassen landen im Attribut class des Elements im gespeicherten HTML. HTML-ID und Klassen führt Bearbeitende durch gängige Nutzungen.

Was die Liste enthält

Der Editor baut die Liste beim Start. Er mischt drei Quellen in dieser Reihenfolge:

1. Die eingebaute Liste. Sie hält eine Gruppe Drop shadows, eine kurze Gruppe Bootstrap classes und die Bootstrap-5-Dienstklassen, gruppiert nach Aufgabe: Display & Visibility, Responsive Visibility, Margins, Padding, Text Colors und mehr.
2. Eine Gruppe für jedes installierte Theme, dessen .info.yml einen Schlüssel dxpr_builder_classes hat. Die Gruppe ist mit dem Namen des Themes beschriftet.
3. Änderungen aus Modulen, siehe Klassen aus einem Modul registrieren.

Daher hat jede Website Klassen für Abstände, etwa mt-3 und px-4, für Anzeige, etwa d-none, und für Text, etwa text-center und fw-bold. Dafür richten Sie nichts ein.

Klassen in einem Theme registrieren

Fügen Sie ein dxpr_builder_classes-Mapping zur .info.yml des Themes hinzu. Jeder Schlüssel ist ein Klassenname, oder mehrere per Leerzeichen getrennt; jeder Wert ist die Bezeichnung, die Bearbeitende sehen. DXPR Theme registriert seine Klassen so:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

1. Fügen Sie das Mapping zu themes/custom/mytheme/mytheme.info.yml hinzu:

   dxpr_builder_classes:
     brand-card: 'Brand card'
     brand-card shadow-lg: 'Brand card with shadow'
   

2. Schreiben Sie das CSS für die Klassen in eine Bibliothek, die das Theme auf jeder Seite lädt; siehe Eigenes CSS.

3. Leeren Sie Caches mit drush cr, damit Drupal die Infodatei erneut liest.

4. Öffnen Sie die Einstellungen eines Elements und prüfen Sie, dass HTML classes eine Gruppe mit dem Namen Ihres Themes und den zwei Einträgen zeigt.

Jedes installierte Theme mit dem Schlüssel fügt seine Gruppe hinzu, nicht nur das Standard-Theme. Die Gruppe trägt immer den Namen des Themes; die Infodatei kann sie nicht umbenennen.

Klassen aus einem Modul registrieren

Ein eigenes Modul kann Klassen hinzufügen, oder Klassen entfernen, die ein Theme registriert hat, per Alter-Hook. Es kann die eingebauten Bootstrap-Einträge nicht entfernen, weil der Editor sie im Browser hinzufügt. Der Code steht auf Hooks-API-Referenz.

Bootstrap-Version

Die eingebaute Liste ist Bootstrap 5. Wenn Ihr Theme kein Bootstrap 5 lädt, setzen Sie Sideload Bootstrap files auf Bootstrap 5 unter Bootstrap auf DXPR Studio > DXPR Builder > General Settings, damit die Klassen CSS dahinter haben. Siehe Performance: was das lädt.

Wenn Sie Ihre Klassen nicht sehen

• Die Gruppe Ihres Themes fehlt in HTML classes. Drupal nutzt noch die alte Kopie der Infodatei des Themes. Klicken Sie auf Clear all caches unter Configuration > Development > Performance (/admin/config/development/performance), oder führen Sie drush cr aus.
• Ein Theme mit dem Schlüssel fügt keine Gruppe hinzu. Nur installierte Themes zählen. Installieren Sie das Theme unter Appearance (/admin/appearance); es muss nicht das Standard-Theme sein.
• Das Element sieht nach der Wahl einer Klasse gleich aus. Kein CSS für diese Klasse lädt auf der Seite. Fügen Sie die Regeln zu einer Bibliothek hinzu, die Ihr Theme lädt, siehe Eigenes CSS. Für Bootstrap-Klassen siehe Bootstrap-Version.

Wie geht es weiter?

• Eigenes CSS: schreiben Sie die Regeln hinter Ihren Klassen.
• Texteditor: Klassen für Absätze und Worte in der Styles-Liste anbieten.
• Hooks-API-Referenz: die übrigen Hooks, die DXPR Builder bietet.