Creare un subtheme in Drupal 7

Ritratto di Vanni

Perché creare un subtheme?

Creare un subtheme ha diversi vantaggi ed è una tecnica sempre consigliata che Drupal ci offre.

  • Attraverso di esso, possiamo andare a modificare (a livello grafico e di codice) una copia del tema originale, evitando così di andare a fare qualche guaio che poi è difficile da correggere.
  • Chi vuole creare diversi esempi di modifiche grafiche ad uno stesso tema per poter, poi, scegliere la migliore, può creare un sottotema per ogni variazione e poi abilitandoli a turno può decidere quale sia il più indicato alle proprie esigenze.
  • E’ possibile, inoltre, utilizzare diversi sottotemi all’interno di un multisito, magari per apportare lievi differenze grafiche tra le varie sottocartelle o sottodomini.
  • Altro vantaggio, è che quando si deve aggiornare il tema del sito, tutte le variazioni che abbiamo apportato tramite il nostro sub tema non vengono intaccate.
  • Possiamo creare anche sottotemi di un sottotema.
  • Possiamo aggiungere delle nuove regioni
  • Possiamo usare variazioni di uno stesso tema (diversi sottotemi) assieme al modulo ThemeKey, per diversificare i contenuti del sito 

Per modificare l’aspetto grafico delle nostre pagine web vedi anche: modifica aspetto HTML-CSS. Per creare un tema da zero: Tema custom.

Come creare un subtheme in Drupal 7

In questa pagina porterò l’esempio di un subtheme derivato dal famoso tema Bartik. Per qualsiasi approfondimento rimando alla guida ufficiale.

  • Creare una cartella che rinomineremo con il nome del sottotema (nel mio esempio: sub_bartik), il nome deve iniziare con una lettera e può contenere solo lettere minuscole, numeri e under score
  • inserire la cartella in sites/all/themes
  • con un editor di testo, creare un file chiamato nome_subtheme.info (es: sub_bartik.info)
  • per compilare questo file, possiamo copiare le prime righe dal file .info del tema originale, dando un nome al nuovo tema e aggiungendo la stringa “base theme = nome_tema”,  quindi nel mio esempio:
name = sub_bartik
description =
core = 7.x
base theme = bartik
  • se il tema che stiamo copiando supporta il modulo “color” dobbiamo inserire la stringa: stylesheets[all][] = css/colors.css e poi si deve copiare/incollare la cartella “color” dalla directory del tema originale a quella del sottotema e il file color.css nella certella CSS
  • tutti i fogli di stile vengono ereditati dal nuovo tema, quindi non serve che li inseriamo nel file .info, però possiamo aggiungerne di nuovi , nel mio esempio:  stylesheets[all][] = css/nuovo.css e poi creo una cartella denominata “CSS” in cui inserirò il file nuovo.css (può essere dato qualsiasi nome), in questo file ho inserito il codice: p {color:red}
  • siccome tutti i fogli di stile vengono ereditati, se si vuole “disabilitarne” uno, basta dichiararlo come visto sopra nel file .info e poi si crea un foglio bianco da inserire nella cartella CSS e a cui si deve dare il nome del file da “bloccare”
  • se il tema da copiare ha dei file Javascript essi vengono ereditati, ma se si vogliono apportare modifiche ci si deve comportare allo stesso modo dei file css
  • anche il file template.php viene ereditato e quindi in linea teorica non serve dichiararlo, però è bene crearne una copia se si devono aggiungere o modificare delle funzioni; se si copia il file template.php si devono rinominare le funzioni al suo interno con il nome del sottotema altrimenti PHP genera un errore (es: da “function bartik_preprocess_maintenance_page(&$variables)” a “function sub_bartik_preprocess_maintenance_page(&$variables)” 
  • anche i file “tpl.php” vengono ereditati, però se si vogliono apportare delle modifiche, si devono ricopiare con lo stesso nome nella directory del sub tema
  • le regioni del tema non vengono ereditate, quindi nel nuovo file .info si devono ricopiare dall’originale
  • alla fine il mio file sub_bartik.info risulta essere così:
name = sub_bartik
description =
core = 7.x
base theme = bartik

stylesheets[all][] = css/colors.css
stylesheets[all][] = css/nuovo.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted
regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second
regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last
regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

Cosa non viene ereditato dal subtheme

Quasi tutto viene ereditato dal sottotema, tranne:

  • il modulo “color” (abbiamo visto come intervenire)
  • le regioni  (basta ricopiarle)
  • la versione del core

Esempio di funzionamento di un sottotema

Preparata la cartella del sottotema come descritto precedentemente mi trovo in questa situazione

creazione di una cartella subtheme all'interno della directory dei temi drupal

Nella cartella CSS ho 2 file

file css ereditati dal tema principale al subtheme e aggiunta di nuovi file css

Il file nuovo.css contiene solo il codice: p {color:red} mentre il file colors.css è stato copiato dall’originale.

Nella cartella “color” ho il contenuto copiato dal tema originale.

Vado in admin/appearance e abilito il nuovo tema:  sub_bartik

abilitazione del nuovo sottotema appena costruito

Vado a controllare se il nuovo sottotema è funzionante, in teoria il testo di tutti i paragrafi <p> delle pagine deve diventare rosso.

Pagina con tema Bartik originale: esempio di pagina web costruita costruita con il tema originale

Pagina con tema sub_bartik: esempio della stessa pagina web con il nuovo sottotema abilitato

Commenti

Aggiornamento subtema

Complimenti per il sito. Nonostante Drupal sia piuttosto"ostico" tanti aspetti di questo CMS mi sono stati chiariti leggendo le vostre pagine. Avrei una domanda, che potrebbe essere ingenua, ma sono una "neofita". Come si aggiorna un sottotema?

Grazie!

Ritratto di Vanni

Salve Pinky, intanto grazie

Salve Pinky, intanto grazie per i complimenti!!
Riguardo alla tua domanda, la risposta è : dipende. Dipende se il sottotema l'hai creato tu o stai usando uno della community. Ad esempio (come ho scritto sulla pagina relativa ai temi) per questo sito sto usando il tema "sky" che é un sottotema di "adaptivetheme", entrambi li ho scaricati da drupal.org ed entrambi si aggiornano allo stesso modo (vedi la pagina relativa agli aggiornamenti).
Se il sottotema l'hai creato tu allora l'aggiornamento lo decidi te, nel senso che se vuoi modificare qualcosa, apri il relativo file ed editi ció che ti serve ed il tema base non viene "toccato".
Spero di aver risposto alla tua domanda...

Aggiungi un commento

Filtered HTML

  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.

Comment

  • Elementi HTML permessi: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Linee e paragrafi vanno a capo automaticamente.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente

Plain text

  • Nessun tag HTML consentito.
  • Indirizzi web o e-mail vengono trasformati in link automaticamente
  • Linee e paragrafi vanno a capo automaticamente.
Per tutelare la vostra privacy suggerisco l'uso di un nickname o lasciare anonimo...
CAPTCHA
Questa domanda e' per testare se sei un visitatore persona e non un software che genera spam
4 + 2 =
Risolvi la semplice domanda di matematica e inserisci il risultato. Es. se e' 1 + 3 inserisci 4.