How to Get Circular Avatar Images in WordPress

How to Get Circular Avatar Images in WordPress

We recently ran a post on giving images in your Posts and Pages a circular look. As we mentioned there, circular images seem to be very much in style these days. But even more in style, it seems, are circular avatars. And so that’s what we’re going to cover in this post.

circles-photos

Before we get into the code, let’s take a look at how your avatar/gravatar images will change.

Here’s a look at a regular author avatar.

regular-avatar

And here’s how it looks after applying some simple CSS.

rounded-avatar

As always, if you’re making changes to your theme, it’s better to use a child theme (or a special CSS area that your theme might designate for such additions).

OK, with that out of the way, go to your CSS file and place the following in your stylesheet. (Appearance > Editor > Stylesheet – style.css)

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

(The reason for all those different 50% lines is to account for different browsers. Some say that these days you only need “border-radius: 50%;” but if you want to be extra sure, you can include them all.)

Save the file, and that should do the trick.

If It Doesn’t Work …

If the code above didn’t work for you, then there’s a good chance that your theme uses a different class name than “avatar.” If that’s the case, there are few different ways find out what the name of the class is in your theme.

You can search around the code of your avatar to determine the class name. Chome and Firefox make this easy to do by clicking on the element (the avatar in this case) and then right clicking and selecting “Inspect element.”

From there, you can examine the CSS. Here’s a look at an example of that with Firefox. I was using the default Twenty Twelve theme for this test, and as it turns out, it had a different class name. You can see below that I found the class name to be “author-avatar” and not just “avatar.”

inspect-element

Once I found that, I just changed the name in the code above to “author-avatar.”

(As mentioned in the other post, all the different instances are to account for different web browsers. Some say you are safe with just the once instance of “border-radius: 50%;” however. )

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

.author-avatar img {
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 border-radius: 50%;
 }

If inspecting the element throws too much code your way to decipher, you might also be able to easy find the name by searching for “avatar” in your stylesheet. (Appearance > Editor > Stylesheet – style.css) Even if it has a different name, there’s a good chance that the word “avatar” is incorporated into it.

(*Note: You may come across a number of different instances of the word “avatar.” Just keep trying till you find what you need.)

Do It for the Comments Section Too

Of course you can also do this for avatars in the comments section. Those avatars might have a slightly different class name, and so you may have to search for that too. In my example, while using the default Twenty Twelve theme, I couldn’t easily find the class name by right-clicking and inspecting the element.

I’m no CSS expert, and so maybe it could have been found, but instead of wasting more time, I just went to CSS file and searched for “avatar.”  I quickly found a section named “.commentlist .avatar” in my file. Guessing that was probably it, I tried it out, and it worked. Here’s what I added. (Note: there was no “img” tag on this one.)

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

That did the trick. And here’s the result.

comments


No Images Showing?

Some may have a larger problem – no images showing at all. If that’s the case, see below.

By default, WordPress uses “gravatars” for user photos. If you haven’t already, you can get gravatars (i.e. avatars) on your site by signing up at gravatar.com with the same email address that you use for your profile.

If you’re already signed up with gravatar.com, but you don’t see user images on your site, it might be because of one of the following reasons.

  1. Your theme does not contain the necessary code to display gravatars.  If that’s the case, you can contact your theme’s author, or you can see this post about displaying author photos.
  2. You also need to make sure avatars are turned on for your site. Go to Settings > Discussion, scroll to the bottom and make sure the appropriate box is checked. (See image below.)
show-avatars

*Note: If you’re using a plugin to show user/author images, then you may need to dig into whatever CSS they’re using there. When the plugin is updated, it will overwrite your changes, and so you will need to redo them.

Tags: