Supporto volontario e collaborativo per Joomla!® in italiano

Moduli: style, classe e suffisso css

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Alcune cose che dobbiamo sapere per poter personalizzare l'aspetto dei moduli che pubblichiamo nei nostri siti Joomla!

Una piccola guida all'uso del Suffisso Classe CSS modulo.

Premetto che dobbiamo necessariamente conoscere abbastanza bene i codici html e css ed avere almeno una rudimentale conoscenza del php per avventurarsi in una modifica dello stile dei moduli che pubblichiamo nel nostro sito.


Diamo anche per scontato che conosciate e sappiate usare i principali strumenti per poter lavorare in un template.
Qui una ottima videoguida per iniziare subito ad usare firebug.

Lavoriamo sul template rhuk_milkyway, che tutti abbiamo presente nella nostra installazione di Joomla! Notiamo subito che i moduli che pubblichiamo nella posizione left appaiono racchiusi in quella gradevole grafica tondeggiante, a condizione che nel modulo sia inserito _menu nel Suffisso Classe CSS Modulo. Se togliamo quel suffisso l'aspetto del modulo sarà sensibilmente diverso. Se però pubblichiamo lo stesso modulo nella posizione right, questo non apparirà con la grafica tondeggiante neanche se lasciamo scritto _menu nel Suffisso Classe CSS Modulo. Questo perchè lo stile del modulo è diverso nello speciale tag che viene utilizzato nella index.php del template per inserire una posizione modulo.
Apriamo dunque la index.php del template (templates/rhuk_milkyway/index.php) e cerchiamo questa stringa:

Questa stringa ci dice che includeremo in questa posizione chiamata left dei moduli che verranno pubblicati con lo stile rounded. Se andiamo ad ispezionare con firebug come viene stampato il codice nella pagina html vedremo che Joomla creerà un codice come quello che potete vedere qui sotto, inserendo dentro un div avente classe module tre div annidati uno dentro l'altro, all'interno dei quali inserirà il nostro modulo. In questo caso il modulo Chi è on line.



Se adesso andiamo in Estensioni ---> Gestione Moduli, apriamo il modulo Chi è on line e  scriviamo _menu dentro il box Suffisso Classe Css Modulo ecco quale sarà il risultato:



In sostanza aggiungendo il suffisso _menu al modulo Joomla! crea  una nuova classe che si chiama module_menù, che chi ha realizzato il template ha opportunamente formattato nel foglio di stile. Avremo così la possibilità di mostrare nel nostro sito i moduli con due diversi aspetti semplicemente aggiungendo o togliendo il suffisso. La cosa può funzionare all'infinito impostando nostri stili che possiamo aggiungere nel css e far assumere aspetti e formattazioni personalizzate ai moduli assegnando loro un diverso suffisso.

Queste sono le regole css che formattano lo sfondo del modulo (qualsiasi tipo di modulo: menù, sondaggio, html personalizzato, login, ecc) mostrato in stile rounded ed avente il suffisso _menù:


Come potrete agevolmente esaminare con firebug ciascuna regola assegna una immagine di sfondo a uno dei div che formano il modulo, consentendo così la rappresentazione grafica con spigoli arrotondati, qualsiasi sia l'altezza e la larghezza del modulo. Capito come funziona potremo abbastanza facilmente personalizzare il nostro modulo cambiando  le immagini.

Ma perchè tutto questo non funziona nella colonna di destra?

Semplicemente perchè la stringa che inserisce la posizione modulo destra è questa:


Questa stringa ci dice che includeremo in questa posizione chiamata right dei moduli che verranno pubblicati con lo stile xhtml. Se andiamo ad ispezionare con firebug come viene stampato il codice nella pagina html vedremo che Joomla creerà stavolta un codice come quello che potete vedere qui sotto.



Come vedete il codice è sensibilmente diverso. Questa volta il modulo viene racchiuso dentro un unico div con classe moduletable. Anche se noi assegnassimo lo stesso Suffisso Classe CSS Modulo _menù che avevamo assegnato al modulo pubblicato in left non otterremo lo stesso effetto perchè mancano le regole per formattare la classe moduletable_menù e comunque mancherebbero anche i tre div annidati uno dentro l'altro da formattare.

Tip: se volete poter pubblicare anche nella colonna di destra del rhuk_milkyway i moduli  con la stesso aspetto di quelli pubblicati a sinistra assegnando il Suffisso Classe CSS modulo _menù sostituite lo style xhtml con rounded in quella stringa che abbiamo visto prima.

Per approfondire il modo come joomla! rende l'output dei moduli vai qui.

Adesso vediamo come personalizzare un modulo semplicemente applicandogli un diverso Suffisso Classe CSS Modulo. Se dentro il box del suffisso scriviamo _blu e andiamo a copiare, incollare e modificare tutte le regole che nel css formattano la classe module_menù modificandola in module_blu sotituendo poi le immagini originarie riusciremo a personalizzare l'aspetto di ogni modulo.
Ovviamente se vogliamo che il modulo sia uguale agli altri per ogni altro aspetto dovremo cercare nei css del template tutte le regole che formattano la classe module_menu, copiarle e modificare la classe in module_blu. Per il modulo che stiamo esaminando sono in tutto una decina.

