Personalizzare l'aspetto delle pagine di Joomla! con i Parametri dei Suffissi di Classe

Le pagine di Joomla! possono avere un determinato aspetto, mediante l'uso dei Cascading Style Sheets (CSS). Ciò comprende elementi quali: font, colori del testo, margini, background ecc... Il file CSS, solitamente denominato template.css, è parte integrante del template, all' interno del quale si trovano tutte le "informazioni" per la presentazione del sito.

Possiamo affermare che quando Joomla! crea una pagina, crea diverse classi CSS, le quali vengono applicate agli elementi HTML. Tutti i nomi delle classi sono già stati "pre-impostati" nel core di Joomla! Nonostante questo, il CMS permette di modificarle o, addirittura, di aggiungerne delle altre mediante i parametri dei suffissi di classe. Potrebbe sembrare di poco conto ma in questo modo è possibile personalizzare determinate pagine senza nessuna conoscenza particolare di programmazione e con pochissimo lavoro. Il miglior modo per capire di cosa si sta trattando, è quello di vedere degli esempi specifici.

Quando utilizzare i Suffissi Classe CSS

Poniamo il caso che il nostro sito web contenga un determinato numero di Layout Blog Categoria, ognuno per ogni Categoria, appunto. Se si desidera avere tutte queste pagine con la stessa visualizzazione, allora non è il caso di utilizzare i Suffissi di Classe CSS per la pagina. Ma ammettiamo che si desidera avere ciascuna Categoria con uno stile diverso rispetto alle altre; ad esempio un colore o una immagine di sfondo. Ancora, potremmo desiderare che il colore del titolo della pagina sia differente da quello delle altre.

In entrambi i casi, se si modificasse lo stile nel file template.css, tale formattazione interesserebbe tutte le pagine che hanno l'aspetto Layout Blog Categoria; un esempio potrebbe essere la classe "componentheading", comune alla maggior parte delle pagine.

Tuttavia, se si aggiunge un Suffisso di Classe CSS alla pagina, mediante la voce di menu, Joomla! creerà nuove classi CSS per ogni singola voce, in modo da avere, per ciascuna di essa, uno stile diverso.

Page Class Suffix

Prima di cominciare a vedere gli esempi, accertarsi che si disponga di un sito web con Joomla! installato e che il template di default sia il rhuk_milkyway. Se così non fosse, lo si potrebbe fare dal pannello di amministrazione, portandosi sulla voce di menu EstensioniGestione Templates ed impostarlo come predefinito. Ovviamente possiamo utilizzare qualsiasi template ma, per trovare una corrispondenza tra l'articolo e gli esempi, sarebbe bene avere lo stesso template.

Visualizzare una pagina senza il Page Class Suffix

Prima di aggiungere un Suffisso di Classe per la pagina, vediamo quale è la visualizzazione standard.

Nel front-end del sito scegliere dal menu "Pagine di esempio" la voce "Blog Categoria". Si apra la pagina in vista codice. Con il comando "Cerca", immettere nel campo di testo la parola "componentheading".  Dovremmo trovare un codice simile al seguente:

<div class="componentheading">

Andando ancora in basso, sempre nel codice, dovrebbero esserci i seguenti tag:

<table class="blog" cellpadding="0" cellspacing="0">
<table class="contentpaneopen">
<td class="contentheading" width="100%">
<table class="contentpaneopen">

La screen di seguito riporta  formattazione del div componentheading. Esso racchiude il titolo della pagina, prima dell' articolo:

div componentheading
Div con classe componentheading
<div class="componentheading">
Esempio aspetto di una categoria blog (Categoria FAQ/Generale)
</div>

L'immagine successiva, invece, mostra la tabella alla quale è stata assegnata la classe "blog" ed all'interno della quale si trovano tutti gli articoli:

table class blog
Table con classe class "blog"

Come si può notare dalle 2 immagini, è molto semplice individuare sia gli elementi nel codice sorgente della pagina che nel file CSS. Per l'esempio in oggetto è stato sufficente assegnare un bordo al <div class="componentheading"> ed un altro bordo, più colore di background, alla <table class="blog">.

