Recentemente, ti abbiamo mostrato come stilizzare il layout dei tuoi commenti e come stilizzare il modulo dei tuoi commenti. Uno dei nostri utenti ci ha scritto chiedendo: "come hai reso rotonde le tue immagini gravatar? Stai archiviando le immagini gravatar localmente per renderle rotonde?" In questo articolo, ti mostreremo come visualizzare immagini gravatar rotonde in WordPress. Utilizzeremo la proprietà border-radius di CSS3 per creare immagini gravatar circolari.
La prima cosa da fare è modificare il file style.css del tuo tema. Puoi farlo utilizzando un programma FTP o andando su Aspetto » Editor nella tua bacheca di WordPress. Successivamente, vorrai aggiungere il seguente codice nel tuo file CSS:
.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Questo dovrebbe funzionare sulla maggior parte dei temi WordPress. Tuttavia, se questo non funziona sul tuo tema, allora c'è probabilmente qualche plugin o la funzione del tuo tema che interferisce con le classi predefinite utilizzate per i gravatar in WordPress. Per scoprire quale classe CSS utilizzano le immagini gravatar nel tuo tema, devi aprire un post del blog che ha commenti. Scorri fino alla sezione commenti e fai clic destro sull'immagine gravatar per selezionare Ispeziona elemento. Ti mostrerà il codice sorgente del tuo gravatar, in questo modo:
Se l'immagine gravatar ha qualcosa di diverso da avatar, allora usa quello invece di .avatar nel codice CSS sopra.
Speriamo che questo articolo ti abbia aiutato a visualizzare immagini gravatar rotonde sul tuo blog WordPress. Facci sapere se hai domande o feedback lasciando un commento qui sotto.
Rex
Molto tempestivo. Grazie mille.
Supporto WPBeginner
You’re welcome
Amministratore
pujara
Come aggiungere automaticamente l'immagine del commento come nel tuo sistema di commenti?
Nataly
ciao, ha funzionato, grazie, ma la descrizione appare troppo in alto. sopra l'immagine, sai come farla apparire a lato dell'immagine?
Therese
I can’t make it work.
I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.
Supporto WPBeginner
Hai aggiunto il CSS nel foglio di stile del tuo tema?
Amministratore
ERFmama
Sì, l'ho fatto. Ho il tema Twenty Twelve.
C'è un posto specifico dove deve andare? Nel file style.css
Edit: Never mind it suddenly worked now!
Posso chiedere come cambiare la dimensione degli avatar per favore? O l'hai già scritto da qualche parte?
Grazie mille per questo!
Daniel
Ha funzionato, grazie
Chrissy
Fantastico! Esattamente quello che stavo cercando! Grazie, siete fantastici!
Jacky
GRAZIE mille per questo, ho passato ore a cercare di realizzarlo. Hai fornito la soluzione più semplice!
Abdul Samad
Bro Grazie per questo codice, sono nuovo in WP e mi sto davvero godendo il tuo blog, amico, grazie per questo e per tutti i tutorial....
Richie
Volevo condividere questo suggerimento e ovviamente l'ho provato prima su uno dei miei siti.
Ha funzionato alla grande, ho semplicemente cambiato il mio CSS da px a % per il bordo moz e webkit.
Ecco dove le cose si sono fatte interessanti.
Sono andato su un altro sito, ho fatto la stessa modifica e non ha funzionato. Dopo un po' di grattacapi, mi sono ricordato che avevo installato il plugin WP User Avatar sul sito su cui aveva funzionato e non l'avevo installato sul sito su cui non aveva funzionato.
Ho installato il plugin e voilà, ha funzionato alla grande.
Per entrambi i siti sto usando un tema personalizzato costruito sul framework Presswork.
In conclusione, sono riuscito a farlo funzionare ma solo con il plugin.
Qualche idea?
Staff editoriale
È possibile che il tuo tema non stesse usando la classe CSS .avatar, e il plugin l'abbia aggiunta.
Amministratore
Richie
I’ll check it out. Thanks
Roselle Celina
Ciao, grazie per questo tutorial! Funziona benissimo su Chrome e Firefox, ma per Safari, ho lo stesso problema: http://jsfiddle.net/2UT8v/2/
Thanks in advance for your help
Staff editoriale
Sembra che lo spessore del bordo sia il problema in Safari.
Amministratore
RW
Sono d'accordo e uso IE solo circa il 4% delle volte, ma diversi miei clienti sono ancora alla versione 8.
Grazie,
Bob
Martin
If somebody uses IE8 does not deserve for round image
RW
Ottimo suggerimento. Si noti che IE8 non esegue nativamente gli angoli arrotondati (border-radius). Sarebbe necessario usare javascript, pie, ecc... per questo, ma non vale la pena. Fortunatamente IE9 riconosce gli standard attuali...
Grazie.
Jim Burnett
Ricordo i tempi in cui cercavamo di mantenere il supporto per IE6. Ora è IE 8 per gli angoli arrotondati. Fortunatamente, IE9 sta migliorando.
D'altra parte, FF 3.0 non supporta alcun HTML 5. *faccina triste*
Bel trucco CSS!