Aspetto Categoria Joomla!: visualizzare i titoli degli articoli in tabella con righe a colori alternati

La modalità appena citata consente di avere:

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:

  1. Override dell'output di Joomla!
  2. Aggiungere JavaScript esterno in Joomla!

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:

/components/com_content/views/category/tmpl/default_items.php

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 MenuMenu 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: "CategoriaAspetto categoria"; cliccare su quest'ultima voce.

Seleziona menu aspetto categoria
Seleziona menu aspetto categoria

Nel passaggio successivo - Parametri Standard - indicare:

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:

tabella con celle di colore alterno
Tabella con celle di colore alterno

Conclusioni

Con il minimo sforzo abbiamo ottenuto una tabella un po più gradevole alla vista. A volte i piccoli particolari hanno la capacità di attirare l'attenzione di chi guarda il nostro sito.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati