Bootstrap 4 in Drupal 8/9 con Bootstrap Barrio

Useremo Bootstrap 4 in Drupal 8/9 con Bootstrap Barrio. Il tema Bootstrap Barrio per Drupal 8/9 integra Bootstrap 4 (o Bootstrap 5 se lo desideri) con il tuo sito Drupal.

Bootstrap è un framework molto popolare per la creazione di siti Web. Fornisce a progettisti e sviluppatori un linguaggio comune per comunicare, rendendo il processo di sviluppo molto più semplice.

La creazione di un sottotema di Barrio è un processo semplice. Questo tutorial esplorerà le opzioni di configurazione di base del tema, che sono gestite attraverso un'interfaccia utente grafica completa.

Continua a leggere per sapere come!

Passaggio n. 1.- Installa il tema

Prima di iniziare, assicurati che il tuo sito contenga almeno un articolo, in modo da poter fare un confronto dopo aver modificato le impostazioni del tema. Posiziona anche un blocco all'interno della barra laterale della regione per secondo (Struttura > Layout del blocco > Posiziona blocco).

• Apri l'applicazione terminale del tuo sistema operativo.
• Posiziona il cursore nella radice della tua installazione di Drupal.
• Digita : composer require drupal/bootstrap_barrio

Questo scaricherà l'ultima versione stabile del tema su: /web/themes/contrib/bootstrap_barrio

Passaggio 2.- Crea un sottotema

• Posiziona il cursore sulla directory del tema bootstrap_barrio
• Tipo :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

Questo renderà eseguibile lo script chiamato create_subtheme all'interno della cartella degli script e lo eseguirà.

Lo script chiederà un nome macchina e un nome descrittivo per il tuo sottotema personalizzato.

Inserisci i valori più adatti a te. Ricorda che il nome della macchina deve essere minuscolo e non può contenere spazi.

Questo passaggio è facoltativo:

• Apri la directory del tuo sottotema (/web/themes/custom/mytheme) in un editor di codice
• Sostituisci tutte le istanze di "Bootstrap Barrio" con "Nome del tuo tema".
• Salva tutti i file

Qui stiamo solo cambiando il testo descrittivo, quindi non ci sarebbe alcun problema se lo lasciassi così com'è.

Passaggio 3.- Le impostazioni di Bootstrap Barrio

• Fai clic su Aspetto nel back-end del tuo sito Drupal
• Scorri verso il basso fino al tuo tema personalizzato
• Fare clic su Installa e imposta come predefinito

Una volta installato il tema,

• Fare clic sul collegamento Impostazioni del tema

Vedrai un gruppo di schede verticali sul lato sinistro dello schermo con le seguenti opzioni:

1. Layout (scheda attiva)
2. Componenti
3. Apporre
4. Spia di scorrimento
5. Caratteri e icone
6. Colori

Disposizione

Per impostazione predefinita, la scheda "Layout" è attiva. La prima opzione `Contenitore` specifica se gli elementi del tuo sito avranno una larghezza fissa, o al contrario verranno visualizzati su tutta la dimensione dello schermo. Lascia questa opzione intatta ormai.

All'interno della sezione `Regione` è possibile assegnare classi CSS personalizzate alle regioni del sito.

• Aggiungi la tua classe personalizzata a una determinata regione

• Chiudi la sezione "Regione".
• Apri `Posizione barra laterale`
• Cambia il valore di "Posizione barre laterali" su Sinistra
• Apri 'Primo layout barra laterale' e 'Primo layout barra laterale'
• Modificare i valori rispettivamente in 3 colonne e 2 colonne

Componenti

• Fare clic sulla scheda verticale "Componenti".
• Modificare l'elemento Pulsante in formato struttura
• Seleziona Applica lo stile img-fluid a tutte le immagini di contenuto

Ciò renderà le immagini che inserisci tramite il pulsante immagine dell'editor di contenuti, reattive per impostazione predefinita. L'immagine verrà ridimensionata per adattarsi alle dimensioni dello schermo.

La sezione "Struttura della barra di navigazione" si occupa della dimensione del contenitore della barra di navigazione. Devi distinguere tra due barre di navigazione (navbar-top e navbar). Navbar è il menu di navigazione principale del tuo sito.

• Cambia la posizione della barra di navigazione su Fondo fisso e il colore del collegamento della barra di navigazione su Scuro
• Seleziona Barra di navigazione scorrevole nella sezione "Comportamento barra di navigazione", per visualizzare un menu principale scorrevole su schermi piccoli

Le ultime 3 sezioni dell'opzione di configurazione 'Componenti' si riferiscono alla posizione dei messaggi consegnati dal sistema di messaggi interno di Drupal, alle schede per le attività locali (come la scheda di modifica del contenuto) e all'aspetto degli elementi del modulo. Lascia intatte queste opzioni.

Apporre

Con affix è possibile fissare un elemento, cioè impostare il valore della proprietà CSS position a fixed.

Spia pergamena

Scrollspy serve per aggiornare automaticamente i link di un menu di navigazione, in base alla posizione del cursore, cioè se si scorre in alto o in basso nel sito. Questo argomento sarà trattato in un tutorial futuro.

Caratteri e icone

Qui hai opzioni per scegliere tra diverse combinazioni di caratteri di Google Fonts per il testo del tuo sito. Inoltre, puoi scegliere tra set di icone predefinite da utilizzare sui tuoi post.

• Scegli la combinazione di caratteri e il set di icone di tuo gradimento

Colori

Hai qui le opzioni per personalizzare il colore dei messaggi interni di Drupal. Ci sono opzioni per personalizzare le tabelle del sito, ad esempio quelle generate con il modulo Visualizzazioni.

Se continui a scorrere verso il basso, troverai lo "Schema colori" per il tuo sottotema. È possibile personalizzare i colori del testo e dello sfondo delle aree tematiche predefinite.

Puoi personalizzare il colore di ogni elemento a tuo piacimento e bloccarlo, utilizzando l'icona del lucchetto.

Visualizzazione elemento pagina, immagine logo e favicon

Queste sono opzioni predefinite in tutti i temi Drupal.

Carica libreria

Puoi scegliere tra più librerie Bootswatch online pronte all'uso per migliorare l'aspetto del tuo tema con un solo clic. Vale la pena controllare queste opzioni.

È possibile scegliere qui se si desidera caricare Bootstrap (Bootstrap CSS e JS) localmente o tramite CDN. Questa configurazione non deve essere modificata qui. È molto meglio cambiare il codice nel file .info.yml .

• Fare clic su Salva configurazione

Dai un'occhiata al tuo sito. Questo tutorial non intende insegnarti la progettazione dell'interfaccia utente, ma piuttosto spiegare le possibilità disponibili con il tema Barrio.

Tuttavia, ora puoi iniziare da un design e provare ad adattare il tema ad esso.

Spero che questo tutorial ti sia piaciuto. Grazie per aver letto!