6.2. Di cosa è composto un tema in Drupal 8. Panoramica del tema Stark.

17/10/2025, by Ivan

In Drupal 7 era possibile creare rapidamente e facilmente un sotto-tema basato su Zen e iniziare a costruire il proprio sito web. A partire da Drupal 8 esistono diversi temi di base che permettono di creare i propri temi personalizzati. Tuttavia, prima di creare un sotto-tema, è importante capire dove si trova ogni elemento all’interno della struttura del tema.

Gli sviluppatori di Drupal consigliano di prendere come esempio il tema Stark. Questo tema è stato incluso in Drupal proprio per mostrare come è strutturato un tema. Vediamo quindi cosa contiene al suo interno.

File stark.info.yml

Iniziamo la nostra analisi dal file stark.info.yml. In Drupal 7, le informazioni sul tema venivano memorizzate nei file .info. In Drupal 8 viene invece utilizzato il formato YML, quindi il file ora si chiama info.yml. In YAML, le chiavi e i valori sono separati da due punti :.

Nome del tema:

name: Stark

Il tipo di progetto può essere un tema o un modulo. In questo caso si tratta di un tema:

type: theme

La descrizione mostrata nella pagina dei temi:

description: 'Un tema volutamente semplice, senza stile, per mostrare l’HTML e il CSS predefiniti di Drupal. Impara a creare un tema personalizzato partendo da Stark nella guida al theming.'

Raggruppamento dei progetti Drupal per comodità, ad esempio per visualizzare i moduli o i temi in categorie specifiche:

package: Core

La versione, per i moduli contrib, viene impostata automaticamente, quindi qui troviamo una variabile commentata:

# version: VERSION

La versione del core Drupal è anch’essa commentata e viene aggiunta automaticamente da drupal.org:

Per Drupal 8.8 e versioni successive:

core: 8.x
core_version_requirement: ^8 || ^9

Per Drupal 8.8 e versioni precedenti:

# core: 8.x

Il tema non eredita alcun tema di base (indicato con false):

base theme: false

Infine, un blocco informativo aggiunto automaticamente da Drupal.org con la versione e i metadati:

# Informazioni aggiunte dallo script di packaging di Drupal.org il 03-02-2016
version: '8.0.3'
core: '8.x'
project: 'drupal'
datestamp: 1454490380

File stark.libraries.yml

Qui vengono inclusi i file CSS e JS del tema:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}

Possiamo anche includere file JavaScript:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}

È importante notare che jQuery non è più incluso automaticamente. Se utilizzi jQuery nei tuoi script personalizzati, devi aggiungerlo manualmente come dipendenza del tema:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Inoltre, è possibile specificare per ciascun file CSS se deve essere sempre visualizzato o solo nella versione di stampa:

global-styling:
  version: VERSION
  css:
    base:      
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

File di descrizione README.txt e screenshot.png

Questi file mostrano l’aspetto del tema e forniscono informazioni sull’installazione e l’uso, se ci sono particolarità o istruzioni aggiuntive.

File logo.svg

Il file del logo viene automaticamente collegato al tema se si trova nella directory principale del tema. È comunque possibile caricare un logo personalizzato tramite le impostazioni del tema.

Cartella config e file stark.schema.yml

Un altro file YAML del tema, nel quale vengono memorizzate le impostazioni del tema. Per il tema Stark, contiene semplicemente il titolo della pagina delle impostazioni del tema.

Cartelle css e js

In queste cartelle sono memorizzati i file CSS e JavaScript personalizzati. Ricorda che non basta inserire un file nella cartella per includerlo: ogni file deve essere esplicitamente registrato nel file stark.libraries.yml.

File stark.breakpoints.yml

Questo file definisce le dimensioni dello schermo per le versioni mobili del sito. Si tratta di una nuova funzionalità di Drupal. Ne parleremo in modo approfondito in un prossimo articolo.

stark.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
stark.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 480px) and (max-width: 959px)'
  weight: 1
  multipliers:
    - 1x
stark.wide:
  label: wide
  mediaQuery: 'all and (min-width: 960px)'
  weight: 2
  multipliers:
    - 1x

Questo è quindi il tema Stark, utile per familiarizzare con la struttura dei temi in Drupal. Nel prossimo articolo vedremo come creare un tema personalizzato basato sul tema Stable.

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs