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
In Settings > Discussion I selected “Blank” as the default avatar. I then use the following CSS to style it
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: