Creare un sottotema DXPR Theme (Drupal 11).

Impara DXPR ThemeCreare un sub-tema

DXPR Theme cambia colori, font, header, spaziature e layout dal suo pannello delle impostazioni, così la maggior parte dei siti non ha mai bisogno di una riga di CSS. Un sottotema serve per il resto: il tuo foglio di stile, gli override dei template, librerie extra o una palette di colori distribuita con il codice. Il sottotema eredita ogni foglio di stile e template di DXPR Theme, ha le sue impostazioni e gli aggiornamenti di DXPR Theme non lo toccano.

Questa guida copre DXPR Theme 8.2 su Drupal 10.3 e Drupal 11. Il kit di partenza che usa è dentro il tema in dxpr_theme/dxpr_theme_STARTERKIT; il comando generate-theme del core di Drupal non è usato, perché DXPR Theme porta il suo kit di partenza e il suo comando.

Prima di iniziare

Aggiungi DXPR Theme e attiva il suo modulo helper, di cui il tema ha bisogno prima che Drupal lo installi:

composer require drupal/dxpr_theme
drush en dxpr_theme_helper

1. Genera il sottotema dal kit di partenza

Il modo più rapido è il comando Drush fornito da DXPR Theme Helper. Eseguilo dalla root del progetto: valida il nome macchina, copia il kit di partenza in themes/custom e rinomina tutto per te:

drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"

