Il risultato finale sarà il seguente, cioè dei pulsanti neri che diventano gialli ogni volta che si passa sopra di essi con il mouse:
Per eseguire questa personalizzazione dovete andare su Modello > Modifica HTML e prima del tag </head> dovete aggiungere questo codice:
<style type='text/css'>
.Label a{
padding-left:5px;
font-weight: bold;
background:#000;
padding:0 5px;
color:#fff !important;
border-radius:10px;
-moz-border-radius:10px;
height:20px;
line-height:20px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .2s ease-in-out !important; 10px 10px;
float:left;
margin-left:3px;
margin-top:3px;
font-size:12px; }
.Label a:hover{
color:#000 !important;
background:#ff4; }
< /style>
Ovviamente come per ogni codice css può essere modificato a proprio piacimento, è possibile incrementare la dimensione e lo stile del font, lo sfondo, il colore ecc.
Ad esempio:
font-weight: bold; --> per cambiare il font del carattere.
text-transform:uppercase; --> eliminare questa riga per eliminare il testo stampatello.
color:#fff !important; --> è il colore del testo bianco quando non è selezionato.
Se volete modificare i pulsanti con il mouse posizionato sopra di essi dovete aggiungere css fra le parentesi graffe presenti dopo .Label a:hover.
Da notare che questo gadget funziona solamente se viene selezionato un numero di etichette inferiore a 30.