Joomla! - Personalizzare il Template: CSS

google-plus Scritto da .

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.

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

    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).

    custom-css

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

modifica-custom-css

 

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).

      index-php

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

      aggiunta-custom-css-template

    3. Modificate poi la riga 45 in questo modo:

// PHP CODE
 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


 

Se hai gradito l'articolo, condividilo, basta un click:

Aggiungi commento

I commenti lasciati dagli utenti del blog sono sempre soggetti a controllo prima di eventuale pubblicazione. I commenti non considerati adatti per contenuti, spam o forma saranno eliminati e non pubblicati. Leggi i Termini e Condizioni di utilizzo per maggiori informazioni.


Codice di sicurezza
Aggiorna

  • logo teoca
  • materexcel collabora
  • logo flash pulizie
  • revolution srl
  • logo arcotraslochi
  • montaggio mobili trento
  • logo elevatori sito
  • logo prontopro

Prima di andartene...

Perché non rimanere in contatto?

Clicca sul pulsante "Mi piace" qui sotto per rimanere aggiornato su tutti i nuovi contenuti e ricevere notifica degli articoli interessanti che condivido giornalmente sulla Pagina Facebook dedicata al blog.

Puoi anche iscriverti alla newsletter e al nuovo canale YouTube di blog.dangerx82 così da rimanere sempre aggiornato sui nuovi contenuti...

x

Per essere più facile ed intuitivo, il blog fa uso dei cookie, piccole porzioni di dati che consentono di capire come gli utenti navighino e ne visualizzino le pagine. I cookie non registrano alcuna informazione personale sull'utente ed eventuali dati identificabili non verranno memorizzati. Ti invitiamo a prendere visione della nostra Informativa sulla Privacy (aggiornata il 25/05/2020). Oppure visiona la nostra Cookie Policy (aggiornata il 17/10/2019):