Supporto volontario e collaborativo per Joomla!® in italiano

Gantry - Aggiungere un tocco di stile

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 
Informazioni utiliSi sa che Gantry è un potente framework che ci permette di creare dei template flessibili con molta facilità.
L'installazione di un template gantry porta con se i propri stili di base (colore dei link, font-family, logo personalizzato,...).
Bene, ma questo non basta, ognuno vuole dare il suo tocco di stile e di conseguenza vuole personalizzare in base alle proprie esigenze.

Come iniziare?

Alcune personalizzazioni si possono fare semplicemente attraverso le funzionalità (features) presenti nel'amministrazione del template, ma ci sono anche molti elementi che per modificarli bisogna agire direttamente sui CSS.
Purtroppo dopo ogni aggiornamento del template queste modifiche CSS si perdono. Ma gli sviluppatori di Gantry hanno pensato a una soluzione abbastanza semplice che risolve il problema. La creazione di un nuovo file CSS dove inserire le proprie classi personalizzate.

Semplicemente creare un file chiamato gantry-custom.css (obbligatorio) e inserirlo in:
/templates/[gantry]/css/



Nota: Se vogliamo personalizzare il template predefinito gantry cambiando anche il nome in qualcosa più specifico tipo "miotemplate", allora il file da creare si chiamerà miotemplate-custom.css e verrà inserito in:
/templates/[miotemplate]/css/
Questo file chiamato secondo la regola [template]-custom.css, verrà caricato automaticamente del framework senza alcun intervento da parte dell'utente.

Un tocco di stile?

Ora possiamo iniziare a creare le nostre personalizzazioni aggiungendo le nuove regole css.

Nota:
Se si desidera "sovrascrivere" una regola esistente bisogna utilizzare la specificità dei selettori CSS. Per specificità si intende la priorità di una regola sulle altre che si riferisce allo stesso selettore.
Non voglio entrare nei dettagli sull'argomento ma vi consiglio di leggere le raccomandazioni CSS Level 1 di W3C per capire e per approfondimenti. Ne vale la pena senza dubbio!

Un semplice esempio adesso.
Ho creato un modulo HTML personalizzato in cui ho inserito un testo (le informazioni di copyright). Questo modulo l'ho inserito nella posizione copyright-a. Ricordatevi e fatte attenzione alla posizione in cui si trova l'elemento da personalizzare !

Vediamo come compare:



A colpo d'occhio sembra che per cambiare il colore e centrare il testo bisogna inserire un'istruzione del genere:
.rt-block{
 color:red;
 text-align:center;}

Sbagliato !

Siccome rt-block è utilizzato in molte altre posizioni sul template gantry e non solo nel posto in cui ci interessa, le modifiche apportate su questo blocco si propagheranno su tutti rt-block presenti, e questo non va bene.
Perciò bisogna inserire una regola con selettore più specifico. In questo caso l'elemento rt-block si trova all'interno di rt-copyright, e l'istruzione corretta da inserire e questa:

#rt-copyright .rt-block{
 color:red;
 text-align:center;}
Traduzione: assegnare il colore rosso e centrare i contenuti di tutti i blocchi rt-block ma solo quelli che si trovano all'interno di rt-copyright !

Vediamo adesso come va:


Perfetto !

NOTA:
E' possibile aumentare il peso di una dichiarazione rispetto ad un'altra grazie al comando !important.
Ad esempio, se abbiamo una classe con le seguenti regole:
.stile{
 color:white!important;
 color:red;}
Anche se la seconda regola dovrebbe essere interpretata, il commando !important inserito nella prima regola da precedenza e di conseguenza prima regola verrà interpretata quindi il colore sarà bianco.


Buon gantry a tutti!
CommentaCommenta questo articolo sul forum

Ultima versione di Joomla!®

downloadVer. 3.8.1 Stabile Italiana
Data di rilascio: 04 Ottobre 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: