Per personalizzare il titolo di ogni widget dovete prima individuare il loro rispettivo ID andando su Layout > Modifica e poi prendendo solo la parte finale dell'url presente nella finestra che apre.
Cambiare colore, font e dimensioni
Si va su Modello > Modifica HTML e si cerca il tag ]]></b:skin> e prima di esso si va ad incollare il seguente codice:#HTML1 h2 {font-size:24px; color:#f00; font-style:italic; font-family:Arial !important;}
In questo caso HTML1 è evidenziato in rosso perché è il parametro che varia per ogni widget. Il selettore del titolo dei widget normalmente è h2, ma nei temi più personalizzati potrebbe essere anche h3, h4 ecc.
Con questo codice css è possibile cambiare le dimensioni del titolo dei gadget (24px), il colore (#f00), il font (Arial),
Allineamenti
E' anche possibile aggiungere margini per spostarlo più a sinistra o a destra o per posizionarlo centralmente. In questo caso il codice potrebbe essere:#HTML1 h2 {margin-left: 10px important;} se lo volete 10px più a destra.
#HTML1 h2 {margin-left: -10px important;} se lo volete 10 px più a sinistra.
#HTML1 h2 {margin-left:auto; margin-right:auto; width:200px; } se lo volete centrato, ma in questo caso va indicato in pixel la larghezza totale in modo che calcoli automaticamente le misure.
Sottolineatura
Se volete che il titolo dei widget si veda sottolineato, il codice da usare sarà il seguente:#HTML1 h2 {text-decoration:underline !Important;}
Icona prima o dopo il titolo dei widget
Per inserire un'icona prima del titolo di un widget dovete usare il seguente codice:#HTML1 h2:before { content: url(LINK ICONA); padding-right:8px; }
Per inserire un'icona dopo del titolo di un widget dovete usare il seguente codice:
#HTML1 h2:after { content: url(LINK ICONA); padding-left:8px; }
In entrambi i casi va inserito all'interno delle parentesi tonde il vero url dell'icona che volete visualizzare.
