Terzo articolo della serie dedicata alla creazione di template per Joomla! 4, vedremo come inserire fogli di stile per personalizzare il design del sito.
Nel precedenti articoli abbiamo posto le basi per creare un template personalizzato per Joomla! 4, nello specifico abbiamo trattato 2 argomenti:
Seguendo i passaggi che ti ho spiegato sarai arrivato ad avere uno scheletro di un template molto basico, con questo articolo ti spiegherò come iniziare a personalizzarlo, nello specifico ti spiegherò:
Come inserire fogli di stile in un template custom per Joomla! 4
Servirà per cominciare a dare la tua "impronta personale" al design del sito, vedremo assieme da subito come utilizzare le personalizzazioni applicandole.
Comincia aprendo il file index.php con il tuo editor, nel primo articolo avevamo inserito il foglio di stile e lo script di Bootstrap 5:
Vediamo i passaggi da effettuare:
1) Crea un nuovo foglio di stile
Col tuo editor crea un nuovo file e inserisci questo codice:
@charset "UTF-8";
/* Foglio di stile per personalizzazione template per Joomla! 4
* Autore: Nome Autore
* Data: Aprile 2022
*/Salvalo nella cartella css del tuo template e assegna il nome che preferisci, io userò style.css.
In questo modo hai creato il file dove inserire le tue personalizzazioni, le 3 righe inserite servono per dare una breve descrizione del file, cosa serve, chi lo ha creato e quando.
Sono informazioni che possono risultare utili in futuro.
2) Collega il foglio di stile al tuo template
Torna sul tuo index.php, alla riga 7 troverai il collegamento al foglio di stile di Bootstrap, inserisci il tuo subito dopo utilizzando la stessa modalità
Per collegare il tuo css, inserisci questo codice:
<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/style.cssSalva per terminare.
Il foglio di stile è collegato e lo troverai visualizzando il codice sorgente del tuo sito.
3) La prima personalizzazione del design del tuo sito
Cominciamo subito ad impostare qualche regola css che possa migliorare il design del sito, se testi il tuo template tramite la finestra di ispezione del tuo browser attivando la modalità di visualizzazione flessibile, ti accorgerai che le immagini degli articoli di esempio escono dallo schermo visualizzando il sito su smartphone.
Per risolvere questo problema scrivi sul tuo file css personalizzato questo codice:
img{max-width:100%; height:auto;}Salva per terminare e verifica il risultato:
Come puoi vedere dallo screenshot qua sopra, ora l'immagine inserita nell'articolo non strasborda, si vedo correttamente i margini laterali.
Facciamo ancora qualche miglioria al designe del sito, impostiamo un colore per lo sfondo:
body{background-color:#eee;}Se salvi ora e guardi il tuo sito vedrai che tutto lo sfondo diventa di colore grigio, anche il div che racchiude i contenuti, non proprio il massimo, per cui andiamo a colorare il "container"
.container{background-color:#fff;}Ora lo sfondo del tuo sito sarà di colore grigio e il contenitore principale di colore bianco.
Ti ho mostrato 2 personalizzazioni molto veloci, ce ne sono tantissime altre che vedremo in seguito, prima di terminare la scrittura di questo articolo voglio spiegarti ancora qualcosa.
4) Aggiungi Font Awesome al tuo sito.
Joomla! 4 utilizza Font Awesome per le icone del sito, quelle icone che si possono vedere nei dettagli del sito per esempio, lo screenshot postato poco sopra non visualizza icone a fianco della categoria o della data di pubblicazione.
Per poterle visualizzare dovrai aggiungere Font Awesome al tuo template, potresti usare 2 strade per farlo:
- scaricare la versione free dal sito di Font Awesome ed includerla nel tuo template
- utilizzare quanto offerto dal core di Joomla!
Per questo esempio ti mostrerò come utilizzare la seconda opzione, Joomla! include nei suoi file la versione free di Font Awesome 5, la 5.15.4 mentre sto scrivendo questo articolo l, trovo molto comodo utilizzarla senza dover includere tanti file nel template.
Dove si trova? nella cartella Media del CMS, in particolare in media > system > css.
Cosa devi fare per includere Font Awesome nel tuo template?
Devi comportarti come se fosse un foglio di style, per cui nel tuo index.php inserisci una nuova "chiamata" dopo quella relativa al tuo css personalizzato, per collegare Font Awesome inserisci questo codice:
<?php echo $this->baseurl ?>/media/system/css/joomla-fontawesome.min.cssSalva per terminare.
Ricaricando una pagina del tuo sito di test noterai che ora l'aspetto dei dettagli degli articoli è cambiato:
Il template che stai creando comincia ad essere meno scarno e ad avere qualche elemento personalizzato.
Se hai domande scrivile nei commenti.