La prossima screen mostra la tabella con la classe "contentpaneopen" per il titolo dell'articolo. Essa comprende il titolo dell'articolo più i pulsanti PDF, Stampa ed Email:

table contentpaneopen
Table con classe "contentpaneopen"

L'immagine seguente mostra la classe "contentpaneopen" che contiene il nome dell'autore, la data, il corpo dell'articolo e, in basso, l'ultimo aggiornamento apportato all'articolo:

table contentpaneopen
Table con classe "contentpaneopen"

Questa breve panoramica ci permette di comprendere come Joomla! presenta gli elementi di un Layout Categoria Blog , formattato attraverso il codice contenuto nel file "template.css".

Utilizzare Page Class Suffix

Adesso che abbiamo visto la pagina senza la Page Class Suffix, proviamo ad implementarne una. Nel backend di Joomla, portarsi alla voce "MenuPagine di EsempioBlog categoria. Nella parte destra della pagina, Parametri, selezionare "Parametri - Sistema". Nel campo di testo, accanto alla label "Suffisso class CSS pagina" inserire il valore: "-mySuffix" e salvare dal pulsante in alto a destra.

Si torni nel frontend del sito e si aggiorni la pagina; selezionare la voce del menu "Pagine di esempioBlog categoria". Si noterà immediatamente che è stato perso lo stile dato precedentemente alla pagina ed ora vedremo il motivo. Si apra la pagina in vista codice e con il comando "Cerca" si trovino le occorrenze del suffisso inserito precedentemente: "mySuffix"; avremo il codice come quello riportato di seguito:

<div class="componentheading-mySuffix">
Esempio aspetto di una categoria blog (Categoria FAQ/Generale)
</div>

Se si guarda il codice sorgente,  dovremmo avere anche le seguenti classi:

<table class="blog-mySuffix" cellpadding="0" cellspacing="0">
<table class="contentpaneopen-mySuffix">
<td class="contentheading-mySuffix" width="100%">

Cosa è successo alla pagina? Con l'aggiunta del Page Class Suffix, sono stati cambiati tutti i nomi delle classi. Questo significa che lo stile CSS iniziale, il quale si riferiva a tutti gli elementi  di "base" (come componentheading, blog ecc..), non verrà più applicato perchè non esiste più.

Il problema lo si risolve editando, o modificando, il codice CSS contenuto nel file "template.css", aggiungendo lo stile per la nuova classe:

Esiste anche un modo più semplice per avere la classe personalizzata su un elemento; basta aggiungere uno spazio prima del parametro:

spazio prima del suffisso
Spazio prima del suffisso

Salvare e tornare nel frontend. Aggiornare la pagina e lo stile iniziale è riapparso. Vediamo nel codice sorgente cosa è successo. Con il comando "Cerca", troviamo la prima occorrenza del suffisso inserito: "mySuffix". Adesso abbiamo:

Poichè abbiamo messo uno spazio nel Page Class Suffix, è come se avessimo creato una seconda classe anzichè cambiare il nome della prima (questo è accettato da tutti i browser moderni). Quindi non abbiamo alcuna interruzione degli attuali stili CSS per questa pagina. L'unica cosa della quale ci si deve accertare è che il nuovo nome della classe sia diverso rispetto a qualsiasi altra classe utilizzata nella pagina; ciò potrebbe causare una "stilizzazione" non desiderata.

La nuova classe creata, anteponendo uno spazio alla Suffisso Classe CSS Pagina, prende il nome di "mySuffix"; se volessimo, per puro esempio, un titolo pagina con colore di background celeste, bordo rosso e scritta di colore bianco, possiamo scrivere:

div.mySuffix{
background:#09d;
color:#fff;
font-weight:bold;
font-size: 1.3em;
text-align: left;
padding:5px 0 5px 5px;
border:5px solid red;}

Il risultato è il seguente:

classe mysuffix
Aggiunta della classe mysuffix

