Personalizzare Moodle con CSS e JavaScript Custom

La Plugin Moodle: Estendere le Funzionalità della Piattaforma">Plugin Moodle: Estendere la Piattaforma">personalizzazione Moodle CSS e l'uso di JavaScript Moodle custom rappresentano gli strumenti più diretti per trasformare l'aspetto e il comportamento della piattaforma senza intervenire sul codice sorgente del core. Che si tratti di allineare il LMS all'identità visiva aziendale, di migliorare la user experience degli studenti o di aggiungere funzionalità frontend specifiche, il custom styling LMS consente risultati professionali con un investimento tecnico contenuto. In questa guida pratica vediamo come intervenire sul frontend Moodle in modo efficace, mantenibile e compatibile con gli aggiornamenti futuri.

Personalizzazione Moodle CSS: Dove e Come Intervenire

Moodle offre diversi punti di accesso per applicare stili CSS personalizzati, ciascuno con vantaggi e limitazioni specifiche:

SCSS nel tema (metodo raccomandato)

Il tema Boost, base di Moodle dalla versione 3.2, utilizza SCSS (Sass) che viene compilato in CSS. Il modo più strutturato per la personalizzazione Moodle CSS è creare un tema figlio di Boost e definire le variabili e gli stili nel file scss/preset/custom.scss. Questo approccio permette di sovrascrivere le variabili Bootstrap (colori primari, font, spaziature) senza duplicare codice.

Le variabili principali da personalizzare sono:

• $primary: il colore principale della piattaforma, utilizzato per header, bottoni e link
• $body-bg: il colore di sfondo delle pagine
• $font-family-base: il font principale (è possibile caricare font custom via @font-face)
• $navbar-bg: il colore della barra di navigazione superiore
• $card-bg: lo sfondo dei box contenuto, ampiamente utilizzati nell'interfaccia Moodle

CSS aggiuntivo nelle impostazioni del tema

Per interventi rapidi senza creare un tema figlio, Moodle offre il campo "SCSS grezzo" in Amministrazione del sito > Aspetto > Temi > Boost > Impostazioni avanzate. Qui è possibile inserire CSS personalizzato che verrà aggiunto dopo tutti gli altri stili. È la soluzione ideale per modifiche limitate (cambiare un colore, nascondere un elemento, regolare una spaziatura), ma diventa difficile da gestire con più di 50-100 righe di codice.

Creare un tema Moodle custom completo

Per personalizzazioni estese, la soluzione professionale è un tema Moodle custom che estende Boost. La struttura minima richiede:

• config.php: dichiara il tema, il tema padre e i fogli di stile
• version.php: versione e dipendenze del tema
• lang/en/theme_nometema.php: stringhe di localizzazione
• scss/: cartella con i file SCSS organizzati per componente
• templates/: override dei template Mustache per modificare la struttura HTML

JavaScript Moodle: Aggiungere Interattività Custom

L'uso di JavaScript Moodle custom permette di estendere le funzionalità frontend ben oltre ciò che il CSS può fare. Moodle utilizza un sistema di moduli AMD (Asynchronous Module Definition) basato su RequireJS per gestire il JavaScript.

Moduli AMD in Moodle

Il modo corretto per aggiungere JavaScript Moodle è creare moduli AMD nella cartella amd/src/ del tema o del plugin. Ogni modulo viene poi compilato con Grunt nella cartella amd/build/. Questo approccio garantisce compatibilità con il sistema di caching di Moodle e con il lazy loading dei moduli.

Un modulo AMD tipico per Moodle segue questa struttura: definisce le dipendenze (jQuery, core/ajax, core/notification), esporta una funzione init che viene chiamata quando la pagina è pronta, e contiene la logica di interazione. Per richiamarlo da PHP, si usa il metodo $PAGE->requires->js_call_amd().

Casi d'uso pratici del JavaScript custom

Ecco alcuni interventi comuni che richiedono JavaScript Moodle personalizzato:

