Theming für DXPR Builder.

Learn DXPR BuilderExtendBouw erop voort

Builder-Inhalte sind gewöhnliches HTML in Ihrer Seite, sodass Ihr Theme sie stylt wie jeden anderen Inhalt. Diese Seite behandelt, was ein Theme erbt, wie es Klassen zum Editor hinzufügt und wohin Overrides gehören.

Was Ihr Theme stylt

Veröffentlichte Builder-Inhalte erben die Stile Ihres Themes:

  • Überschriften, Fließtext und Links nutzen die Stile Ihres Themes.
  • Layout nutzt Bootstrap-5-Rows und -Columns, sodass ein Bootstrap-5-Theme dazu passt. Mit jedem anderen Theme gehen Sie zu DXPR Studio > DXPR Builder > General Settings und stellen Sideload Bootstrap files auf Bootstrap 5.
  • Jedes Element hat eine Klasse pro Typ, zum Beispiel az-card oder az-button, und die meisten tragen zudem az-element; siehe CSS-Architektur.

Klassen zum Editor hinzufügen

In der info.yml des Themes

Listen Sie Klassen unter dxpr_builder_classes in der .info.yml Ihres Themes. Sie erscheinen in der Liste HTML classes jedes Elements, in einer Optionsgruppe mit dem Namen des Themes, solange das Theme aktiviert ist:

# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

Aus einem Modul

Implementieren Sie hook_dxpr_builder_classes_alter(). Der Name muss auf _alter enden; siehe Hooks-API-Referenz.

/**
 * 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');
}

Button-Stile

Das Button-Element bietet die Bootstrap-Stile Primary, Secondary, Success, Info, Warning, Danger, Link, Light und Dark. Die Liste ist im Editor fest; der Buttons-folders-Hook ändert sie nicht. Für Buttons in Ihrem Markenlook stylen Sie Bootstraps btn-*-Klassen in Ihrem Theme oder fügen über HTML classes eine eigene Klasse hinzu.

CSS-Overrides

Überschreiben Sie Builder-Ausgaben im CSS Ihres Themes:

/* 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);
}

Einstellungen, die Sie auf dem Style-Tab vornehmen, werden als Inline- Stile geschrieben. Inline-Stile schlagen Theme-Regeln, die kein !important nutzen. Nutzen Sie also Theme-CSS für Vorgaben; die Redaktion kann sie pro Element überschreiben.

Der Editor und Ihr Theme

Der Editor läuft auf der Seite, wo das Feld angezeigt wird, also in Ihrem Frontend-Theme, nicht im Admin-Theme. Seine Steuerleisten, Menüs und Dialoge tragen die Klasse dxpr-builder-ui und laden ihr eigenes Stylesheet, dxpr_builder_backend.css. Theme-Regeln, die auf breite Selektoren wie button oder .modal zielen, können sie dennoch erreichen; begrenzen Sie Ihre Regeln auf Ihre Inhaltsregionen, um das zu vermeiden.