Tematizzazione di DXPR Builder.

I contenuti del builder sono normale HTML nella tua pagina, quindi il tuo tema applica loro i suoi stili come a qualsiasi altro contenuto. Questa pagina spiega cosa eredita un tema, come aggiunge classi all’editor e dove mettere gli override.

Cosa stilizza il tuo tema

I contenuti pubblicati del builder ereditano gli stili del tuo tema:

• Intestazioni, testo e link usano gli stili del tuo tema.
• Il layout usa righe e colonne Bootstrap 5, quindi un tema Bootstrap 5 si allinea con esso. Con qualsiasi altro tema, vai in DXPR Studio > DXPR Builder > Impostazioni generali e imposta File Bootstrap esterni su Bootstrap 5.
• Ogni elemento ha una classe per tipo, come az-card o az-button, e quasi tutti hanno anche az-element; vedi Architettura CSS.

Aggiungere classi all’editor

Nell’info.yml del tema

Elenca le classi sotto dxpr_builder_classes nell’.info.yml del tuo tema. Appaiono nell’elenco Classi HTML di ogni elemento, in un gruppo di opzioni con il nome del tema, mentre il tema è abilitato:

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

Da un modulo

Implementa hook_dxpr_builder_classes_alter(). Il nome deve finire con _alter; vedi Riferimento API hook.

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

Stili del pulsante

L’elemento Pulsante offre gli stili Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light e Dark. L’elenco è fisso nell’editor; l’hook delle cartelle dei pulsanti non lo cambia. Per dare ai pulsanti l’aspetto del tuo marchio, personalizza le classi btn-* di Bootstrap nel tuo tema, o aggiungi la tua classe tramite Classi HTML.

Override CSS

Sovrascrivi l’output del builder nel CSS del tuo tema:

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

Le impostazioni che un redattore fa nella scheda Stile sono scritte come stili inline. Gli stili inline hanno la precedenza sulle regole del tema che non usano !important, quindi usa il CSS del tema per i valori predefiniti e lascia che i redattori li sovrascrivano per elemento.

L’editor e il tuo tema

L’editor gira sulla pagina dove è mostrato il campo, quindi dentro il tuo tema front-end, non nel tema di amministrazione. Le sue barre di controllo, menu e finestre di dialogo portano la classe dxpr-builder-ui e caricano il loro foglio di stile, dxpr_builder_backend.css. Le regole del tema che puntano a selettori ampi come button o .modal possono comunque raggiungerli; limita le tue regole alle regioni di contenuto per evitarlo.