CSS e classi personalizzati: Applichiamoli anche a Joomla!FAP

Abbiamo già visto in "Il web e i colori: la comunicazione ottimale" quanto sia importante - ai fini della efficacia della comunicazione per il nostro sito - la scelta dei colori e, di contro, quanto la gestione di questi sia problematica per andare incontro alle esigenze di chi ha difetti visivi.
Questa è una delle ragioni della possibilità di "switch" al template ad alto contrasto esistente in Joomla!FAP.
Ma questo, a chi il sito lo deve creare e mantenere, produce alcuni problemi ulteriori:
Attribuire un colore a brani di testo, serve, spesso, ad evidenziare un determinato passaggio, ma:

• l'apposito tastino dell'editor per colorare un testo si limita ad aggiungere un attributo "color" al testo stesso. Questa "dichiarazione, rende la pagina "non valida"!!! Nella migliore delle ipotesi (con l'uso di html purifier, ad esempio) questo attributo viene modificato in uno "style color".
• problema più grave: cambiando al template ad alto contrasto, il colore attribuito rimane tale. Se su uno sfondo bianco un blu intenso evidenzia il testo, sullo sfondo nero dell'alto contrasto questo testo diverrà praticamente invisibile.

Come fare?



Anche perché questo è ancora più vero e importante se operiamo su un sito accessibile (ovviamente mi riferisco ai siti "realmente" accessibili, non ai falsi accessibili ).
In un sito accessibile, infatti, non solo dobbiamo prestare estrema attenzione ai colori che usiamo, ma dobbiamo sempre tenere presenti i difetti visivi.
Occorre, allora, trovare una soluzione che ci consenta di ovviare a entrambi i problemi. Come? Lavorando sui css. Vediamo come:
Dotiamoci di Colour Contrast Analyser e teniamo a portata di mano questa tabella.

Con l'aiuto della tabella, stabiliamo quale deve essere il colore del nostro testo evidenziato sullo sfondo bianco del template di default e quale deve essere il colore sul template ad alto contrasto (nero).

Con l'aiuto di Colour Contrast Analyser verifichiamo che per il template di default venga superato, con un margine sufficiente il livello AA per il contrasto (erroneamente indicato, in Colour Contrast Analyser, come "algoritmo luminosità"), e che la differenza di colore/luminosità (algoritmo "differenza di colore") dia un risultato superiore a 500 per la differenza di colore e superiore a 125 per la differenza di luminosità. Per il template ad alto contrasto il livello da superare è AAA, gli altri due parametri mantengono lo stesso limite minimo

Appuntiamoci le notazioni HEX dei colori (ad esempio #0000ff per lo sfondo bianco e #00ffff per lo sfondo nero).
Utilizzando, poi, un editor di testo senza formattazione (fortemente consigliato: notepad++) creiamo un file nuovo che chiameremo, ad esempio, customfap.css e scriviamo dentro le nostre nuove classi personalizzate (che ho chiamato "evidenzia"), indicando pure a quale dei due template vanno applicate, così:

body.black .evidenzia{
font-family: Tahoma,sans-serif;
font-weight: bold;
font-size: 100%;
color: #bfffee;
}

body.white .evidenzia{
font-family: Tahoma,sans-serif;
font-weight: bold;
font-size: 100%;
color: #0000ff;
}

Per evitare che ad ogni nuovo aggiornamento del template di Joomla!FAP il nostro css venga eliminato, carichiamo questo file in una apposita cartella fuori dalla cartella del template accessibile. Sotto /templates, creiamo una nuova cartella (in questo esempio l'ho chiamata fapcss) nella cartella superiore, rispetto al template accessibile e quindi nella cartella /templates.

Carichiamo il nostro nuovo css in questa cartella appena creata.

Editiamo il file /templates/accessibile/index.php e cerchiamo questa linea:

 <link href="/<?php echo JURI::base();?>templates/<?php echo $this->template; ?>/css/template_css.css" rel="stylesheet" type="text/css"/>

Per evitare errori di digitazione, duplichiamola:

 <link href="/<?php echo JURI::base();?>templates/<?php echo $this->template; ?>/css/template_css.css" rel="stylesheet" type="text/css"/>
 <link href="/<?php echo JURI::base();?>templates/<?php echo $this->template; ?>/css/template_css.css" rel="stylesheet" type="text/css"/> 

Modifichiamo il percorso della riga duplicata (la seconda che abbiamo inserito) per far si che "punti" verso il nostro nuovo css:

 <link href="/<?php echo JURI::base();?>templates/fapcss/customfap.css" rel="stylesheet" type="text/css"/>

Adesso le nostre due righe saranno:

 <link href="/<?php echo JURI::base();?>templates/<?php echo $this->template; ?>/css/template_css.css" rel="stylesheet" type="text/css"/>
 <link href="/<?php echo JURI::base();?>templates/fapcss/customfap.css" rel="stylesheet" type="text/css"/> 

Ora si pone un altro problema:
L'editor non riconosce queste classi di css e quindi se evidenziamo una porzione di testo per attribuire lo stile ... non lo troveremo nella casellina a discesa.

Armianoci di pazienza e riapriamo il nostro notepad++
Creiamo un altro file css (chiamiamolo "editorfap.css")
scriviamo dentro solo:

.evidenzia {}

salviamolo e carichiamolo nella stessa cartella in cui abbiamo messo il customfap.css.

Se utilizziamo TinyMCE, entriamo in gestione plugin ed editiamo il nostro "Editor - TinyMCE 2.0"




Nei parametri a destra (vedi figura), impostiamo su "si" il parametro "classi css template" e, nel campo "classi css personalizzate" mettiamo la URL (sarebbe più corretto chiamarla URI, ma non confondiamodi le idee) del nostro editorfap.css (ad esempio: http://www.tuosito.it/templates/fapcss/editorfap.css)











Se utilizziamo jce, menu "Componenti"--> JCE -> Administration -> Configuration. A sinistra, nella sezione "Formattazione" (vedi figura), impostiamo su "personalizzato" il parametro "Editor Classi Contenuto", su "no" il parametro "Usa Modello CSS" e, nel campo "Usa file CSS personalizzato", mettiamo il persorso relativo verso il nostro css (nel nostro esempio, /templates/fapcss/editorfap.css)













Chiudiamo la sessione di amministrazione e rientriamo.




Aprendo l'editor, adesso, vedremo che la casella a discesa "Stili" vedremo nuovo stile.

Ovviamente, pur attribuendo lo stile, nella finestra dell'editor non vedremo alcuna modifica al testo selezionato, ma dal front-end avremo l'effetto dovuto.

prova stile su sfondo bianco

prova stile su sfondo nero

Questa tecnica è utilizzabile anche per sovrascrivere classi di css già esistenti nel nostro template.

Infatti, avendo trascritto il richiamo al nostro css nella riga successiva a quello di default, nel nostro index.php, le classi che abbiano identico nome verranno sovrascritte da quelle personalizzate
Commenta questo articolo sul forum