Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come visualizzare immagini Gravatar rotonde in WordPress

Di recente, vi abbiamo mostrato come creare un layout per i commenti e come creare un modulo per i commenti. Un utente ci ha chiesto via email: “Come avete fatto a rendere rotonde le immagini gravatar? State memorizzando le immagini gravatar localmente per farle diventare rotonde?”. In questo articolo vi 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 tema. Potete farlo utilizzando un programma FTP o andando su Aspetto ” Editore nell’amministrazione di WordPress. Quindi, aggiungete il seguente codice nel file CSS:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

Questo dovrebbe funzionare sulla maggior parte dei temi di WordPress. Tuttavia, se questo non funziona sul vostro tema, è probabile che qualche plugin o qualche funzione del vostro tema abbia interferito con le classi predefinite utilizzate per gravatar in WordPress. Per scoprire quale classe css utilizzano le immagini gravatar sul vostro tema, dovete aprire un articolo del blog che contiene commenti. Scorrete giù fino alla sezione dei commenti e fate clic con il tasto destro del mouse sull’immagine gravatar per selezionare Ispeziona elemento. Verrà mostrato il codice sorgente del gravatar, come questo:

Finding css class used by gravatar icon

Se l’immagine gravatar ha un nome diverso da avatar, usarlo al posto di .avatar nel codice css di cui sopra.

Speriamo che questo articolo vi abbia aiutato a visualizzare immagini gravatar rotonde sul vostro blog WordPress. Fateci sapere se avete domande o feedback lasciando un commento qui sotto.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

21 commentiLascia una risposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rex

    Very timely. Thank you so much.

    • WPBeginner Support

      You’re welcome :)

      Admin

  3. pujara

    How to add comment image automatically like in your comment system?

  4. Nataly

    hello, It worked, thank you, but, the description appear to high. over the pic, do you know to make it appear at the side of the pic?

  5. 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.

      • ERFmama

        Yes I did. I have the Twenty Twelve theme.
        Is there a specific place it has to go? In the style.css

        Edit: Never mind it suddenly worked now! :D

        Can I ask how to change the size of the avatars please? Or have you already written that down somewhere?

        Thank you so much for this!

  6. Chrissy

    Fantastic! Exactly what I was looking for! Thanks you guys rock!

  7. Jacky

    THANK YOU so much for this, spent hours trying to accomplish. You provided the most straightforward solution!

  8. Abdul Samad

    Bro Thanks For This Code I’m New In WP and I really Enjoying Your Blog Man Thanks For THis And All Tutorials ….

  9. Richie

    I was going to pass along this tip and of course tried it first on one of my sites.

    Worked like a champ I simply changed my CSS from px to % for the border moz and webkit.

    Here’s where it got interesting.

    I went to another site, did the same tweak and it didn’t work. After a little head scratching I remembered that I had the plugin WP User Avatar installed on the site that it worked on and didn’t have it installed on the site it didn’t work on.

    I installed the plugin and whalah, works like a champ.

    For both sites I’m using a custom theme built on the Presswork framework.

    Bottom line, I got it to work but only with the plugin.

    Any ideas?

    • Editorial Staff

      It is possible that your theme wasn’t using the css class .avatar, and the plugin added that.

      Admin

      • Richie

        I’ll check it out. Thanks :)

  10. Roselle Celina

    Hi there, thanks for this tutorial! It’s working great on chrome and Firefox, but for Safari, I’m getting this same problem: http://jsfiddle.net/2UT8v/2/

    Thanks in advance for your help ;)

  11. RW

    I agree and I only use IE about 4% of the time but several of my customers are still on 8.

    Thanks,
    Bob

  12. Martin

    If somebody uses IE8 does not deserve for round image ;)

  13. RW

    Great tip. Please note that IE8 doesn’t natively render round corners (border-radius). You’d need to use javascript, pie, etc… for this but not worth the trouble. Luckily IE9 recognizes current standards…

    Thanks.

    • Jim Burnett

      I remember the days we were trying to keep IE6 support in the loop. Not it’s IE 8 for rounded corners. Lucky us, IE9 is picking up.

      Then again, FF 3.0 doesn’t support any HTML 5. *sad face*

      Cool CSS trick though!

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.