Come personalizzare i gravatar con un effetto mousehover

A partire dalla versione 2.5 Wordpress integra i gravatar.

Per chi non sapesse cos’è un gravatar: Gravatar.com. Registrandovi al sito e inserendo il vostro avatar, la vostra immagine verrà associata all’ indirizzo email con cui vi registrate e vi seguirà ovunque la funziona gravatar sia supportata.

Belli gli avatar per dare un volto o un’ immagine ai commentatori di un blog ad esempio.

Per aggiungere i gravatar al vostro tema basta aggiungere questa riga di codice in comments.php:

1
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

ovviamente laddove volete visualizzare l’ avatar, in genere prima del nome del commentatore, ovvero prima di

1
<?php comment_author_link(); ?>

Il numero “50″ sta ad indicare la dimensione in pixel dell’ immagine che potete modificare a seconda delle esigenze.

Poi visto che ci siamo diamo un tocco in più ai nostri commenti, aggiungendo non solo l’ avatar ma anche un simpativo effetto mousehover: l’ opacità. L’ avatar sarà opaco ma si schiarirà al passaggio del mouse.

Per ottenere questo effetto, che raramente “stona”, basta aggiungere nel file style.css il seguente codice:

1
2
/*stile per gravatar*/
3
img.avatar {float:left; margin-right:5px; border:solid; border-color:#fff;
4
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
5
-moz-opacity: 0.4;}
6
img.avatar:hover {float:left; margin-right:5px; border:solid; border-color:#fff;
7
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
8
-moz-opacity: 1;}
9

Abbiamo così aggiunto un bordino bianco alle nostre immagini e l’ effetto opacità!

Popularity: 1% [?]

Segnala presso:

Altri articoli interessanti:

• Ombra intorno alle immagini con Wordpress
• Centrare un div nel body
• Angoli arrotondati senza Css
• Effetto Page Peel con jQuery e Css
• Inserire gli Adsense nei post dopo n paragrafi