Paginazione tipo Flickr per Mambo

Qualche giorno fa mi è capitato di leggere un articolo su come dare uno stile alla paginazione tramite css. La paginazione è quell'insieme di link che troviamo, ad esempio, nella parte inferiore dei blog o su Google, e la usiamo per passare da una pagina dei risultati all'altra.

Anche Mambo ha il suo sistema di paginazione che, pur non avendo a disposizione grosse possibilità di personalizzazione, possiamo trasformare con i css, ottenendo piacevoli risultati grafici. Ho provato su Mambo 4.6.3, ma la tecnica dovrebbe andar bene anche per Mambo 4.5.x, Mambo 4.6.x e Joomla!

La porzione di codice HTML su cui avrà effetto lo stile è la seguente:


<td valign="top" align="center">
   <span class="pagenav"><< Inizio</span> 
   <span class="pagenav">< Precedente</span> 
   <span class="pagenav">1</span> 
   <a href="http://www.minidesign.it/mos/Homepage/Itemid,1/limit,10/limitstart,10/" class="pagenav"><strong>2</strong></a> 
   <a href="http://www.minidesign.it/mos/Homepage/Itemid,1/limit,10/limitstart,20/" class="pagenav"><strong>3</strong></a> 
   <a href="http://www.minidesign.it/mos/Homepage/Itemid,1/limit,10/limitstart,30/" class="pagenav"><strong>4</strong></a> 
   <a href="http://www.minidesign.it/mos/Homepage/Itemid,1/limit,10/limitstart,10/ " class="pagenav" title="prossima pagina">Prossimo ></a>
   <a href="http://www.minidesign.it/mos/Homepage/Itemid,1/limit,10/limitstart,50/ " class="pagenav" title="fine pagina">Fine >></a>
   <br /><br />
</td>

Sia il testo normale che i link hanno la classe .pagenav, in più i numeri sono racchiusi nel tag strong, al quale non ho assegnato alcuno stile specifico.

Menu Flickr-like 

Ho preparato il css che permette di aggiungere al template di default (Waterandstone) uno stile di paginazione tipo Flickr:

.pagenav {
    letter-spacing: normal;
    line-height: normal;
    padding: 2px 6px 2px 6px;
    color: #AAAAAA;
    }
a.pagenav {
    padding: 2px 6px 2px 6px;
    border: 1px solid #DDD;
}
a.pagenav:link {
    color: #0063DC;
    text-decoration: none;
}
a.pagenav:visited {
    color:#E32878;
    text-decoration: none;
}
a.pagenav:hover {   
    background: #0063DC;
    border-color: #036;
    color:#FFF;
    text-decoration: none;
    }

 Il risultato è questo:

paginazione-tipo-flickr


Ma attenzione! Questo è un esempio applicato al template Waterandstone, quindi, se si usano template diversi, potrebbero rendersi necessarie delle modifiche.

Last Updated ( 06 Apr, 2008 at 01:13 PM )

Home arrow Cms arrow Mambo cms arrow Paginazione tipo Flickr per Mambo

 I Feed RSS di miniDesign

In evidenza
Il file htaccess
Tutorial mappa Google
Ultime notizie
Le più lette
Ricerca rapida