How To Display Round Gravatar On Your WordPress Website?

December 3rd, 2016 | by Ravi Chahar || 2 Comments |

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.

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.

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

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

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 –

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.