Aspetto Categoria in Joomla!: visualizzare i titoli degli articoli in tabella con righe di colore alterno
La modalità appena citata consente di avere:
- numero progressivo dell'articolo
- titolo
- data di creazione
- nome autore
- numero di visite
il tutto incluso in una tabella. Va detto che l'aspetto categoria, per poter funzionare correttamente, necessita almeno del titolo. Il numero progressivo è stampato a video di default.
Ha attirato la mia attenzione , con l' aspetto categoria, il voler formattare la tabella non soltanto con il codice CSS, cosa molto semplice del resto, ma fare in modo che tale tabella apparisse con righe di colore alterno. In questo caso entrano in gioco, oltre ai fogli di stile, anche javascript e DOM.
Ho preso lo spunto dalla sezione javascript di html.it. L'articolo in questione si intitola: Tabelle con righe a colori alternati. Ho scaricato lo script ed ho cominciato a vedere che il risultato che avrei voluto ottenere avrebbe avuto un bell'impatto visivo, con una semplicissima implementazione del codice. Per poter raggiungere l'obbiettivo, trattandosi di un CMS dai moltissimi files presenti nel core, si necessita di rivedere altri due tutorial trattati nella presente categoria, scritti da me:
Procediamo per gradi.
Richiamare il codice javascript ed uplodare il file
Il file javascript si chiama: righe-alterne.js. Con un qualsiasi programma FTP (File Transfer Protocol) uplodiamo tale file nella sguente directory:
/media/system/js
nella root principale in cui è installato Joomla!
Passiamo adesso al file index.php del nostro template attivo. Si effettui il download e lo si porti sul nostro desktop. Lo si apra in vista codice e si inserisca il seguente codice tra <head> e </head>:
<?php $document = &JFactory::getDocument();
$document->addScript( '/media/system/js/righe-alterne.js' ); ?>
Riportare il file index.php in remoto, sempre nella cartella del template.
Override dell'output del core di Joomla!
Il file interessato alla visualizzazione dell' aspetto categoria è quello situato nella directory:
Tale file non deve essere assolutamente modificato. Metterci le mani potrebbe compromettere la visualizzazione del sito. A tal proposito ho preparato un file con lo stesso nome che eseguirà l' override dei contenuti. Alla fine della pagina, è presente il link per il download.
Come spiegato nell'articolo riguardante l' override dell' output di Joomla!, il file da scaricare dovrà essere messo nella cartella html, all'interno della directory del template attualmente in uso; in pratica avremo un percorso del genere:
/templates/Template-In-Uso/html/com_content/category/default_items.php
Se apriamo il file default_items.php in vista codice possiamo vedere alla riga 31, circa, la tabella con la classe associata: table class="righealterne". Il nome della classe non è casuale in quanto è stato definito già nel file righe-alterne.js.
Il codice CSS per la tabella
Fatti i passaggi precedenti, non dovremo fare altro che formattare la tabella come piace a noi. Nel file "template.css", contenuto nella cartella "css" del template, dobbiamo aggiungere il codice per la formattazione:
table.righealterne{
border-collapse:collapse;
width:98%;
margin:15px auto;}
table.righealterne th{
font-size:13px;
text-align:left;
padding:0 0 0 5px;}
table.righealterne td{
padding:4px 0;
font-size:12px;
vertical-align:middle;
height:28px;
padding:0 0 0 5px;}
table.righealterne tr.alterna td{background-color:#ddd;}
Creare sezione, categoria ed articoli
Dopo esserci dedicati al codice per poter ottenere la tabella con righe di colore alternato, possiamo creare una sezione, una categoria e degli articoli (minimo 5 per l'esempio) affinchè possiamo testare quanto fatto fin qui. Per l'esempio in questione ho creato sezione e Categoria nominandole "Articoli". Ho creato 6 testi e li ho assegnati a tale Categoria. Supponiamo si voglia creare il link che visualizza l'aspetto categoria, nel menu principale. Il procedimento, ormai noto, prevede che ci si porti in Menu → Menu Principale e premere sul pulsante in alto a destra Nuovo.
Dalla sezione "Seleziona tipo voce di menu" scegliere Articoli ed espandere tale voce; l'albero delle voci prevede, al 4° posto: "Categoria → Aspetto categoria"; cliccare su quest'ultima voce.
Nel passaggio successivo - Parametri Standard - indicare:
- la categoria dalla quale prendere gli articoli;
- il numero di articoli da visualizzare;
- se mostrare o nascondere l'intestazione della tabella;
- se mostrare o nascondere la colonna data ed il formato;
- se mostrare o nascondere il campo di testo per filtrare gli articoli;
Direi che gli altri parametri possono anche rimanere come sono, anche se è sempre consigliato "smanettarci" un pò per acquisire dimestichezza con il backend. Salvare il tutto ed aggiornare la parte di frontend del sito. Se tutto quanto è stato fatto correttamente, dovremmo avere un risultato simile alla figura riportata di seguito:
Conclusioni
Con il minimo sforzo abbiamo ottenuto una tabella un pò più gradevole alla vista. A volte i piccoli particolari hanno la capacità di attirare l'attenzione di chi guarda il nostro sito. Di seguito il link per il download della cartella con il file per l' override, come scritto durante l' articolo. Buon lavoro con le tabelle. :)
| < Prec. | Succ. > |
|---|
