WordPress Quick Tip: Highlight Author Comments Using CSS3
Highlighting comments made by authors in the discussion section of blog posts and articles can be a good way of enhancing the readability of a comments section.
This is very straightforward to do and in this quick tip we’ll be using a little bit of CSS3 to add some nice styling to all comments made by authors.
In this post I’m going to be using the comments section in the Zamka WordPress Theme, but the same code should also work in whichever theme you have installed.
As you can see below, I’ve adapted the Zamka comments section so that all comments have a white background:
Based on the appearance of each individual comment it would be very difficult to locate which comments were made by the author – especially if all the comments had gravatars associated with them.
What we want to do is change the styling of the comment made by me (“Chris Creed” – i.e. the author of the sample blog post used in this example).
Since the release of WordPress 2.7 there has been a function called wp_list_comments which automatically generates a class that can be used style author comments.
This class is called “.bypostauthor” and by targeting this we can easily change the look and feel of author comments. You can test this by adding the following code to your stylesheet:
.commentlist .bypostauthor { /* -- Add a darker border - */ border: 1px #bbb solid; /* -- CSS3 Linear Gradient -- */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#ddd)); background: -moz-linear-gradient(0% 100% 90deg,#ddd, #f5f5f5); /* -- CSS3 Shadow -- */ -webkit-box-shadow:0px 0 50px #ddd; -moz-box-shadow:0px 0 50px #ddd; box-shadow:0px 0 50px #ddd; }
In the above code we’re initially adding a darker border to help the author comments stand out a little more. We’re then adding a linear gradient and a shadow using some CSS3. After you’ve added the code your author comments should look something like the following screenshot:
All done! It’s a subtle effect, but it does help to make the author’s comments stand out much more and can enhance the readibility of a comments section – especially when there are lots of comments to read through.
I hope you found this useful – leave a comment below if you have any questions/feedback/suggestions.
September 23rd, 2010 at 10:11 am
Really good stuff – thank you!
March 19th, 2011 at 2:11 pm
Hi,
Is been a week since I try different plug-ins for comment highlight. None of them work. I have tried yours, I put the code in comment.php and the result was: no border, no gradiend but below my comment was written all the code I put in. I am doing something wrong. Where should I put the code you provided? My theme is Koi, and your highlight is the one I like most until now, it will be so nice to be able to used.
English is not my mother language, please escuse the mistakes.
Thank you
July 17th, 2011 at 1:23 pm
In my
opinion you are not right. Let’s discuss it. Write to me in PM, we will talk.