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:
| .comment .avatar { | |
| border-radius: 50%; | |
| } |
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
| .comment .avatar[src*="blank"] { | |
| background: #a7a7a7 url(images/blank-avatar.png) no-repeat center center; | |
| } |
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:
| .bypostauthor > article .comment-author span[itemprop="name"] { | |
| background: url(images/admin-badge.png) no-repeat right center; | |
| padding-right: 60px; | |
| } |
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:
| <?php | |
| /** | |
| * Admin Label | |
| * | |
| * @author Bill Erickson | |
| * @link http://www.billerickson.net/fun-avatars/ | |
| * | |
| * @param array $classes, list of all classes | |
| * @return array $classes, list of all classes | |
| */ | |
| function be_admin_label( $classes ) { | |
| $comment = get_comment(); | |
| if ( $comment->user_id > 0 && user_can( $comment->user_id, 'manage_options' ) ) | |
| $classes[] = 'byadmin'; | |
| return $classes; | |
| } | |
| add_filter( 'comment_class', 'be_admin_label' ); |
Rudd says
How do we add the “Admin” status besides admin’s name in Genesis?
Bill Erickson says
Like this: https://gist.github.com/billerickson/6733089
This is designed to work with the HTML5 version of Genesis. If you’re using a different theme, you’ll need to check your comment’s markup and update as needed.
Amber @ Au Coeur says
It never even occurred to me to be able to label myself in the comments. I think I will go do this right now! (An the circle trick is really neat too!)
Zach Russell 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.
Patrick neve 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.
Youssef Berrada says
I love the admin label css trick. Thanks a lot for sharing this.
Kingsley 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
David Willden says
Thank you – your tips are so helpful and easy to understand. Such a help when working with and improving your WordPress sites.
Shane says
I found this article while trying to figure out how to do the following:
how do I only change the bypostauthor border color? so that only the post’s author’s avatar border color is different from everyone else’s avatar that is commenting?
any help would be greatly appreciated 🙂
Bill Erickson says
The actual CSS will depend upon the markup and styling of your website. If you’re using Genesis like theme, you can use
.entry-comments li.bypostauthor > article { border-color: blue; }