Una delle cose che attira maggiormente l'attenzione durante la navigazione in un sito è il modo con il quale viene mostrata la data negli articoli. Vediamo come possiamo mostrarla in modo originale e creativo.
In Joomla! 1.5 ci sono essenzialmente due modi principali per agire sul codice relativo alla data ed entrambi comportano l'aggiunta di codice per ogni parte dell'elemento data ( ad es. giorno, mese e anno) così da poterli gestire singolarmente con l’uso di specifiche regole CSS. Per impostazione predefinita il codice generato in output per mostrare la data nel normale contenuto di Joomla! è abbastanza semplice e prevede giusto una singola classe che avvolge l'intero elemento della data.
Il codice di default per mostrare la data
Questo il codice utilizzato da Joomla! 1.5:<?php if ($this->params->get('show_create_date')) : ?> <tr> <td valign="top" class="createdate"> <?php echo JHTML::_('date',$this->article->created, JText::_('DATE_FORMAT_LC2')) ?> </td> </tr> <?php endif; ?>
Questo frammento di codice si trova nel file default.php nel seguente percorso:
components/com_content/views/article/tmpl/default.php
Come potete vedere non è che abbiamo tante possibilità di formattare con fantasia la data con questo tipo di codice. Al massimo potremo cambiare font, dimensione, colore o sfondo agendo sulla regola createdate e tutti i cambiamenti avranno effetto sull'intera data: giorno mese ed anno.
Aggiungiamo tag a mezzo dei files di lingua
In joomla! 1.5 uno dei modi più semplici per aggiungere codice che ci permetta di formattare meglio la data è quello di modificare il file di lingua.Il codice che viene utilizzato per far apparire la data è infatti una semplice stringa DATE_FORMAT_LC2 che si trova nel file principale della lingua del sito. Nella versione localizzata in italiano che viene scaricata dal nostro sito il file che contiene la stringa è questo:
languages/it-IT/it-IT.ini
In Joomla! 1.5 la stringa si trova circa alla riga 13 ed è questa:
DATE_FORMAT_LC2=%A %d %B %Y %H:%M
Aggiungere tags per ogni elemento della data è una cosa abbastanza semplice. Siamo in grado di aggiungere qualsiasi tipo di elemento HTML qui, e quindi poi gli si può applicare uno stile tramite CSS. Un esempio di stringa di data modificata può essere questo:
DATE_FORMAT_LC2=<div class="dateWrap"><span class="day">%d</span><span class="month">%B</span><span class=year">%Y</span></div>
Noterete che abbiamo inserito ogni singolo elemento della data in un tag span con una specifica classe e poi racchiuso il tutto dentro un div con a sua volta una classe specifica per permettere un maggiore controllo sulla sua posizione e sulle caratteristiche applicate a tutti gli elementi.
Una volta fatta questa modifica nel file di lingua il codice che verrà stampato sarà questo ogni qualvolta la data sia richiamata in una pagina di Joomla! in cui nel codice si trovi DATE_FORMAT_LC2
Aggiungiamo tag con l'override del template
Il secondo metodo per modificare l'aspetto della data è quello di fare l'override del template. Si presuppone che siate già in grado di farlo, altrimenti seguite l'articolo.Per modificare l'aspetto della data nella visualizzazione articolo è necessario modificare il file di override che si trova in:
templates/tuo_template/html/com_content/article/default.php
Questa la parte di codice che richiama la data per Joomla! 1.5 :
<?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>
Per implementare lo stesso codice come nell'esempio precedente lo sostituiremo con questo:
<?php echo JHTML::_('date', $this->article->created, JText::_('<div class="dateWrap"><span class="day">%d</span> <span class="month">%b</span> <span class="year">%Y</span></div>')); ?>
Verifichiamo che l'override sia andato a buon fine
Dopo aver modificato con l'override l'output del codice che stampa la data andiamo a controllare con firebug che effettivamente le modifiche siano andate a buon fine. Il codice sorgente della data ci apparirà così:<div class="dateWrap"><span class="day">data giorno creazione</span> <span class="month">data mese creazione</span><span class=year">data anno creazione</span></div>
Attenzione: diversamente dal metodo della modifica del file di lingua, abbiamo fatto con questo override la modifica della data solo per quanto riguarda l'aspetto articolo.
Dopo aver modificato il codice di questo file sarà poi necessario modificare anche tutti gli altri aspetti in cui viene ad essere visualizzato l’output della data come ad esempio la categoria, la sezione o la visualizzazione della home page.
E' possibile aggiungere qualsiasi combinazione di sintassi della data in queste variazioni di codice. Per una lista completa dei vari formati di data e per la sintassi disponibile nei controlli di php consulta la guida completa per le date nel manuale PHP.
Creare il proprio stile
Possiamo finalmente iniziare a dare il nuovo stile alle date del nostro sito.Nel foglio si stile principale del vostro template (o in qualsiasi foglio di stile purchè richiamato dal template) potremo adesso inserire i selettori delle quattro regole con le quali formatteremo le date:
.dateWrap {} per il contenitore dell'intera data;
.day {} per il giorno;
.month {} per il mese;
.year {} per l'anno.
Adesso libero sfogo alla nostra fantasia nel formattare la data!
Per esempio se noi aggiungiamo al nostro foglio di stile queste regole:
.dateWrap {
background: #282F36;
height: 250px;
width: 200px;
float: left;
color: #fff;
margin: 0 20px 20px 0;
}
.day {
font-size: 12em;
display: block;
text-align: center;
padding-top:45px;
margin-bottom: 22px;
background: #fafafa;
color: #282F36;
padding-bottom: 30px;
font-family: georgia;
}
.month {
display: block;
text-align: center;
font-size: 3em;
margin-bottom: 30px;
font-family: helvetica, arial, san-serif;
}
.year {
display: block;
text-align: center;
font-size: 3em;
font-family: helvetica, arial, san-serif;
}
Se tutto è stato fatto a dovere apparirà una data davvero originale ed esagerata come questa che vedete a fianco. Possono essere necessari piccoli aggiustamenti nelle regole del css per rifinire del tutto l'aspetto della data.
Qui puoi vedere una demo dell'override della data. Ho utilizzato il template di default ja_purity in modo che tutti possano esercitarsi in questo override senta timore di far danni.
Abbiamo liberamente utilizzato per questo tutorial un articolo apparso in Joomla! community magazine alla cui traduzione e interpretazione ha collaborato grendizer71. Nell'articolo originale si fa l'esempio di come applicare l'override della data anche a Joomla! 1.6 ma c'è il piccolo dettaglio che il codice ... non funziona. Ma ci torneremo presto con un altro articolo. Naturalmente sono ben accetti osservazioni e suggerimenti.
Articolo scritto da tonicopi - Joomla Css Zen Garden