La classe associata funziona bene per il nostro esempio in quanto le altre classi sono assegnate all'elemento "table" e non al tag "div". Sarebbe bene essere più specifici con il codice CSS per il selettore, nel foglio di stile, formattando gli elementi che contengono sia la classe di base che la nuova classe. Per esempio, se volessimo formattare la tabella che contiene tutti gli articoli, dovremmo scrivere:

.blog.mySuffix {background-color: #FAFAD2;}

Specifichiamo, in questo modo, che il nuovo stile verrà applicato agli elementi che hanno contemporaneamente la classe "blog" e "mySuffix". Avremo un colore di background per tutto il "blog" come mostrato nella successiva immagine:

suffisso applicato alla tabella blog
Suffisso applicato alla tabella blog

Il motivo che rende molto potente la creazione della classe con il trucco dello spazio, è che non si devono copiare - e doppiare -  tutti gli stili delle classi di base. Possiamo individuare soltanto lo stile che vogliamo e scrivere il codice CSS per esso.

In questo esempio abbiamo trattato la visualizzazione Blog - Categoria. I nomi delle classi per i diversi componenti possono essere differenti, ma il processo sarà lo stesso.  La tabella seguente mostra alcuni layout comuni di Joomla! ed un elenco di classi che possono avere un Page Class Suffix aggiuntivo:

LayoutNomi CSS Classi Utilizzate
Layout Articolo componentheading, contentpaneopen, contentheading, contentpagetitle
Blog Categoria, Blog Prima pagina , Blog Section componentheading, contentpagetitle, blog, contentpaneopen, contentheading, readon, blog_more
Lista Categoria, Lista Sezione componentheading, contentpane, contentdescription
Categoria Contatti componentheading, contentpane, contentdescription, sectiontablefooter, sectiontableheader, category
Layout Contatti componentheading, contentpaneopen, contentheading

Riassumendo:

  1. anteporre lo spazio per creare una nuova classe CSS;
  2. cercare nel codice della pagina dove si trovano le nuove classi e le classi di base;
  3. per semplificare il tutto, avvalersi di Firebug per individuare gli elementi corrispondenti a determinate zone della pagina;
  4. aggiungere il codice css personalizzato in un punto preciso del file "template.css", specificando sia il nuovo nome della classe che il quello di base evitando, in questo modo, conflitti apparentemente irrisolvibili nel frontend.

Module Class Suffix

Il parametro Module Class Suffix funziona nello stesso ed identico modo del Page Class Suffix. Vediamo subito un esempio con un modulo presente di default: Ultime Notizie. Portarsi nell'area di amministrazione di Joomla! e dal menu superiore orizzontale selezionare: EstensioniGestione ModuliUltime Notizie. Entrare nella modalità editing del Modulo per apportare modifiche; inserire il nome di una classe nel campo di testo contrassegnato dalla label: Suffisso classe CSS modulo, come nell'immagine seguente:

module suffix
Module Suffix

Per l'esempio ho aggiunto il Suffisso "LatestClass"; da notare che il suffisso è preceduto da uno spazio. Si torni nel frontend del sito e si visualizzi il codice sorgente della pagina. Con il comando "Cerca" inserire l'occorrenza "LatestNews". Avremo il codice simile a quello seguente:

<div class="moduletable LatestClass">

per quanto riguarda il <div>; per l'elemento <ul>, invece:

<ul class="latestnews LatestClass">

Le classi "moduletable" e "LatestClass" sono create automaticamente. La nuova classe "LatestClass" è stata creata in quanto il Suffisso classe CSS modulo comincia con uno spazio. Adesso proviamo ad usare la  nuova classe ed aggiungere qualche stile personalizzato. Nel file template.css aggiungere:

div.LatestClass {background-color:#FFFFD2;}
div.LatestClass h3, 
ul.LatestClass, 
ul.LatestClass a 
{color:#8B4513;}

Salvare il file ed aggiornare la pagina. Dovremmo avere un risultato simile al seguente:

Classe personalizzata per il modulo
Classe personalizzata per il modulo

Il selettore div.LatestClass imposta il colore di sfondo dell'area intera del <div>. I 3 selettori: div.LatestClass h3, ul.LatestClass, ul.LatestClass a impostano il colore del testo per il titolo h3, i punti elenco del tag ul e del tag "a".

Non interferire con le classi CSS esistenti

Nei menu si deve fare attenzione a non creare conflitti con le classi già esistenti. Vediamo come funziona. Nell'amministrazione di Joomla! portarsi su EstensioniGestione Moduli ed entrare nel "Menu Principale". Espandere il tab: Parametri Avanzati. Notare che il Suffisso classe CSS modulo è impostato su "_menu", senza spazio iniziale. Portarsi nella home page del sito e vedere il codice della pagina:

<div class="module_menu">

Si noti che alla classe è stato dato il nome "module_menu" come impostato nel Suffisso CSS del modulo. Il codice CSS per tale classe la troviamo nel file "blue.css". Al menu viene assegnata una immagine di sfondo con bordi di colore blue intorno al menu. Proviamo ad eliminare il suffisso CSS per il modulo; ritorniamo nella home page del sito ed aggiorniamo la pagina. Nessuna stilizzazione apparirà attorno al menu. Questo sta a dimostrare un punto molto importante: tutti i moduli esistenti, in particolare i menu, dipendono dalle classi assegnate e dai suffissi impostati. Questo per dire che si deve fare molta attenzione quando andiamo a modificare qualcosa di già pre-formattato.

Cosa accadrebbe se si volesse aggiungere una seconda classe al menu principale? Proviamo a scrivere, dopo il Suffisso esistente, un altro che possiamo chiamare myMenuStyle, lasciando uno spazio tra i nomi delle due classi. Possiamo salvare ed aggiornare il frontend. Non viene ancora modificato nulla, a livello di visualizzazione, in quanto non esiste nessun codice CSS per tale classe. Nel foglio di stile scriviamo:

div.myMenuStyle{font-size:14px;}

Portare in remoto il file .css ed aggiornare il sito. Il testo del Menu Principale adesso ha una dimensione differente, per il font, rispetto agli altri menu. Molto comodo per personalizzare un solo menu e lasciare intatti tutti gli altri.

ID Tag Menu e Suffisso classe CSS menu

Tutti i moduli di base permettono di inserire, per quanto visto sino ad ora, un  suffisso per creare una nuova classe. I Moduli Menu hanno due parametri aggiuntivi:

Vediamo come possiamo sfruttare questi altri due parametri.

ID Tag Menu

Portiamoci nell'area di amministrazione ed entriamo nell' editing del modulo "Menu Principale". In corrispondenza della label "ID tag Menu" scriviamo nel campo di testo: myID. Parallelamente dovremmo inserire il codice CSS nel relativo file template.css:

#myID{list-style-type: square;}

Salvare il file e trasferirlo in remoto. Aggiornare la pagina ed ecco che solo il menu principale ha, al posto dei bullets di default, il quadratino, come appena stabilito da codice.

Suffisso classe CSS Menu

Il Suffisso classe CSS Menu aggiunge una classe extra per le liste non ordinate. Se viene lasciato così com'è, il suffisso è, di default, "menu". Se aggiungiamo un suffisso tipo "_myClass" nel tab dei Parametri AvanzatiSuffisso classe CSS Menu, avremo: "menu_myClass".

Se andiamo nel frontend e cerchiamo "Menu principale", troveremo i seguenti tag:

<h3>Menu Principale</h3>
<ul class="menu_myClass" id="myID">

Da questo si evince come è possibile creare classi al volo con Joomla! e personalizzare ulteriormente un elemento rispetto a tutti gli altri.

Conclusioni

I parametri Class Suffix e ID Tag Menu consentono di avere una migliore stilizzazione del proprio sito web. Con l'introduzione dello spazio, dopo il suffisso esistente, si possono creare delle nuove classi. Questo, normalmente, è il metodo preferito in quanto il nuovo nome della classe non entra in conflitto con una pre-esistente lasciando intatta tutta la presentazione del sito.

Fonte: docs.joomla.org

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati