Evitare la sovrascrittura di un template di Joomla modificato

{source}<sommario1>Nel capitolo 2 di Siti efficaci con Joomla ho descritto alcuni modi per evitare che il template modificato venga sovrascritto dagli aggiornamenti, che renderebbero inutile il lavoro fatto. C’è anche un’altra soluzione, che presenta diversi aspetti positivi: creare un vero e proprio CSS aggiuntivo</sommario1>{/source}

Nel libro ho indicato due soluzioni per evitare che eventuali aggiornamenti del template sovrascrivano le modifiche che hai apportato al template stesso:

• l’override del template
• il confronto tra la vecchia e la nuova versione del file prima di effettuare l’aggiornamento.

Il primo sistema ha i grandi vantaggi di non richiedere alcuna manutenzione e di permettere che gli aggiornamenti vengano effettuati senza problemi. Il grande aspetto negativo è invece il fatto che il CSS del template effettivamente usato non è quello aggiornato, ma quello vecchio. Gli aggiornamenti dei template sono modifiche strutturali, cioè modificano la struttura del template adattandolo alle nuove esigenze. Per esempio, contengono una o più classi nuove, usate per elementi anch’essi appena definiti. In questo caso, il mancato aggiornamento del CSS può provocare qualche problema di layout.

Il secondo sistema ha il vantaggio di consentire di inserire nel nuovo file dell’aggiornamento le modifiche apportate al vecchio CSS. Si può farlo in maniera semiautomatica con un software di confronto: io ho consigliato Meld, che è disponibile per Linux. Ma anche per il software prigioniero ci sono software simili. Lo svantaggio è che questa operazione occupa un po’ di tempo (secondo la quantità di modifiche apportate) e che è comunque delicata.

In questo articolo descrivo una terza soluzione, che permette di superare tutti gli aspetti negativi delle due precedenti.

Un CSS personale

La creazione di un CSS personale è, per molti aspetti, il classico uovo di Colombo. In pratica, le modifiche apportate al template non si memorizzano nel CSS originale del template, ma in un CSS personale, costruito appositamente.

In questo modo, il CSS originale può subire tutte le sovrascrizioni derivanti da aggiornamenti, poiché le modifiche residenti nel CSS personale non vengono toccate e continueranno a funzionare. Grazie a ciò, anche le modifiche strutturali dei CSS aggiornati (come la succitata introduzione di nuove classi) funzioneranno correttamente.

L’unica vera difficoltà è istruire il template a utilizzare anche il CSS personale, ma è una difficoltà che si supera agevolmente, una volta capito come fare.

Per rendere più comprensibile tutto il procedimento, in questo articolo creo un CSS personale semplicissimo, che imposta l’aspetto dei titoli di terzo livello. I titoli di terzo livello sono quelli identificati dal tag <h3>, che viene inserito nel codice HTML quando nell’editor TinyMCE scegli Intestazione 3 (o Heading 3). Grazie al nuovo CSS personale, i titoli di terzo livello compariranno in rosso e sottolineati.

Per far ciò, ho leggermente modificato l’articolo di benvenuto predefinito di Joomla, inserendo un titolo di secondo livello e due titoli di terzo livello.

{boxplus href=|images/Articoli/0012_01.png| title=|I titoli di secondo e di terzo livello sono indicati dalle frecce|}{/boxplus}

Individuare le regole

Per sapere quali sono i selettori su cui operare io uso (come ho descritto nel libro) gli strumenti di analisi integrati in Firefox. Anche Chrome ha strumenti di analisi simili, mentre non so nulla di Internet Explorer né di Safari.

{boxplus href=|images/Articoli/0012_02.png| title=|Usando gli strumenti di analisi di Firefox riesci a individuare facilmente il selettore cui si riferisce la regola del CSS|}{/boxplus}

Anche se in questo caso sarebbe stato davvero semplice ipotizzare che il selettore usato per i titoli di terzo livello fosse h3 (gli standard web sono qui per questo), gli strumenti di analisi di Firefox me ne danno la conferma.

Creazione del CSS personale

A questo punto puoi creare il CSS personale. Io l’ho chiamato swg.css ma ovviamente puoi chiamarlo come più ti piace.

Il contenuto del file è una manciata di byte:

h3 {

color:red;

text-decoration: underline;

}

Salva il file e ponilo nella cartella css del tuo template. Nel caso dell’esempio io ho usato Protostar, il template predefinito di Joomla 3, perciò swg.css va posto in /templates/protostar/css.

Aggiorna la pagina web del tuo browser e... non succede nulla. In effetti, il template non sa che deve usare anche il CSS personale.

Per farglielo sapere, devi modificare il suo file index.php.

Modifica del file index.php

Il file index.php del template (quello cioè posto nella cartella /templates/protostar) definisce il funzionamento del template. Tra le altre cose, sono elencati i CSS che devono essere usati.

