Migliorare l'aspetto della paginazione

Diciamolo pure con franchezza: la paginazione di default in joomla 1.6 lascia davvero a desiderare. Però la possiamo decisamente migliorare utilizzando la tecnica dell'override del template che anche per Joomla! 1.6 funziona pressapoco nello stesso modo di Joomla! 1.5.

Ciò premesso precisiamo che la paginazione in Joomla! è quella barra che compare (se così hai scelto nei parametri) in fondo a una pagina web creata da una voce di menu di tipo blog sezione, categoria o aspetto prima pagina, che in joomla!1.6 si dice In evidenza. Questa barra, oltre a indicare il numero della pagina in cui ci troviamo mostra una serie di pulsanti con scritto precedente, successivo, inizio, fine,.... Poi nel singolo articolo si trasforma in due pulsantini: Precedente e Successivo.

Ecco l'aspetto della paginazione del template beez_20 in joomla 1.6 che, come dicevamo, pur perfettamente funzionale all'uso, non brilla quanto a resa grafica.

 

Vediamo allora come migliorarla. Il file che useremo per questo override lo potete scaricare da qui. Dopo averlo scaricato lo dezippate nel vostro computer. Si  chiama pagination.php e andrà collocato dentro la cartella html del vostro template (se non c'è fatela) via ftp. Questo file avrà il compito di sovrascrivere la paginazione originata dall'apposito plugin di Joomla|!

Dopo aver fatto questo dovete aprire il vostro file css principale ed incollarci in fondo (io le metto sempre in fondo le regole aggiunte, cosi le trovo comodamente se devo rimetterci mano) queste regole:

.pagination {
text-align: center;
}
p.counter {
padding:10px;
}
.pagination span, .pagination a, ul.pagenav li a {
font-size:12px;
margin:5px;
padding:5px 5px;
background:#F3F3F3;
border:1px solid #000 !important;
position:relative;
color:#666;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagination a, ul.pagenav li a {  
font-weight: bold;
text-decoration:underline;
font-size:12px;
background: #C4C3C0;
}
.pagination a:hover,ul.pagenav li a:hover  {
background:#3074b3;
color:#fff;
}

Vedete che il risultato finale è decisamente più gradevole della paginazione di default!
Attenzione che se usate Internet Explorer in una versione precedente alla 9 probabilmente non vedrete gli
angoli arrotondati, che vengono realizzati con una regola css che ancora quel browser non supporta.

Potrete naturalmente personalizzare quelle regole con i colori che meglio si adattano al vostro template.

Qui sotto vedete soltanto i pulsanti precedente  e successivo. Mentre qui vedrete la paginazione relativa all'aspetto blog categoria fatta con questo tutorial.

babbo natale

Su questo sito usiamo i cookies, anche di terze parti. Navigandolo accetti.