How to make rounded WordPress avatars

Depending on the theme you are using, WordPress avatars may have different shapes and styles attached to them. Until recently, almost all themes were using regular, rectangular avatar shapes which were used for displaying author images and avatars in comment sections.

Like with most things in life, when something becomes popular, everyone wants it. If you remember, there was a time when everyone redesigned their logos to appear three dimensional, then trend said icons should be flat and so on. When it comes to WordPress avatars, a square is history and circle is the shape you want.

No matter if you want to follow the trend or you simply like how the rounded avatars look like, if your theme isn’t already using the style, we’re about to show you how to create one for yourself. You won’t be needing plugins or hiring designers because everything is quite simple.

Create rounded WordPress avatars:

  1. Open styles.css file from your theme editor
  2. Copy and paste the following:
  3. .avatar {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    }
  4. Save changes

Since most themes are using the same CSS classes, the chances are that the code worked for you and that you’re avatars got circled. You can check that by refreshing your website and taking a peek at your comment section.

If you’re still seeing squares, you might blame in on the empty bottle next to you, or more probably, the theme is using different CSS class for avatars. Don’t worry; you can still have everything circled around in a matter of seconds.

Find the right avatar class:

  1. Open any page on your site
  2. Scroll down to comments
  3. Right-click on an avatar image
  4. Choose “Inspect” on Chrome or “Inspect Element” on FireFox

The image tag will be now highlighted and you should be interested in the classes added to that tag. Your class might look something like this:

class="example-avatar avatar-34 photo avatar-default"

All you have to do now is to change the class from “.avatar” to “.example-avatar”. The name of the class will vary from one theme to another, but since you can inspect elements with one click, you shouldn’t be having problems customizing the CSS code.

Now that you’re done with shaping your avatars, you might be interested in highlighting comments written by the author.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

One thought on “How to make rounded WordPress avatars

Leave a Reply

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