How to Highlight Author Comments in WordPress using CSS

by

Many blogs highlight the author’s comment in the comments section. I’m talking about how to highlight comments posted by the author of the article. You can use many plugins to get this effect (For eg., the Highlight Author Comments Plugin) – but you don’t have to. You can get the get the same effect by adding a small bit of CSS code to your theme.

Highlighting Author Comments in WordPress
Highlighting Author Comments in WordPress

Most snippets will target and try to find author’s email or user id, but that actually slows your site down. Why not using CSS selector and find author’s comment and change the background color so it is easily pointed out. Pretty smart. After that, it was a simple matter of times to see the result.
My default comments loop in comments.php
<?php wp_list_comments('type=comment&avatar_size=48'); ?>
View the HTML code:


<li class="comment byuser comment-author-Narga bypostauthor even thread-even depth-1" id="comment-1013">
	<div id="div-comment-1013" class="comment-body">
		<div class="comment-author vcard"><img alt='' src='http://www.gravatar.com/avatar/18d31a42990f0421bf83bf9c72bcd1b5?s=48&d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G' class='avatar avatar-48 photo' height='48' width='48' />		<cite class="fn"><a href='https://www.narga.net' rel='external nofollow' class='url'>Narga</a></cite> <span class="says">says:</span></div>

		<div class="comment-meta commentmetadata"><a href="https://www.narga.net/subscribe-then-get-1-month-free-rapidshare-premium-account/comment-page-1/#comment-1013">October 16, 2009 at 20:35</a>  <a class="comment-edit-link" href="https://www.narga.net/wordpress/wp-admin/comment.php?action=editcomment&c=1013" title="Edit comment">(Edit)</a></div>

		<p>I’ve saw 5 people who commented on this post. I’ll take random with they only.<br />
Those who Subscribed, write comments in here to get 1 Month FREE RapidShare Premium Account</p>

		<div class="reply"></div>

	</div>
</li>

Open the “style.css” and near the bottom added these lines:

.authcomment {  
       background-color: #B3FFCC !important;  
}

And, that’s it! We hope that you find it useful!

1 thought on “How to Highlight Author Comments in WordPress using CSS”

  1. Hhe article’s content rich variety which make us move for our mood after reading this article. surprise, here you will find what you want! Recently, I found some wedsites which commodity is colorful of fashion. Such as xxxxxxxx that worth you to see. Believe me these websites won’t let you down.

Comments are closed.