Come aggiungere un bordo agli avatar dei commentatori e come renderli rotondi.

Come inserire un bordo intorno agli avatar dei commentatori e come farli diventare rotondi.

Dopo aver presentato un nuovo widget dei Top Commentatori rimango sempre in tema e vado a illustrare come adornare di bordo gli avatar di chi commenta il blog. Questa personalizzazione riguarda ugualmente anche l'immagine dell'autore del post e si ottiene mediante l'inserimento di un semplice CSS nel modello. Ricordo che gli stili dei bordi possono essere modificati a piacere tramite attributi e scegliendo appropriati codici dei colori. Mi riferirò esclusivamente agli ultimi template del Designer Modelli e ai commenti nidificati perché nulla si può dire sulle classi di stile di template scaricati da internet e i cui autori possono aver creato dei CSS con nomi qualsiasi.

I bordi si suddividono in solid (continui), dashed (tratteggiati), dotted (punteggiati), double (doppi). Ci sono poi anche altri attributi come inset, outset, ridge e groove che non è il caso di affrontare in questo post. Come prima modifica vediamo come visualizzare gli avatar in questo modo

dove intorno agli avatar sono stati inseriti dei bordi continui di 3 pixel. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

.avatar-image-container{
  border:3px solid #00FFFF !important;

quindi si salva il modello. Lo spessore del bordo, il suo stile e il suo colore possono essere personalizzati a piacere. Facciamo un altro passaggio e proviamo a mostrare gli avatar oltre che con un bordo anche in forma rotonda e con ombreggiatura

Per ottenere questo risultato bisogna aggiungere sempre sopra a ]]></b:skin> questo codice

.avatar-image-container,
    .avatar-image-container img {
     max-width: 48px !important;
     width: 48px !important;
     max-height: 48px !important;
     height: 48px !important;
     padding: 0 !important;
     border: 0px;
     -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
     border-radius: 50px;
    }
    .avatar-image-container{
     margin-right:5px !important;
     border:3px solid #00FFFF !important;
     -webkit-box-shadow: 0 2px 3px #088;
     -moz-box-shadow: 0 2px 3px #088;
     box-shadow: 0 2px 3px #088;
    }

dove i parametri in rosso possono essere personalizzati a piacere. Ricordo che con Internet Explorer 9 o inferiori non possono essere visti gli arrotondamenti e quindi gli avatar continueranno a essere quadrati. Con il nuovo Internet Explorer 10 saranno invece visti come nello screenshot.