Fun with Avatars

I’m working on a site (pictured above) that required some customization of the avatars. Here’s some CSS-based approaches to these changes.

Avatars as Circles

In the past I’ve used a messy solution for this – absolutely positioning a square image with a transparent circle on top of the avatar, so the avatar shows through the circle. This is bad for a lot of reasons: adds additional markup, adds an extra image, and is difficult to change the size of the avatar later on (you’d have to rebuild the image).

But there’s a really simple CSS-based approach that solves all these issues:

Custom default avatar

While you could use code or a plugin to add this functionality, CSS is simpler.

In Settings > Discussion I selected “Blank” as the default avatar. I then use the following CSS to style it

Admin Label

It’s a good idea to make the blog author’s comments stand out so someone can quickly browse the post and see what else the author has contributed. I do this on my own comments below (comments by me have a blue header).

Each comment has a series of classes that help you target it with specific styling. Three that are useful here are bypostauthor, byuser, and comment-author-[their username]. For this site I’m using bypostauthor since there will be only one author/admin of the site:

If you have multiple admins you’d like to highlight and they are the only registered users, then use byuser. If you have multiple admins you’d like to highlight and they are not the only registered users, you can use comment-author-[their username].

Another option is to filter ‘comment_class’ to add your own specific classes. The following code adds a class of ‘byadmin’ if they are admins on the site:

chat9 Comments

  1. says

    One of the things i’ve always liked about your work was the thought you put into comment systems. A lot of sites (including my own) don’t have as as good of a look and feel as they should, you do a great job at it. Keep up the great work!

    • Bill Erickson says

      Thanks! I can’t take the credit though, it’s the designers my clients hire that mock up the comment sections. I’m simply reproducing the provided design.

      It’s great that my clients and their designers consider every little detail, including the comment section.

  2. says

    I wish I would have known about these little goodies before I created my circular avatar in Photoshop. :-) Where there’s a will there’s a way. Thanks for these snippets Bill.

  3. says

    Woow nice tutorial simple and clean. I want to ask a question.

    Is it possible to label both Admin and post author comments? I use genesis HTML5 theme news pro

Leave a Reply

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.