Joomla! - Personalizzare il Template: CSS

Nel creare un website con Joomla! una delle prime cose che richiedono attenzione, è la scelta del template. Di template gratuiti ce ne sono diversi, ma la cosa difficile è quella di trovarne uno free, responsive, dal design accattivante e perché no anche con stili bootstrap e che ovviamente faccia al caso nostro.

Foglio di stile di override

Non serve dire che un template joomla è ben più che una veste grafica. Non è WordPress, in cui il template decide addiritura il comportamento dell'editor di scrittura dei sinogli post e pagine; ma è pur sempre qualcosa che modifica il sito e lo rende più funzionale e gradevole nella vista e nella navigazione.

Visto dall'interno, nella cartela che lo contiene ( generalmente in /templates/nome-template ) risulta un insieme di file che trovano la pagina principale nella index.php, seguita da file xml di configurazione e installazione, una cartella css per i fogli di stile, una html per gli override dei moduli ( vedremo in un altro articolo che significa e come si effettua ) e altro ancora, tra stili e immagini.

Tra le varie modifiche che vi si possono fare, il presente articolo si propone di spiegare come creare un foglio di stile unico per i ritocchi al css del template in uso (se non già esistente).

Premetto che questa funzionalità è prevista in quasi tutti i template in commercio ed è anche diffusa tra quelli free. Tra quelli free da me utilizzati che prevedono l'uso di un CSS interno per gli override vi è favourite o bedava che sfrutta il T3 framework. Tra i due, preferisco di gran lunga favourite, semplice e pulito si presta benissimo a siti come la gazzetta delle koi e hotel laurin canazei. 

L'idea è quella di modificare o aggiungere regole a un unico file, invece che cambiare i selettori di ogni foglio di stile del sito.

Il template Protostar

Parto da Protostar, proprio perché ne è sprovvisto: Template nativo e free per la versione 3.0 di Joomla, presenta un design essenziale ma accattivante ed è ampiamente modificabile oltre che fluido o responsive (pronto ad adattarsi a uno schermo di un dispositivo portatile: smartphone o tablet che sia).

Tuttavia, semplice semplice... anche se un mondo aperto. La prima cosa da fare nel caso si decida di usarlo, è proprio quella di integrare un foglio di stile o file css che ci consenta di modificarne abilmente le caratteristiche. Poi, magari con l'impiego di buoni moduli anche gratuiti, si può fare molto per personalizzarlo senza dover spendere un patrimonio.

Per farlo, è necessario aprire il file /templates/protostar/index.php e aggiungere una riga di codice. Ma per fare un lavoro pulito, è bene duplicare il template prima di passare a modifiche sostanziali alla sua struttura:
Accedete al lato amministratore del vostro sito Joomla!

Copia del template

Effettuare una copia del template prima di inziare a svolgere modifiche sostanziali al template in uso è una precauzione che non smetterò mai di consigliare. Per questo, se non sapete come fare, leggete il seguente articolo:

Joomla! - Come fare una copia del template

Aggiungere il File CSS a Protostar

1. A questo punto, siete già all'interno del nuovo template. Per aggiungere il file di override custom.css. Cliccate su Nuovo file.

   

2. All'interno della finestra di dialogo che appare, selezionate sulla parte sinistra la cartella /css (percorso del nuovo file) del template e sulla sinistra, selezionate il tipo di file che volete creare, nel nostro caso "css". Sotto, inserite il nome del file. Per l'appunto "custom" (senza estensione! Il tipo di file è già stato specificato sopra).

   

3. Ora cliccate su Crea! ed ecco il vostro risultato.

Integrare il nuovo file nel template

Manca solo linkarlo al template per fare in modo che lo legga e ne tenga conto nel calcolare le rules di stile che verranno associate al template.

1. Aprite il file index.php (lo vedete nella root del template, in basso).

   

2. Copiate la riga 43 e incollatela immediatamente sotto quest'ultima.

   

3. Modificate poi la riga 45 in questo modo:

$doc->addStyleSheet('templates/' . $this->template . '/css/custom.css');

           4. Ora salvate. Il risultato dev'essere più o meno come quello illustrato in figura.

Da ora in poi, tutte le direttive e le regole css che volete assegnare ai vari elementi che compariranno nel vostro template, nuove o override che siano, le potrete inserire qui dentro certi che il template ne terrà in conto. Se mai dov'essero esserci problemi in merito, basterà assegnare alla regola, l'attributo !important. Per la spiegazione di come funziona quest'ultima direttiva dei fogli di stile, rimando a un articolo che lo spiega nel dettaglio.

Questo file presenta diversi vantaggi. Unico contenitore per le nostre regole di stile e personalizzazione CSS del sito. Resiste ad eventuali aggiornamenti.