Senza argomenti il comando chiede entrambi i nomi. Senza Drush, usa lo script distribuito con il tema: spostati in web/themes/contrib/dxpr_theme, rendi eseguibili gli script una volta con chmod +x scripts/*, esegui ./scripts/create_subtheme.sh e inserisci il nome leggibile e il nome macchina quando richiesti. Lo script funziona solo da quella cartella.

In entrambi i casi ottieni web/themes/custom/northwind_theme, con i file e la configurazione del kit di partenza rinominati con il tuo nome macchina e il segnaposto THEMETITLE sostituito nei file info e schema.

2. Attivalo e salva le impostazioni una volta

  1. Vai ad Aspetto e scegli Installa e imposta come predefinito per il tuo sottotema.
  2. Apri le Impostazioni del sottotema e premi Salva configurazione senza cambiare nulla.

Quel primo salvataggio genera il foglio di stile delle impostazioni per il nuovo tema. Il sottotema parte dalle impostazioni predefinite del kit di partenza, non da quelle impostate in DXPR Theme. Per riportarle, esportale da DXPR Theme e importale nel sottotema:

drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme

Da quel momento il pannello funziona esattamente come per DXPR Theme: colori, tipografia, header, footer e spaziature appartengono al sottotema.

Mantieni le regioni del sottotema identiche a quelle del tema base. Il kit di partenza dichiara le stesse quattordici regioni di DXPR Theme, e l’opzione Nascondi regioni di DXPR Theme Helper sui contenuti le indica per nome.

3. Cosa ti dà il kit di partenza

  • northwind_theme.info.yml: base theme: dxpr_theme, le regioni e una libreria, global-styling, che carica il tuo foglio di stile. Un blocco libraries-override commentato elenca le librerie di DXPR Theme che più probabilmente disattiverai, da dxpr_theme/bootstrap-5 a dxpr_theme/helper-classes.
  • css/dxpr_theme_subtheme.css: caricato in ogni pagina dopo i fogli di stile del tema. Il tuo CSS va qui.
  • templates/: vuoto a parte un README. Copia qui un template da dxpr_theme/templates per farne l’override.
  • config/install e config/schema: le impostazioni predefinite e il loro schema, rinominati per il tuo tema.
  • color-settings.json: le tue palette di colori nominate, mostrate nell’elenco delle combinazioni accanto a quelle integrate.
  • logo.svg, favicon.ico, screenshot.png: sostituiscili con i tuoi.

4. Scrivi CSS che segue le impostazioni

DXPR Theme scrive le sue impostazioni in variabili CSS: --dxt-color-* per la palette e --dxt-setting-* per tipografia, spaziature e layout, e le mappa sulle variabili --bs-* di Bootstrap. Usa le variabili nel tuo foglio di stile invece di valori fissi, e il tuo CSS continua a seguire il pannello quando qualcuno cambia un colore o un font.

/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}

Il colore base, i colori d’accento, testo, titoli, link, card e footer hanno tutti una variabile. L’elenco completo è nel README del tema sotto CSS Custom Properties (Variables) Reference.

5. Fai override di template e librerie

Copia il template da cambiare da themes/contrib/dxpr_theme/templates nella cartella templates del tuo sottotema, mantieni il nome del file, modificalo e svuota le cache. Drupal sceglie prima la copia del sottotema.

Per rimuovere un foglio di stile o uno script del tema base, decommenta la riga libraries-override: nel tuo file info insieme alle righe delle librerie da rimuovere; sono già impostate su false. Per aggiungere le tue, dichiara altre librerie in northwind_theme.libraries.yml ed elencale sotto libraries nel file info, come fa il kit di partenza per global-styling.

6. Dai le tue classi agli editor in DXPR Builder

Le classi dichiarate sotto dxpr_builder_classes: nel file info del sottotema appaiono nel selettore di classi di DXPR Builder, così gli editor applicano la tua banda scura o il tuo pannello in vetro senza digitare un nome di classe. Definisci la classe in dxpr_theme_subtheme.css, limitata agli elementi di DXPR Builder a cui è destinata.

7. Distribuisci una palette di colori con il tema

Aggiungi schemi nominati a color-settings.json nella root del sottotema. Ogni schema imposta le stesse chiavi usate dal pannello: base, basetext, link, accent1, accent2, text, headings, card, footer, header, pagetitle e le altre. Lo schema appare nell’elenco delle combinazioni del form delle impostazioni, così un sito passa alla palette del brand in un clic.

8. Aggiornare DXPR Theme in seguito

  1. Aggiorna il tema base con Composer: composer update drupal/dxpr_theme --with-dependencies.
  2. Esegui gli aggiornamenti del database e svuota le cache.
  3. Apri il form delle impostazioni del sottotema e salvalo ancora una volta, così il foglio di stile delle impostazioni è rigenerato con le eventuali nuove variabili.
  4. Leggi le note di release per modifiche a template o regioni e confronta ogni template di cui hai fatto l’override con la nuova versione.

Lascia che il tuo agente AI faccia la temizzazione

DXPR Theme 8.1.1 e versioni successive distribuiscono una skill per agenti. Esegui drush dxt:setup-ai nel tuo progetto e il tuo agente di programmazione (Claude Code, Codex, Gemini CLI o Cursor) impara le impostazioni del tema e il loro significato. Descrivi il brand e l’agente imposta colori, tipografia, layout dell’header e spaziature con le stesse impostazioni scritte dal pannello, da revisionare sul sito. Può anche creare il sottotema con drush dxt:subtheme:create.

La skill di DXPR Builder fa lo stesso per le pagine, e Drush Webmaster per contenuti e viste. Vedi le skill per agenti in azione.

Domande sui sottotemi di DXPR Theme

No. Colori, font, header, footer, spaziature e layout sono impostazioni nel pannello di DXPR Theme. Un sottotema serve solo per il tuo CSS, gli override dei template, librerie extra o una palette distribuita con il codice.

Sì. Dopo drush dxt:setup-ai l’agente conosce le impostazioni del tema e le cambia da un brief, e può creare il sottotema stesso con drush dxt:subtheme:create. Tu revisioni il risultato sul sito.

Le stesse di DXPR Theme 8.2: Drupal 10.3 e successivi, e Drupal 11. Il file info del kit di partenza dichiara anche versioni precedenti, ma DXPR Theme 8.2 dipende da moduli che richiedono Drupal 10.3.

No. Composer sostituisce solo themes/contrib/dxpr_theme; il tuo sottotema vive in themes/custom. Salva il form delle impostazioni del sottotema una volta dopo un aggiornamento, così il suo foglio di stile recepisce le nuove variabili.