Nel caso di Protostar, vi è un solo CSS, che è memorizzato nel file template.css. L’istruzione in questione è:

// Add Stylesheets

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

Per far sì che Protostar usi anche il CSS personale, devi semplicemente aggiungere l’istruzione giusta:

// Add Stylesheets

$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

$doc->addStyleSheet('templates/'.$this->template.'/css/swg.css');

Nota bene: è assolutamente fondamentale che il riferimento al CSS personale sia successivo a quello del CSS predefinito. I CSS funzionano infatti in modo che l’istruzione letta più di recente si imponga su quella precedente.

In questo modo puoi inserire nel CSS personali istruzioni che sono contraddicono quanto contenuto nel CSS predefinito, contando sul fatto che quelle effettivamente usate sono quelle lette per ultime.

{boxplus href=|images/Articoli/0012_03.png| title=|Ora i titoli di terzo livello sono scritti in rosso e sono sottolineati|}{/boxplus}

Va da sé che dovrai comunque porre attenzione al fatto che il file index.php del template non venga sovrascritto durante un aggiornamento... Ma un conto è dover controllare tante istruzioni in più file, un altro conto è tenere sotto controllo un unico file.

Nel CSS personalizzato possono infatti essere inserite istruzioni per qualunque elemento, anche per quelli governati da CSS di estensioni installate: in questo modo, puoi raccogliere tutte le modifiche in un solo file, evitando di andare a toccare più fogli di stile a cascata.

Benché io non abbia avuto problemi, mi sento comunque di metterti in guardia su una possibilità: io non so in che ordine Joomla legga i CSS, perciò può essere che legga quelli di alcune estensioni dopo quello personale. In questo caso, le regole inserite in esso non hanno effetto.

Puoi aggirare il problema rendendo vincolanti le regole del CSS personale, inserendo

!important

alla fine dell’istruzione, prima del punto e virgola.

Ad esempio:

h3 {

color: red !important;

}

fa sì che l’istruzione abbia comunque la precedenza anche su quelle lette successivamente, a meno che anch’esse siano contrassegnate come importanti.

Un ultimo ritocco

Dalla figura precedente ti puoi essere essere reso conto che è vero che i titoli di terzo livello sono in rosso e sottolineati, ma lo sono anche i titoli dei moduli nella colonna di destra. Ciò è dovuto al fatto che l’impostazione predefinita di Protostar prevede che i titoli dei moduli siano scritti con il tag <h3>.

Come fare per avere i titoli dei moduli in nero?

Vi sono diverse soluzioni, ma io te ne segnalo una che riprende quanto visto in precedenza: consiste nell’usare gli strumenti di analisi di Firefox e di esaminare i titoli dei moduli, in modo da scoprire le regole che li governano.

{boxplus href=|images/Articoli/0012_04.png| title=|I titoli dei moduli sono governati da alcune classi. In particolare, vi è anche una combinazione delle classi .well e .page-header|}{/boxplus}

La regola evidenziata nella figura precedente è particolare, perché si riferisce a una combinazione di selettori. In pratica dice che quando questi due selettori si riferiscono entrambi a un determinato elemento, vige quella regola. Nel caso dell’esempio, quando al div è assegnata la classe .well e il div contiene un elemento h3 cui è assegnata la classe .page-header, allora vale la regola specificata.

Perciò basta che al tuo CSS personale aggiungi una semplice istruzione, in modo che il CSS diventi:

h3 {

color:red;

text-decoration: underline;

}

.well .page-header {

color: black;

text-decoration: none;

}

Così facendo, i titoli dei moduli sono neri e non sottolineati.

{boxplus href=|images/Articoli/0012_05.png| title=|I titoli dei moduli sono ora sono neri e non sottolineati, benché i titoli di terzo livello siano rossi e sottolineati|}{/boxplus}

Un aspetto positivo collaterale

Un vantaggio non cercato, ma importante, sta nel fatto che l’uso di un CSS personale consente di lasciare intatto il CSS (o i CSS) del template e di mantenerli nella forma minimizzata con cui vengono distribuiti.

Quando si modificano i CSS, è normale inserire commenti che descrivono la modifica, soprattutto se vengono inserite regole nuove; questo comporta però che la compattazione del CSS venga sporcata. Non si tratta di una cosa gravissima, ma i motori di ricerca gradiscono molto i CSS minimizzati.

Aspetti negativi

È un altro CSS che il browser deve leggere, che oltretutto contiene istruzioni contraddittorie rispetto a quelle lette in precedenza.

Ciò non fa sicuramente piacere ai motori di ricerca, che sicuramente penalizzeranno un po’ il sito (anche se non so con precisione a quanto ammonti questa penalizzazione).

Tuttavia c’è un sistema per ridurre il più possibile questa penalizzazione: minimizzare il CSS personale. Un articolo su come farlo in modo semplice è in preparazione.