Gli stili in Joomla: 1 - introduzione

E' importante sapere fin dall'inizio che i CSS controllano solo l'aspetto di un documento, non influiscono in alcun modo sul suo contenuto. Anche se è possibile far sparire alcuni elementi, spostarne altri e via dicendo questo non cambia l'HTML che sarà sempre quello e sarà sempre possibile leggerlo.
Insomma: se volete far sparire qualcosa, se possibile, chiedete a Joomla! di occuparsene (dalle opzioni) prima di rimuoverlo con i CSS. In questo modo si alleggerirà anche il codice HTML.

I CSS sono però fondamentali perchè ci permettono di dare un aspetto più gradevole al nostro sito

In pratica i CSS servono per trasformare questo:



In questo:




Firebug

Che voi utilizziate Internet Explorer (IE), Chrome o Firefox (FF) premendo il tasto F12 vi usciranno i cosiddetti “strumenti di sviluppo” che vi permettono di analizzare il codice HTML e i CSS. Personalmente vi consiglio fortemente di installare Firebug. E’ un’ottima estensione per FF, naturalmente gratuita, che ci permette tra l’altro di fare modifiche al volo alla pagina che stiamo analizzando.

Una volta installata l’estensione e premuto F12 questo è quello che ci si presenta:



Il tasto contrassegnato con 1 ci permette di fare clic su un elemento all’interno della pagina e di analizzarlo. Nel caso riportato in immagine ho fatto clic su un link del forum e Firebug mi presenta la sua posizione all’interno dell’HTML (zona 2) e i CSS associati a quell’elemento (zona 3).
La cosa bella è che possiamo cambiare questi elementi ‘al volo’. Ad esempio se nella zona 3 facciamo clic sul codice colore e sostituiamo #D97B33 con la parola red tutti quei link ci appariranno in rosso. Ovviamente questa modifica non avrà nessun effetto sul sito. Ma in molti casi può essere un’utile anteprima.
Sotto al primo blocco di codice CSS troviamo:

a:link, a:visited {
color: #334466;
text-decoration: none;
}

Come si può notare la proprietà del colore è barrata. Significa che questa proprietà è effettivamente scritta nei CSS ma è stata sovrascritta da un’altra (il color: #D97B33 che troviamo nel primo blocco). Se ora ci portiamo sul primo blocco e ci posizioniamo sulla scritta color comparirà il simbolo di un divieto di sosta grigio. Se lo clicchiamo, diventerà rosso ed inibirà quella proprietà. Il color: #334466 a questo punto non sarà più barrato, e il colore dei link nella pagina sarà cambiato.

La posizione dei blocchi non è casuale: il primo è quello più importante, con la maggior parte delle proprietà applicate, poi vengono quelli che hanno alcune proprietà sovrascritte. Probabilmente gli ultimi avranno tutte le proprietà barrate.

Ma non è finita. Posizionamoci a fianco di font-weight:bold, nel primo blocco e facciamo doppio clic. Firebug si prepara a ricevere una nuova istruzione.
Scriviamo: background-color e premiamo invio. Adesso scriviamo red e premiamo di nuovo invio.
Abbiamo inserito una nuova proprietà e il risultato è immediatamente visibile nella pagina.

Firebug, molto opportunamente, ci indica anche in quale file è contenuto questo codice, e anche la riga. Semplicemente passando con il mouse sopra al nome del file potremo vederne la posizione e cliccandolo potremo leggere tutto il codice contenuto nel file. Pratico vero?

La seconda proprietà del primo blocco è la dimensione del carattere: font-size:110%
Sì, ma quanto è il 110%? Clicchiamo su “Elaborato”. Firebug ci presenta tutte le proprietà di questo blocco di testo. Tra cui la sua dimensione in pixel: 13.7333px
Clicchiamo ora su “layout”. Qui ci viene proposto il box-model per questo blocco di testo. Possiamo modificare i valori direttamente da qui. Cos’è il box model? Lo vedremo più avanti, in un capitolo dedicato. Per il momento ci basti sapere che Firebug ce lo fa vedere e ci permette di modificarlo al volo.

Diamo un’occhiata alla zona 2, quella che riporta l’HTML. Il nostro testo è un link (< a >) ed ha una classe (subject). E’ contenuto in un < td > che ha una classe (info) che sta dentro ad un < tr > che ha un ID (board44). In questo modo è molto semplice sapere dove ci troviamo all’interno della pagina e conoscere tutte le caratteristiche dell’HTML.

Bene, ora che sappiamo tutto possiamo procedere. Diciamo che vogliamo effettivamente cambiare il colore dei nostri collegamenti nel forum da #D97B33 a red. Come accediamo al file? Se abbiamo una versione del sito in locale è abbastanza semplice: andiamo nella cartella (il percorso ce lo dice Firebug, come abbiamo visto), modifichiamo il file e poi lo mandiamo al server via FTP.
Procedura un po’ macchinosa, soprattutto se si tratta solo di cambiare un codice colore.

Per fortuna la JED ci viene ancora una volta in aiuto con un componente che si chiama OSE file manager (http://extensions.joomla.org/extensions/core-enhancements/file-management/15977) che ci permette di navigare nei file del nostro Joomla! direttamente da dentro l’amministrazione. Per queste piccole variazioni è comodissimo!

Il puntamento
Nella scrittura di uno stile la cosa più importante è il “puntamento”, ovvero far capire al browser che la serie di regole che andremo a scrivere si riferisce esattamente a QUEL tag HTML.

Possiamo “puntare” generalemente le classi, gli id e i tag. Più preciso sarà il puntamento e più sarà specifico.
Vediamo qualche esempio, partendo dall’HTML che già abbiamo visto, opportunamente arricchito:

< div id=”miosito” >

< ul class=”menu” >

< li class=”menu primo” >Ciao< /li >

< li class=”menu secondo”>Tutti< /li >

< /ul >

< /div >


li {background-color:red;} questa proprietà varrà per tutti i tag li del sito

#miosito {background-color:red;} questa proprietà varrà solo per gli elementi che hanno come ID “miosito”

.menu {background-color:red;} questa proprietà varrà solo per gli elementi che hanno come classe “menu” (nel nostro esempio, quindi, sia l’ul che i li)

li.primo {background-color:red;} questa proprietà varrà solo per i li che hanno come classe “primo”

.menu .secondo {background-color:red;} questa proprietà varrà solo per gli elementi che hanno classe “secondo” e si trovano all’interno di un elemento con classe “menu”

#miosito .secondo {background-color:red;} questa proprietà varrà solo per gli elementi che hanno classe “secondo” e si trovano all’interno di un elemento con id “miosito”. Notate che non è importante quante nidificazioni ci siano in mezzo (in questo caso una sola): la proprietà vale comunque.

Se un elemento ha due proprietà assegnate, in linea di massima, vale quella con il puntamento più preciso quindi tra

.secondo {background-color:red;}
.menu .secondo {background-color:green;}
#miosito .menu .secondo {background-color:silver}

Quella che sarà applicata sarà l’ultima

Scritto da Spaceodissey - Italia per turisti

Gli stili in Joomla: 1 - introduzione

Articoli più recenti: