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 alla vista e nella navigazione.

Visto dall'interno, nella cartella che lo contiene ( generalmente in /templates/nome-template ) risulta un insieme di file che trovano la pagina principale nel file index.php, seguita da file xml di configurazione e installazione, una cartella css per i fogli di stile, una cartella 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 e bedava che sfrutta il framework T3.

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 a suo modo accattivante ed è ampiamente modificabile oltre che fluido o responsive (pronto ad adattarsi a uno schermo di un dispositivo mobile: smartphone o tablet che sia).

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:

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

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

In conclusione

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à conto.

Se mai dov'essero esserci "problemi di conflitto" tra regole basterà assegnare alla specifica dichiarazione l'attributo !important per forzarne la priorità rispetto ad una regola imposta da un altro file css del template.

Per la spiegazione di come funziona la direttiva !important nei fogli di stile, rimando a un articolo che lo spiega nel dettaglio.

Questa soluzione, cioé l'integrazione di un file custom.css nel template in uso, presenta diversi vantaggi: 

• Unico contenitore per le nostre regole di stile e personalizzazione CSS del sito.
• Resiste ad eventuali aggiornamenti.

Potrebbe interessarti la lettura degli altri articoli della serie Joomla! - Personalizzare il Template:

Joomla! - Personalizzare il Template: Override

Joomla! - Personalizzare il Template: Width

Joomla! - Personalizzare il Template: Aggiungere posizioni