LIBRO WEBMASTER... Strategie per programmare siti web e portali...Acquistalo su AMAZON CLICCA libro per webmaster

Bootstrap per Drupal – configurare il Subtheme

Bootstrap per Drupal

bootstrap per drupalè il tutorial che vedremo in questo articolo del Blog. In particolare parleremo di Bootstrap per Drupal 8, anche se la versione 7 di Drupal (non dimentichiamolo) ha raggiunto un buon grado di solidità e utilizzo e molti concetti qui descritti sono del tutto simili.

Ricordiamo che Bootstrap è un Framework che trova applicazione in diversi settori del web ed è molto utilizzato in HTML, WordPress, Joomla, e appunto Drupal. Molti temi e template in circolazione sono creati con questo famoso Framework per le doti di flessibilità e praticità che si riesce a raggiungere. Partendo da un Tema base (come faremo anche noi con Drupal 8) si riescono a creare temi sofisticati e adatti ad ogni esigenza grazie agli strumenti di cui il Framework Bootstrap dispone.

Nel tutorial parleremo di Bootstrap 3 che attualmente è la versione stabile del framework in attesa della versione 4 ancora in sviluppo e dunque in modalità beta (al momento in cui scriviamo questo tutorial).

Il Framework con il tema di base è prelevabile dal seguente link:

https://www.drupal.org/project/bootstrap

Naturalmente la versione che ci riguarda è quella compatibile con la versione 8 di drupal:

Installiamo il Tema utilizzando la procedura standard di Drupal 8 dalla voce di menu Aspetto (apparence in inglese):

Bootstrap per Drupal

Una volta installato il tema e impostato come predefinito troveremo la versione base pronta per essere utilizzata e modificata secondo le nostre necessità. Bootstrap dispone di un Tema base con diverse regioni per blocchi che possono essere ulteriormente modificate. Il tema installato ha tutte le caratteristiche e gli strumenti di Bootstrap ed è perfettamente responsive e personalizzabile.

Bootstrap per Drupal

A questo punto non basta e per esigenze pratiche nasce la necessità di creare un sotto tema (SubTheme) per mezzo del quale effettuare tutte le nostre modifiche, che andranno ad incidere soprattutto sul file css di base del tema, senza intaccare i file originali del Framework. Infatti se si lavorasse sui file originali del tema che abbiamo appena installato tutte le modifiche apportare risulterebbero azzerate ad un futuro aggiornamento del Framework (lo stesso problema esiste ad esempio in WordPress e può essere risolto con la creazione di un Tema Child).

Raggiungiamo adesso la cartella Bootstrap all’interno dei temi Drupal (via FTP e dunque con Filezilla) e apriamo la cartella “Starterkits” che troveremo al suo interno.

Bootstrap per Drupal

All’interno troveremo alcune cartelle, tra cui “cdn” e “less“. Copiamo la cartella “cdn” e portiamola allo stesso livello della cartella “Bootstrap” del tema installato precedentemente:

Bootstrap per Drupal

Rinominiamo la cartella “cdn” con un nome appropriato (ad esempio come indicato nell’immagine successiva):

Bootstrap per Drupal

Entriamo all’interno di questa cartella e portiamoci sul file selezionato (immagine successiva):

Rinominiamo questo file con lo stesso nome che abbiamo assegnato al subtheme di bootstrap seguito da info (immagine successiva).

Allo stesso modo rinominiamo i File “THEMENAME” in “bootstrap_subtheme” e “THEMENAME.libraries” in “bootstrap_subtheme.libraries.yml

Con il nostro editor preferito apriamo il file “bootstrap_subtheme.info.yml” e nella parte inferiore di questo file andiamo a modificare la parola “THEMENAME” con il nome assegnato al nostro subtheme (immagine successiva):

In questo file si trova lo schema del tema installato con le regioni dove configurare i blocchi che andremo ad inserire. E’ un file molto importante che può essere ulteriormente modificato per aggiungere o cancellare le regioni del nostro layout. Possiamo modificare eventualmente altri parametri come ad esempio la descrizione (ma non è obbligatorio).

Inoltre occorre entrare nella cartella Config del subtheme e modificare i due file che troveremo nelle sottocartelle install e schema con il nome attribuito al nostro subtheme. Quindi:

config/install/THEMENAME.settings.yml in config/install/bootstrap_subtheme.settings.yml

config/schema/THEMENAME.schema.yml in config/schema/bootstrap_subtheme.schema.yml

A questo punto nella parte inferiore della voce “Aspetto” troveremo il nostro subtheme che dobbiamo attivare come predefinito.

Possiamo adesso procedere a personalizzare il nostro tema e aggiornare contemporaneamente le versioni future del Framework Bootstrap per Drupal.


Molti utenti hanno scelto di approfondire l’argomento con le video lezioni del corso DRUPAL 8 e 7

 

 

Articolo letto (99) volte

Sono Daniele Venditti (Responsabile di Progettimultimediali.com e Corsi-online.it) mi occupo di formazione informatica dal 2001. Ho conseguito anni di specializzazione in sviluppo siti web con una serie di studi predisposti alle nuove tecnologie…. ho svolto dal 2001 ad oggi più di 8.000 ore di corsi tra preparazione al conseguimento della patente europea del computer (anche come esaminatore AICA) e corsi specifici di grafica web e corsi multimediali. Ho lavorato per grandi società del settore informatico come la Zucchetti Formazione (Milano – Perugia – Frosinone), Media e Services (Frosinone), Scuola di Formazione (Frosinone), e collaborato con scuole di formazione pubbliche nel settore della new ecomomy per la formazione finanziata da fondi regionali e comunitari. Ho dunque maturato una vasta esperienza nella realizzazione di siti web, produzioni multimediali come grafica e video on-line. Ritengo la Formazione online un aspetto essenziale per l'accrescimento professionale.

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>