REDAZIONE

In questo tutorial vi mostriamo come personalizzare la TagCloud, modificando la grafica e il numero di tag da visualizzare.

Per prima cosa andate nella sezione “Presentazione > Contenuto delle barre laterali di navigazione” e cliccate sul link “Aggiungi un testo” che trovate in fondo alla pagina.Nella finestra che si apre incollate il seguente codice:

 {tags assign="tag" from="0" limit="20" shuffle="shuffle" 
 popular="popular"} {if $tag.first}<div id="box-populartags" 
 class="box-decorator1"><div class="box-decorator2">
 <div class="box-decorator3"><div class="decorator1">
 <div class="decorator2"><h2>{t}Popular tags{/t}</h2>
 <br /></div></div><div class="boxcontent-decorator1">
 <div class="boxcontent-decorator2">
 <div class="boxcontent-decorator3">
 <ul class="popular-tags">{/if}<li>
 <a style="font-size: {$tag.tagcount|tofontsize};" 
 href="{$blog.url}tag/{$tag.name|urlencode}">
 {$tag.name|truncate:50:"..."}</a></li> {if $tag.last}</ul> 
 </div></div></div> </div></div></div>{/if}{/tags}     

Inserite un titolo e selezionate “No” sia alla voce “Visualizza il nome dell’oggetto” che  alla voce “Centra”, come si vede nell’immagine.

Clicca sull’immagine per ingrandirla.

Nella prima riga di questo codice trovate l’attributo limit="20".
20 è il numero di tag visualizzate, ma potete sostituirlo con un altro numero a vostro piacimento.

Salvate l’elemento e pubblicatelo in una delle colonne laterali.
Se ora andate nel vostro Blog, non vedrete un grande cambiamento nella tag cloud poiché non avete ancora modificato i suoi attributi nel Foglio di stile.

Quindi, andate nella sezione “Presentazone > Opzioni avanzate” e cliccate sul link “Modifica modello” del Foglio di stile.

Quello che vogliamo fare è:

1. aggiungere un bordo tratteggiato attorno ad ogni tag per definirle meglio e renderle più riconoscibili;
2. al passaggio del mouse la tag deve evidenziarsi, lo sfondo deve diventare di colore rosso e il testo bianco.

Vediamo in dettaglio il codice CSS che dovrete inserire nel Foglio di stile.

     ul.popular-tags li {
     line-height:35px;
     margin: 0px;
     }     

Dove:

• line-height:35px; definisce lo spazio tra una riga e l’altra;
• margin: 0px; definisce lo spazio tra una tag e l’altra in orizzontale.

 

     ul.popular-tags li a{
     padding:5px;
     border:1px dashed;
     }     

Dove:

• padding:5px; definisce lo spazio tra il testo e il bordo di ogni tag;
• border: 1px dashed; aggiunge il bordo tratteggiato di un 1 pixel attorno alle tag.

Noi abbiamo utilizzato un bordo tratteggiato definito dashed, ma potete utilizzare un bordo diverso.
Il bordo può essere:

No border.

Questo è un bordo dotted.

Questo è un bordo solid.

Questo è un bordo double.

Questo è un bordo groove.

Questo è un bordo ridge.

Questo è un bordo inset.

Questo è un bordo outset.

Questo è un bordo hidden.

 

     ul.popular-tags li a:hover{
     color: #FFF;
     background-color: red;
     padding:5px;
     }     

Dove:

• color: #FFF; definisce il colore del testo delle tag quando si passa sopra con il mouse. In questo caso #FFF è il valore esadecimale del colore bianco. Per conoscere i valori esadecimali degli altri colori potete utilizzare questo sito.
• background-color: red; defiinisce il colore di background che viene mostrato al passaggio del mouse su una tag;
• padding:5px; definisce lo spazio tra il testo e il bordo di ogni tag.

Potete modificare a vostro piacimento  tutti gli attributi che abbiamo visto. Di seguito trovate il codice completo da incollare nella colonna destra del Foglio di stile:

     ul.popular-tags li {
     line-height:25px;
     margin: 0px;
     }
      
     ul.popular-tags li a{
     padding:2px;
     border:1px dashed;
     }
      
     ul.popular-tags li a:hover{
     color: #FFF;
     background-color: red;
     }     

 

Buon lavoro!