Non è una novità della versione 3.x di Joomla! ma resta per molti utenti ancora misterioso l'utilizzo della Classe Pagina. In questo tutorial cerco di spiegare come inserirla e come utilizzarla nel flusso della pagina. Sfruttando la eriditarietà dei css ci consentirà interessanti personalizzazioni. Vediamole...
Joomla! nel suo lavoro crea pagine html "dinamiche" che utilizzano per la formattazione i fogli di stile. In questi, chi predispone o personalizza un template, scriverà le regole per formattare l'aspetto della pagina: dimensione e tipo di font, colori, margini e padding, background, ecc.
Come si applica la Classe pagina?
Si deve andare in Menu ed aprire il menu relativo alla voce dove vogliamo applicare la classe.
Se volessimo applicare la classe nella home page clicchiamo su Main Menu e poi sulla voce Home.
Una volta aperta la voce Home clicchiamo sulla scheda Opzioni avanzate e poi su Opzioni visualizzazione pagina. Inseriamo una classe che io ho chiamato test-classe nel box Classe pagina.
ATTENZIONE: è importante far precedere alla classe uno spazio vuoto perchè, diversamente, invece che una classe inseriremo un suffisso a una classe esistente, con possibili indesiderati effetti.
Adesso se andiamo ad ispezionare il codice della home-page vedrò che a un determinato div è stata aggiunta questa nuova classe test-classe:
che potrò formattare con una regola css come quella sottostante.
La regole css vanno scritte in uno qualsiasi dei fogli di stile caricati dal template. Nel caso in esame l'ho scritta in fondo al file
tuosito.ex/templates/tuo_template/css/template.css
.test-classe {
background-color: #F5F5F5;
border: 1px solid #E3E3E3;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
margin-bottom: 20px;
min-height: 20px;
padding: 19px;
}
In sostanza ho copiato la regola che nel Protostar formatta i moduli rendendo identico l'aspetto del contenitore degli articoli, aumentando un poco la dimensione dei font.
Poi ho aggiunto questa regola:
.test-classe h2 a { font-size: 36px; color: #F9C804; }
con la quale aumento la dimensione del titolo e gli cambio il colore.
Se volete subito dare un'occhiata al risultato cliccate qui.
Purtroppo l'aggiunta di questa classe opera solo in quello che viene definito mainbody, l'area dove appaiono i contenuti, limitando così le nostre possibili personalizzazioni, che potremmo magari voler apportare al background della zona esterna o all'header e footer.
Molti framework tuttavia fanno apparire questa classe nel tag Body, ampliando molto l'utilità della classe personalizzata. E' il caso del Warp utilizzato dalla Yootheme e del framework utilizzato dalla Bamboo come potete leggere in questo articolo.
Mentre altri noti framework tipo il T3 di Joomlart, il Gavern della Gavick o il Gantry della RocketTheme non modificano per niente il comportamento di Joomla! e mostrano la Classe pagina sempre nel div dove viene inserita la component. Ma, tornando al sistema col quale Joomla! di default inserisce la Classe pagina, ci si potrebbe chiedere se c'è modo di far apparire tale classe nel tag body e poter così personalizzare ogni aspetto della pagina? La risposta è affermativa, è piuttosto semplice ed è applicabile a tutti i template, di sicuro a quelli presenti di default, ma anche alla stragrande maggioranza di quelli gratuiti che troviamo in abbondanza nel web e che sono scaricabili anche dal nostro sito qui.
Vediamo come fare:
1 - Apriamo la voce di menu alla quale vogliamo applicare un ID nel tag body della pagina, andiamo in Opzioni avanzate > Opzioni visualizzazione pagina e inseriamo la nostra classe nel box Classe pagina. Io ho inserito sempre lo stessa classe di prima e cioè test-classe.
ATTENZIONE: questa volta è importante NON lasciare spazi vuoti davanti alla classe;
2 - apriamo la index.php del template in uso che troviamo in questo percorso: tuosito.ex/templates/tuo_template/index.php e tra i tag head della pagina inseriamo questo codice:
<?php $app = JFactory::getApplication(); $menu = $app->getMenu()->getActive(); $pageclass = ''; if (is_object($menu)) $pageclass = $menu->params->get('pageclass_sfx'); ?>
3 - nel tag body inseriamo una stringa in modo da renderlo così:
<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">
Salviamo e da questo momento avremo un ID nel tag body a mezzo del quale potremo cambiare aspetto a qualsiasi elemento della pagina.
Ecco come appare il codice ispezionandolo con firebug:
Come si vede adesso la pagina è interamente modificabile ed io con queste due regolette:
#test-classe { background-color:#0088CC; }
#test-classe .pull-right a { color: #F9C804; }
ho modificato il colore di sfondo del sito e il colore del link Back to top a fondo pagina che altrimenti, essendo anche lui blu, sarebbe stato invisibile.
Come avete visto l'utilizzo della Classe pagina, che con questo semplice accorgimento potrà essere applicata in ogni pagina e in ogni area del sito, ci consente davvero interessanti personalizzazioni.
Potete vedere la pagina che ho modificato con la Classe pagina in questa demo.
Articolo scritto da tonicopi - Joomla Css Zen Garden
