Dai stile ai contenuti del builder con il CSS del tuo tema.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

I contenuti di DXPR Builder fanno parte della pagina renderizzata dal tuo tema, quindi il CSS del tuo tema gli dà stile nell’editor e nella pagina pubblicata. Usa questa pagina quando un aspetto deve ripetersi su molti elementi o pagine, o quando le impostazioni degli elementi non riescono a produrlo. Finisci con un foglio di stile nel tuo tema e una classe che gli editor possono applicare. Per un singolo elemento, usa la sua finestra delle impostazioni.

Prima di iniziare

  • Serve accesso ai file del tuo tema e un modo per distribuirli.
  • Usa un tema personalizzato o un sotto-tema. Un aggiornamento di un tema contribuito ne sostituisce i file, e il tuo CSS con essi.

Configurazione

  1. Crea css/custom.css nella cartella del tuo tema, ad esempio themes/custom/mytheme/css/custom.css.

  2. Dichiara il file in mytheme.libraries.yml:

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

  3. Carica la libreria su ogni pagina da mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. Scrivi una regola per un nome di classe tuo:

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

  5. Svuota la cache in Configuration > Development > Performance (/admin/config/development/performance) con Clear all caches, oppure esegui drush cr.

  6. Nel builder, apri le impostazioni di una Section e aggiungi brand-hero in HTML classes. ID HTML e classi mostra come digitare una classe tua.

Gli editor possono anche scegliere la classe dall’elenco HTML classes una volta che il tuo tema la elenca lì; vedi Classi di utilità.

Cosa vedrai

La sezione prende il gradiente e il testo bianco appena aggiungi la classe, perché l’editor gira sulla pagina renderizzata dal tuo tema. I visitatori vedono lo stesso dopo che salvi la pagina. La classe è memorizzata nell’HTML della pagina, quindi cambiare la regola in seguito aggiorna ogni elemento che la ha.

Classi scritte da DXPR Builder

La tua classe è il bersaglio più sicuro. Anche queste classi sono nell’HTML salvato:

Selettore Corrisponde
.az-container il wrapper di ogni campo DXPR Builder; ha anche .dxpr-editor mentre qualcuno lo modifica
.az-section ogni Section; dentro c’è un .container, o .container-fluid quando Full width è attivo
.row ogni Row; DXPR Builder usa la classe propria di Bootstrap e non aggiunge az-row
.col-* ogni colonna, ad esempio .col-12.col-md-6; non esiste az-column
.az-text, .az-image, .az-button, .az-card un tipo di elemento: az- più il nome dell’elemento, come .az-separator per il Divider
.az-element la maggior parte degli elementi di contenuto, ma non Image, Icon o Button

Il pannello Style scrive attributi style inline, che battono una regola di classe sulla stessa proprietà. Le classi di utilità Bootstrap sono marcate !important e battono entrambi.

Se non vedi lo stile

  • La classe è sull’elemento, ma niente cambia. La libreria non è caricata, oppure la cache contiene ancora il vecchio CSS. Verifica che mytheme.info.yml elenchi la libreria, poi svuota le cache in /admin/config/development/performance.
  • Solo alcune proprietà si applicano. Un valore del pannello Style sulla stessa proprietà vince. Azzera quel valore nel pannello Style dell’elemento, oppure sposta l’intero aspetto nella tua classe.
  • Lo stile si vede nell’editor ma non per i visitatori. Apply text format filters to frontend content è attivo, e il formato di testo del campo rimuove gli attributi class. Disattivalo in Text Filters in /admin/dxpr_studio/dxpr_builder/settings, oppure consenti le classi nel formato.
  • Una regola per .az-row o .az-column non trova mai corrispondenze. DXPR Builder non scrive quelle classi. Punta a .row, alle classi .col-* o alla tua classe.

Prossimi passi