NARGA

  • Home
  • Categories
    • Articles
    • jQuery
    • CSS
    • How-to
    • Inspiration
    • Productivity
    • General
  • Freebies
  • WordPress
    • NARGA WordPress Library
You are here: Home / WordPress / How to Highlight Author Comments in WordPress using CSS

How to Highlight Author Comments in WordPress using CSS

WordPress Last Updated on January 12, 2019 1 Comment

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&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&amp;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>&nbsp;&nbsp;<a class="comment-edit-link" href="https://www.narga.net/wordpress/wp-admin/comment.php?action=editcomment&amp;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!

Related

Tagged: wordpress recipes

About NARGA Editorial

The author avatar

NARGA.NET is a website (blog) about web development, graphic and WordPress related. Do you interesting with our website to post your own post or place your advertise? Contact us now!

Follow me:

Comments

  1. nikemaxsale says

    May 30, 2010 at 8:34 PM

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Highly Recommended

Divi 3 is the Ultimate Multi-Purpose Theme

Divi 3.0 – Best Drag Drop WordPress Theme, FREE Layout Kits

As you known, Divi is a "flag-ship" WordPress of Elegant Themes because it's named as Multi-Purpose … Read More...

Woocommerce Visual Attributes & Options Swatches

10 WordPress Plugins to Improve WooCommerce Product Variations

There are several WordPress plugins for WooCommerce to Improve WooCommerce Product Variations … Read More...

HandHeld Mobile Plugin

3 Fantastic Plugins to Optimize WordPress Mobile Friendly

In 2009, I listed some WordPress plugins to make your website mobile friendly. Just over 6 years and … Read More...

WooCommerce JetPack

Powerfull WordPress Plugins to Enhance WooCommerce Functions

WordPress and WooCommerce are free, you don’t have to spend anything to build your own web store and … Read More...

WooCommerce PDF Invoice

Top 7 WordPress Plugins to Invoice Your Clients

There are dozens of WordPress invoice plugins which you can use to turn WordPress into an excellent … Read More...

About NARGA.NET

NARGA is a blog dedicated to share top quality open source resources for web developer and web designer weekly (then daily asap). As a web designer or developer, you’ll find some of the best free icons, stock photos, fonts, free WordPress themes, userful WordPress plugins, best jQuery plugins, CSS3 snippets, HTML5 standard and a lot more …

Connect with Us

  • Write for Us
  • Follow us on Twitter
  • Become a Facebook Fan
  • Subscribe RSS Feed
  • Browser Post Archive
  • Terms & Conditions
  • Privacy Policy & Disclaimer
  • Contact NARGA

This site is licensed under Attribution-NonCommercial-ShareAlike 3.0 license. Feel free to change, reuse modify and extend it. Some authors will retain their copyright on certain articles.
NARGA.NET utilizes affiliate links and may receive a comission if you click an affiliate link and make a purchase.

  • Archives
  • Contribute
  • Terms & Conditions
  • Contact NARGA
Copyright © 2019 · NARGA GPRESS - All rights reserved. Proudly powered by Digital Ocean · Genesis Framework · WordPress · Log in