• Dashboard interattive: grafici dinamici con Chart.js o D3.js che mostrano i progressi dello studente in tempo reale, con dati recuperati via AJAX dalle API web service di Moodle.
• Navigazione migliorata: menu laterali collassabili, breadcrumb dinamiche, scorciatoie da tastiera per utenti esperti.
• Feedback visivo immediato: animazioni di conferma quando uno studente completa un'attività, progress bar animate, countdown timer per i quiz.
• Integrazione con servizi esterni: widget che mostrano contenuti da API esterne (calendario aziendale, feed di notizie, chatbot di supporto) direttamente nell'interfaccia Moodle.
• Accessibilità migliorata: script che aggiungono funzionalità di alto contrasto, ridimensionamento del testo o lettura vocale per utenti con disabilità visive.

Personalizzazione Moodle CSS: Tecniche Avanzate

Oltre alle modifiche base di colori e font, il custom styling LMS può trasformare radicalmente l'esperienza utente:

• Layout responsive personalizzato: sovrascrivere i breakpoint Bootstrap per ottimizzare l'esperienza su dispositivi specifici. Ad esempio, per piattaforme utilizzate prevalentemente su tablet in contesti formativi aziendali, è possibile ottimizzare il layout per la risoluzione 1024x768.
• Dark mode: implementare un tema scuro con CSS custom variables e un toggle JavaScript che salva la preferenza dell'utente nel localStorage. La dark mode riduce l'affaticamento visivo nelle sessioni di studio prolungate e, su display OLED, riduce il consumo energetico del 30-40%.
• Animazioni e transizioni: transizioni CSS per il caricamento dei contenuti, hover effects sui box dei corsi, animazioni sui badge di completamento. Attenzione a rispettare la media query prefers-reduced-motion per gli utenti sensibili alle animazioni.
• Stampa ottimizzata: un foglio di stile @media print dedicato che formatta i contenuti del corso per la stampa su carta, nascondendo la navigazione e ottimizzando layout e font.

Frontend Moodle: Errori Comuni e Come Evitarli

La personalizzazione del frontend Moodle presenta insidie che possono causare problemi a lungo termine:

• Selettori troppo specifici: usare ID o catene di selettori lunghissime rende il CSS fragile e soggetto a rottura ad ogni aggiornamento. Preferire classi generiche e l'operatore !important solo come ultima risorsa.
• JavaScript inline: inserire script direttamente nei blocchi HTML o nei contenuti dei corsi bypassa il sistema di caching e può creare conflitti. Usare sempre moduli AMD.
• Ignorare il tema padre: modificare direttamente i file di Boost invece di creare un tema figlio significa perdere ogni personalizzazione al prossimo aggiornamento di Moodle.
• Non testare su mobile: oltre il 45% degli accessi a piattaforme e-learning avviene da dispositivi mobili. Ogni personalizzazione CSS deve essere verificata su almeno 3 viewport (mobile, tablet, desktop).
• Dimenticare l'accessibilità: contrasto insufficiente tra testo e sfondo, elementi interattivi troppo piccoli per il touch, assenza di focus visible sugli elementi navigabili da tastiera. Usare strumenti come Lighthouse o axe per verificare la conformità WCAG 2.1 AA.

Strumenti di Sviluppo per il Custom Styling LMS

Per un workflow di sviluppo efficiente nella personalizzazione Moodle CSS e JavaScript:

• Grunt: il task runner ufficiale di Moodle per compilare SCSS e moduli AMD. Configurare il watch mode per la ricompilazione automatica durante lo sviluppo.
• Browser DevTools: utilizzare l'inspector per identificare i selettori CSS corretti e testare le modifiche in tempo reale prima di scriverle nel codice.
• Theme designer mode: attivare il parametro themedesignermode nelle impostazioni di Moodle per disabilitare la cache dei temi durante lo sviluppo.
• Moodle Docker: un ambiente di sviluppo locale containerizzato per testare le personalizzazioni senza rischi sull'ambiente di produzione.

Conclusione

La personalizzazione Moodle CSS e JavaScript custom permette di trasformare una piattaforma standard in un ambiente formativo su misura, allineato all'identità del brand e ottimizzato per le esigenze degli utenti. La chiave è adottare un approccio strutturato — tema figlio, moduli AMD, testing cross-device — per garantire che le personalizzazioni siano mantenibili nel tempo.

HIE Learning sviluppa temi Moodle custom professionali e personalizzazioni frontend avanzate per aziende e istituzioni formative. Dalla progettazione dell'interfaccia allo sviluppo tecnico, ti accompagniamo nella creazione di un'esperienza e-learning unica. Contattaci per discutere il tuo progetto.