Premettiamo che alcuni template per Joomla, forniscono già opzioni di scelta dei caratteri usati nella parte pubblica. Spesso si tratta solo di Google Fonts o dall'apparenza simile. Tuttavia qualche cliente può chiederci di usare un font completamente diverso.
Se il template usato contiene la possibilità di modificare comodamente i CSS3, ad esempio tramite la modifica di un file dedicato personalizzato, allora il lavoro è molto semplice e potete passare direttamente a leggere dalla Fase 2 in poi di questa guida.
In molti casi, purtroppo, questa possibilità non è fornita. Per questo mostreremo una procedura di personalizzazione generica, applicabile a qualsiasi template, intervenendo sul template presente di base in tutte le installazioni di Joomla: Protostar.
Alcune parti della procedura che stiamo per presentare sono già state percorse da un precedente articolo di Joomla.it, sebbene sotto forma di video tutorial, e non di guida scritta. Mi riferisco alla duplicazione del template. Potete quindi affiancare, se volete, queste istruzioni con quel video (http://www.joomla.it/video-guide/8018-creare-una-copia-del-template-joomla-e-gli-override-dei-css.html).
FASE 1: DUPLICAZIONE DEL TEMPLATE PROTOSTAR
Per iniziare duplicheremo il template Protostar, in modo da agire sulla copia e da non perdere le modifiche che effettueremo in caso di aggiornamento del template.
Andiamo nel menù "Estensioni" e scegliamo "Template", poi, nel submenù, fra "Stile" e "Template" (o "Lista Template") sceglieremo quest'ultimo. Apparirà la lista dei template con a fianco la miniatura della rispettiva anteprima. A questo punto selezioniamo "Protostar Dettagli e File", e nella nuova schermata, cliccheremo sul pulsante in alto a sinistra chiamato "Copia Template". Ora potremo dare un nome al nostro nuovo template, ad esempio "Mio-Template".
Adesso dovremo definirlo come predefinito, chiudendo la pagina e tornando indietro alla schermata dove si possono modificare gli stili del template (pulsante "Stili" in alto a sx sulla barra laterale). Dall'elenco a destra sceglieremo il nome che abbiamo appena dato al nostro nuovo template e cliccheremo sulla stellina nella colonna centrale impostandolo come predefinito.
Se adesso si applica un refresh del lato pubblico del sito, quello che apparirà sarà il template che abbiamo copiato, anche se per ora è del tutto identico all'originale. Accedendo con un client FTP (ad es. Filezilla FTP client) alla cartella "Template" del sito, troveremo oltre agli altri template, anche il nostro: "Mio-Template".
FASE 2: REPERIMENTO DEL FONT PREFERITO GRATUITO SUL WEB
Esistono, online, alcuni siti che mettono a disposizione fonts usabili gratuitamente. Noi approfitteremo del sito FontSquirrel, perché ha la caratteristica di includere, nella maggior parte dei fonts offerti, un pacchetto di download contenente le diverse versioni adatte ai vari browsers e, molto spesso, perfino istruzioni su come includere tali fonts nel proprio sito. Infatti uno dei principali problemi nell'uso dei fonts, è superare i problemi di compatibilità fra i vari browsers.
Per il nostro esempio scaricheremo il Webfont Kit chiamato "CAC Champagne" che si trova al seguente indirizzo:
https://www.fontsquirrel.com/fonts/CAC-Champagne.
Esso possiede entrambe le caratteristiche sopra citate, inoltre è totalmente diverso dai comuni fonts che si usano sul web, per il semplice motivo che è poco pratico. Ma noi lo useremo per dimostrare proprio che non c'è impedimento neanche ad includere fonts inusuali.
Una volta scaricato sul nostro PC il pacchetto del font, lo scompattiamo trovando una cartella che contiene un file HTML su come usarlo, una licenza d'uso, le 4 versioni principali del font in TTF, EOT, WOFF e SVG, oltre ad altri file, di cui il più importante è quello che elenca i comandi CSS che dovremo inserire nel nostro nuovo template col comando CCS @font-face. Ricordiamoci di questo file.
Se disponiamo di un font solo in uno di questi formati, possiamo ricorre al @font-face Generator messo a disposizione sempre da FontSquirrel.
Caratteristiche principali dei formati:
- La versione TTF (TrueType Font) funziona sulla maggior parte dei browsers tranne Internet Explorer e Apple IOS.
- la versione EOT (Embedded OpenType) funziona solo con Internet Explorer.
- WOFF è una versione compressa.
- SVG è un formato vettoriale accettato da Apple IOS.
Tramite il nostro programma di FTP preferito, ad esempio il citato Filezilla, copiamo i file cac_champagne-webfont.eot , cac_champagne-webfont.woff , cac_champagne-webfont.ttf e cac_champagne-webfont.svg in una cartella a nostra scelta del nostro sito e ci appuntiamo il percorso di tale cartella.
FASE 3: INSERIMENTO COMANDI CSS E SOVRASCRITTURA CSS ORIGINALI
Usando il browser Mozilla Firefox, senza bisogno di Plug-in aggiuntivi, andiamo nel lato pubblico del nostro sito e clicchiamo col tasto destro del mouse su un elemento testuale di cui vogliamo modificare il font. Apparirà un menù contestuale da cui sceglieremo "Analizza elemento".
Se volete utilizzare il browser Google Chrome, cliccherete sempre col tasto dx sull'elemento testuale di cui volete modificare il font, e nel menù contestuale che apparirà sceglierete "Ispeziona".
Se infine usate Internet Explorer, dovete premere il tasto F12, e nel menu "Trova" della nuova finestra che apparirà, selezionare "Seleziona elemento con un clic", dopodiché andrete a selezionare l'elemento testuale che volete modificare.
Questo sistema, nelle sue tre varianti che abbiamo appena visto per i 3 browsers più diffusi, vi permetterà di individuare il comando (Tag) e il relativo stile CSS da modificare, che apparirà nell'apposita sezione "Stile" o "CSS" della finestra che avete aperto.
Per selezionare un elemento specifico e non tutti quelli che ricorrono in ogni pagina del sito, potete ricorrere ai selettori combinatori o di relazione che il CSS mette a disposizione.
Ipotizziamo per semplicità che il comando in questione sia semplicemente il tag <h1>, ma potrebbe essere benissimo <p>, <h2> o altro. Questo tipo di selezione così semplice del tag, senza altri selettori, si applicherà, ovviamente, a tutto il sito.
Adesso creeremo un nostro personale file CSS di override, che andrà a sovrascrivere quello originario del template che abbiamo duplicato, e tramite il quale potremo modificare il template stesso secondo le nostre particolari esigenze. Questa soluzione è preferibile rispetto a quella di andare ad apportare cambiamenti direttamente all'interno dei file CSS originali del template, perché più pulita e ordinata. Infatti le uniche regole CSS presenti saranno quelle che noi vogliamo cambiare.
Nel backend del sito, in "Estensioni->Template->Template" andremo di nuovo a cliccare sul link "Mio-Template Dettagli e File". Nella nuova schermata creiamo un nuovo file di tipo CSS cliccando il pulsante in alto "Nuovo file".
Nella finestra che apparirà sceglieremo come cartella di destinazione "CSS" (sulla sinistra), come tipo di file "CSS" (a destra), come nome del file quello che preferiamo, ad esempio "miostile", e poi cliccheremo su "Crea".
Copiamo e incolliamo all'interno di questo nuovo file "miostile.css" (il riquadro bianco che occupa la maggior parte della pagina) i comandi CSS contenuti nel file del WebFont Kit di cui abbiamo parlato nella Fase 2, e che abbiamo scaricato e scompattato in precedenza.
Precisamente, comandi CSS da aggiungere sono i seguenti:
@font-face { font-family: 'cac_champagneregular'; src: url('nome-nostra-cartella-online/cac_champagne-webfont.eot'); src: url('nome-nostra-cartella-online/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'), url('nome-nostra-cartella-online/cac_champagne-webfont.woff') format('woff'), url('nome-nostra-cartella-online/cac_champagne-webfont.ttf') format('truetype'), url('nome-nostra-cartella-online/cac_champagne-webfont.svg#cac_champagneregular') format('svg'); font-weight: normal; font-style: normal; }
La direttiva @font-face è quella che introduce il nuovo tipo di font. Bisogna usare un comando @font-face per ogni nuovo font che si vuole introdurre nel sito.
Il primo comando all'interno della definizione @font-face è "font-family" che deve contenere il nome del font che vogliamo includere. Possiamo scegliere qualunque nome, in questo caso sceglieremo quello ufficiale.
I successivi comandi "src" (source) indicano in quale cartella del nostro sito abbiamo salvato i font usabili (quella che ci siamo appuntati prima), assegnando il tipo di font giusto ad ogni tipo di borwser.
Cercate di tenere conto che quanti più fonts caricate, e quanto più pesanti risulteranno ciascuno di essi, tanto più sarà ritardato il caricamento della pagina del vostro sito.
Consideriamo anche che ogni font verrà visualizzato in maniera leggermente differente a seconda del browser utilizzato, l'unica soluzione è fare delle prove per controllare l'effetto finale.
Le ultime due righe sono comandi che definiscono le caratteristiche del font.
Dopo aver inserito i suddetti comandi CSS3, andremo ad aggiungere, subito dopo, quelli relativi al tag che vogliamo modificare e che abbiamo individuato in precedenza. Nel nostro caso abbiamo detto che si tratta del tag <h1>:
h1{ font-family: cac_champagneregular !important; }
Con questa breve istruzione non faremo altro che associare a tutti i tag <h1> del frontend del nostro sito, il font che abbiamo scelto, richiamandone il nome preciso, lo stesso che più sopra abbiamo definito.
Non ci resta che indicare a Joomla che il nostro nuovo file CSS deve andare a sovrascrivere di corrispondenti comandi CSS preesistenti.
Per fare questo dobbiamo aggiungere una nuova riga di comando al file index.php.
Prima di modificarlo, facciamo una copia di sicurezza di tale file, che si trova nella cartella principale del nostro sito. Ad esempio possiamo copiarlo in una cartella locale col nostro Filezilla.
Poi possiamo modificare questo file all'interno della pagina di personalizzazione del template nostro backend (oppure usare un text editor come Notepad++ su una sua copia e poi trasferirlo nella cartella remota). Quindi andremo di nuovo in "Estensioni->Template->Template" e cliccheremo su "Mio-Template Dettagli e File"
Dalla colonna laterale sinistra scegliamo il file "index.php" e lo scorriamo fino a trovare la riga preceduta dal commento:"// Add Stylesheets". Questo se si usa il template Protostar come nel nostro caso.
Selezioniamo tale riga interamente, la copiamo e la incolliamo subito sotto.
La lasciamo quasi del tutto inalterata tranne il nome del file CSS, come appare di seguito:
[...] // Add Stylesheets $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css'); $doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/miostile.css'); [...]
Siccome il file "miostile.css" viene letto dopo il file preesistente "template.css", lo sovrascriverà relativamente ai comandi che ricorrono al suo interno.
Ricordiamoci di salvare le modifiche.
Se abbiamo fatto tutto correttamente, andando ad aggiornare il frontend del nostro sito i titoli <h1> appariranno col nuovo font prescelto. Se vogliamo regolarne la dimensione o altre proprietà, sarà sufficiente aggiungere i relativi comandi CSS nel file "miostile.css", all'interno delle parentesi graffe del tag <h1>.
I cambiamenti che abbiamo apportato per il template Protostar predefinito di Joomla sono analoghi per qualunque altro template.
Siccome abbiamo operato su una copia del template, non ci sarà l'inconveniente di perdere tutte le modifiche che abbiamo fatto al momento dell'aggiornamento del template.
Commenta questo articolo sul forum 