How To Display Round Gravatar On Your WordPress Website?

display round gravatar

A couple of days ago, someone asked a question in the WordPress forum how to display round gravatar on his website?

There are many websites which are showing the circular author image in the author box below each post. Do you know how?

In a few WordPress themes, there is an inbuilt code for that. But to display round gravatar on all the themes, you have to design the image.

In the previous tutorials, we have covered how to design comment box, design navigation bar, design drop-down menu, design search box of your WordPress theme.

Here Is The Guide to design The Gravatar Image.

As you know the design of a WordPress theme is possessed by a file name “style.css” which is present in the theme folder.

You have to edit that file. Whether you edit from the cPanel or directly from the WordPress admin panel.

Just go to appearance>>editor>>style.css.

Place the code in the file.

.avatar { border-radius: 50%; }

I have targetted a CSS class “avatar” because, in most of the themes, this is the CSS class of the gravatar image. But if somehow that doesn’t work then you have to find the class of the image.

Just right-click on the image and inspect the element.

display round gravatar

Pick up that CSS class and set the border-radius to 50%.

Suppose the CSS class is “author-avatar“. The code would be:-

.author-avatar { border-radius: 50%; }

Nowadays, people don’t really use the older versions of the browsers so this code would work in every browser. But if you don’t want to take the chances then you can make it friendly for all browsers.

Just add –

.author-avatar {

  border-radius: 50%;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

}

This code will help you to design the avatar.

Isn’t Easy To Display Round Gravatar On Your Website?

This code can be applied everywhere on your website. You can even change the shape of the avatar showing in the comment section.

But make sure, you use the proper CSS class. A wrong designing code can break your WordPress theme. So it’s always recommended to create a child theme for your editing work.

by Ravi Chahar

A WordPress Professional and the LinkedIn Influencer. A coder by passion and a blogger by choice. WordPress theme development is his forte. He is your WordPress guy who will teach you how to solve WordPress errors, WordPress security issues, theme development, design issues and what not.

2 comments

  1. Hi Ravi!

    No it was not easy to me before reading this post 😀

    Really, you have explained well in this post! Now i got it how to display round gravatar on WordPress!

    Anyway, thanks for an useful post!

    Keep it up!

Leave a Reply

Your email address will not be published. Required fields are marked *