Tip: faremo prima ad assegnare al modulo al quale vogliamo modificare la grafica una nuova classe lasciandogli anche il suffisso _menu. Scriveremo perciò la nuova classe orange separandola con uno spazio i questo modo:



Andremo adesso a copiare e modificare solo le 4 regole che formattano l'aspetto grafico dello sfondo del modulo copiando e modificando in questo modo quelle che già avevamo visto prima. Il cambiamento consiste nell'aggiungere la nuova classe .orange (attenzione a non lasciare spazi e a metterci il puntino che indica la classe nel css, al contrario di come la scriviamo dentro il box del suffisso nel modulo) e nel cambiare il valore al background richiamando le immagini di colore arancio :



Abbiamo aggiunto stavolta non un suffisso che va a modificare la classe del modulo, ma una nuova classe che possiamo formattare a nostro piacere. Non sarà più necessario cercare e modificare tutte le regole css che formattano il modulo classe modulo_menu, ma soltanto andare a scrivere le regole per formattare la nuova classe orange. Così il modulo cambierà solo per quanto riguarda l'aspetto dello sfondo ma manterrà inalterate tutte le altre caratteristiche  che riguardano la classe  module_menu, tipo dimensione e colore di font e link, la formattazione degli elenchi, padding, margin, ecc.  Una bella comodità non vi pare?


Lo scherzetto si può ripetere all'infinito. Mettiamo che io voglia adesso ottenere un secondo modulo arancio con un titolo di colore rosso. Scriverò dentro il box del Suffisso Classe CSS Modulo la nuova classe aggiungendola alle altre. La chiamo tred (che sta per Titolo RED):



Cercherò con firebug nel css la regola che formatta il titolo del modulo che è questa:
div.module_menu h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #eee;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

che duplicherò e cambierò così

div.module_menu.tred h3 {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: red;
margin: -23px -4px 5px -5px;
padding-left: 10px;
padding-bottom: 2px;
}

Una volta fatta un po' di pratica ci risulterà molto comoda questa possibilità di aggiungere al volo nuove classi da assegnare ai moduli.Sorridente

Vediamo adesso un altro esempio di utilizzo del suffisso per formattare il testo che si può inserire prima e dopo un modulo di tipo banner. Intanto va subito detto che il modulo stesso, come molti altri contenuti di Joomla!, supporta il codice html per cui possiamo inserire il testo formattato direttamente nel box del modulo.
Firebug ci rivela comunque che, in caso di inserimento di testo prima e dopo il banner, Joomla! ci mette a disposizione un paio di classi per aiutarci nella formattazione:



Come ormai abbiamo ben capito formatteremo la regola per la classe bannerheader se vogliamo che le intestazioni  di tutti i banner presenti nel sito abbiano lo stesso aspetto. Ma se volessimo usare il suffisso classe css modulo per formattarla in modo particolare rispetto agli altri banner potremo allora scrivere per esempio _suffisso dentro il box Suffisso classe CSS modulo del banner che renderebbe in output questo codice:



Allora poichè vogliamo formattare il testo contenuto nel div.bannerheader annidato dentro al  div.bannergroup al quale abbiamo applicato il suffisso _suffisso scriveremo in questo modo la regola:

.bannergroup_suffisso .bannerheader {
proprietà : valore;
altra proprietà : altro valore;
ecc.
}
Fate sempre MOLTA attenzione alla sintassi. Questa volta tra la classe .bannergroup_suffisso e .bannerheader va lasciato uno spazio perchè la classe bannerheader appartiene ad un altro elemento discendente da bannergroup.

Qualche volta ci litigheremo con i css, statene certi. Ci perderemo sopra delle ore, talvolta per nulla e dovremo ricominciare da capo. Ma la soddisfazione che proveremo quando riusciremo a controllare quasi perfettamente l'aspetto grafico del nostro sito è davvero impagabile.

Qui potete vedere una demo con tutti gli esempi fatti in questo articolo che aiuta molto nella comprensione dello stesso se lo ispezionate con firebug mentre leggete. Buona lettura, buona ispezione e buon divertimento!

Articolo scritto da tonicopi - Joomla Css Zen Garden
commentaCommenta questo articolo sul forum



Calendario articoli

Ottobre 2014
Lun Mar Mer Gio Ven Sab Dom
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2

Ultima versione di Joomla!®

downloadVer. 3.3.6 Stabile Italiana
Data di rilascio: 01 Ottobre 2014
(leggi la notizia Demo online

Ver. 2.5.27 Stabile Italiana
Data di rilascio: 01 Ottobre 2014
(leggi la notizia)

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.

Torna su

Joomla.it su Google Plus

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: