DXPR Builder themen.

Builderinhoud is gewone HTML op je pagina, dus je thema stijlt het als elke andere inhoud. Deze pagina behandelt wat een thema overerft, hoe het klassen toevoegt aan de editor, en waar je overrides plaatst.

Wat je thema stijlt

Gepubliceerde builderinhoud overerft de stijlen van je thema:

• Koppen, bodytekst en links gebruiken de stijlen van je thema.
• Lay-out gebruikt Bootstrap 5-rijen en kolommen, dus een Bootstrap 5-thema lijnt ermee uit. Ga met elk ander thema naar DXPR Studio > DXPR Builder > Algemene instellingen en zet Bestanden van Bootstrap bijladen op Bootstrap 5.
• Elk element heeft één klasse per type, zoals az-card of az-button, en de meeste hebben ook az-element; zie CSS-architectuur.

Klassen toevoegen aan de editor

In de info.yml van het thema

Som klassen op onder dxpr_builder_classes in de .info.yml van je thema. Ze verschijnen in de lijst HTML-klassen van elk element, in een optiegroep genoemd naar het thema, zolang het thema is ingeschakeld:

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

Vanuit een module

Implementeer hook_dxpr_builder_classes_alter(). De naam moet eindigen op _alter; zie Hooks API-referentie.

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

Knopstijlen

Het Knop-element biedt de Bootstrap-stijlen Primary, Secondary, Success, Info, Warning, Danger, Link, Light en Dark. De lijst is vast in de editor; de buttons-folders-hook verandert hem niet. Om knoppen je merkuiterlijk te geven, stijl je de btn-*-klassen van Bootstrap in je thema, of voeg je je eigen klasse toe via HTML-klassen.

CSS-overrides

Overschrijf builderuitvoer in de CSS van je thema:

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

Instellingen die een editor maakt op het tabblad Stijl worden geschreven als inline stijlen. Inline stijlen winnen van themaregels zonder !important, dus gebruik thema-CSS voor standaarden en laat editors ze per element overschrijven.

De editor en je thema

De editor draait op de pagina waar het veld wordt getoond, dus in je frontend-thema, niet het beheerthema. Zijn besturingsbalken, menu's en dialogen dragen de klasse dxpr-builder-ui en laden hun eigen stylesheet, dxpr_builder_backend.css. Themaregels die brede selectors als button of .modal raken kunnen ze nog steeds bereiken; beperk je regels tot je inhoudsregio's om dat te voorkomen.