Moodle: personalizzare il tema Boost

In questa lezione vedremo come customizzare il tema Boost di Moodle, una scelta frequente e tutto sommato poco costosa. Il tema è già a nostra disposizione nella piattaforma, se le personalizzazioni che vogliamo intraprendere riguardano logo, immagini di sfondo, colori e poco altro, probabilmente è la strada più veloce per ottenere un prodotto finito.

Da un punto di vista pratico questa customizzazione prevede di operare con CSS, o meglio, per essere precisi, con SASS. Moodle dispone infatti di un compilatore SASS (o per meglio dire SCSS): dal punto di vista dello sviluppo abbiamo solo da guadagnare, inoltre possiamo ovviamente caricare immagini per il logo e per lo sfondo.

Inseriamo il logo. Quest'operazione in realtà è indipendente dal tema scelto. Entriamo nell'area di amministrazione del sito, scegliamo la tab "Aspetto" e quindi il link al logo, carichiamo le due versioni previste per logo grande e piccolo e salviamo le modifiche: in alto a sinistra nella pagina comparirà il logo inserito. Si può notare in questa fase che Boost è il tema in uso nell'area di amministrazione.

Per modificare il tema vero e proprio dobbiamo invece scegliere il link a Boost sempre nella tab "Aspetto" del pannello di amministrazione. Iniziamo con il caricare l'immagine di sfondo, proseguiamo con la selezione del colore del brand, infine i presets.

Cosa sono i presets di Boost? Un preset è un file SCSS progettato per essere aggiunto al tema, oppure a un suo tema figlio. Combina i file SCSS Bootstrap 4 con i file SCSS Moodle richiesti e aggiunge un livello di personalizzazione.

I file preimpostati possono essere caricati nelle impostazioni di amministrazione per il tema e quindi scelti da un elenco di preset installati. Nello specifico un file preset è composto da tre sezioni, una delle quali per la dichiarazione delle variabili:

$card-bg: #FF0000;

Questo significa che andiamo a sovrascrivere le variabili standard di Moodle e Bootstrap e, dato che sono state definite in precedenza, verranno utilizzati i valori indicati. Ovviamente, per ottenere il risultato atteso è necessario conoscere i nomi delle variabili:

Poi abbiamo la sezione degli import:

@import "moodle";
@import "bootstrap";
@import "fontawesome";

Il primo riguarda il core di Moodle, il secondo Bootstrap, versione 4, il terzo Fontawesome. A questo punto manca solo la terza sezione che conterrà le regole da applicare:

body {
    background-color: $primary;
}

La scelta di Bootstrap 4 comporta alcune conseguenze, come per esempio l'uso di CSS flexbox per la costruzione del layout. Altro dato da tenere presente sono i breakpoints della nuova versione:

.col-*  < 576px
.col-sm-* >= 576px
.col-md-* >= 768px
.col-lg-* >= 992px
.col-xl-* >= 1200px

Tutti gli usi di * * -xs- * sono stati eliminati. Quindi quello che prima era col-xs-6 dovrebbe ora essere scritto col-6. * -md- * è diventato * -lg- * e * -lg- * è diventato * -xl- *.

Boostrap 4 utilizza uno stack di caratteri nativi che seleziona la migliore famiglia di font per ogni sistema operativo e dispositivo. Per il ridimensionamento dei caratteri viene utilizzato il tipo predefinito del browser (in genere 16px). Questa variabile può essere modificata tramite $font-size-base. Di default Boost usa 0.9375rem che calcola a 15px nella maggior parte dei browser.

Se vogliamo avvicinarci al codice del nostro tema dobbiamo andare a cercare all'interno della cartella theme e quindi boost. Qui sono contenuti tutti i file del nostro tema, iniziare a conoscerli ci servirà se vorremo creare un nostro tema basato su Boost.

L'idea di modificare direttamente questi file potrebbe non essere invece consigliabile: infatti in caso di update del tema rischieremmo di perdere le modifiche effettuate o di doverle ricreare. La strada consigliata sarà invece quella di creare un tema clonando Boost.