New feature: style author comments uniquely on your blog

Last week, we snuck in another nifty new feature, but we've been making some adjustments and tweaks prior to publicly announcing it today. It's the ability to style comments uniquely on blog posts if those comments are left by the post's author or, alternately, by any logged-in user on your site. 

Two separate classes will be added to the markup of the comments. One class is added to comments created by any logged-in user. The other class is added to comments created by the post's actual author. Since "authors" are a subset of "users," both classes will actually be added to the author comments, giving you ultimate flexibility.

Our system defines the actual author as the user who first created and saved the post. If a different user updates the post later, that won't change the actual author.

Why the two style options?

We wanted to make sure you had flexibility. We can envision cases where you would want to style only the author's comments uniquely and also cases when you might want to style any logged-in user's comments. For example, here on our LightCMS blog, there are several members of our team who contribute to the blog, and we'd like to identify all of their comments uniquely. So we are styling all users' comments and then adding a special bit of styling to the actual author to set him or her apart. However, if you have a website with lots of users, you may not want all of those users' comments styled, so in such a case, you can just use the author comment hooks.

How it works

The author or user must be logged into the system when leaving the comment for it to be recognized correctly. Comments left by any logged-in user will have a class of "userComment" added to the <dt> and <dd> tags surrounding the title and body portions of the comment. Comments left by the actual author will have both the "userComment" class and an additional “authorComment” added to the same tags. A sample of the markup generated by an author comment is included below.

<dt class="comment userComment authorComment" id="comment90451">
  <a href="#comment90451" title="Link to this comment" class="commentNumber">1.</a> 
  <a title="" href="" rel="nofollow">Name of commenter</a> wrote:

<dd class="comment userComment authorComment">This is the content of the comment.
  <p class="commentDate">August 26, 2010 @ 10:23 AM</p>

Please note: this new functionality will only apply to comments left after the point of release of the update, which was approximately 10:30am CDT (GMT -5) on Thursday, August 26th, 2010. Prior to this release, we were not tracking the user information associated with comments, and so the classes will not be applied to comments left before that point.

See an example

We're going to leave some sample comments on this post below so that you can see how it works with the styles we've created for the LightCMS blog. Of course, you can style your comments however you wish. Ours is just an example. So, check it out, and leave us a comment while you're at it!

11 comments (Add your own)

1. Sample anonymous commenter wrote:
This is an example of a comment left by an anonymous user. Isn't it great?

Wed, September 1, 2010 @ 3:59 PM

2. Another anonymous example wrote:
And here's another comment left by an anonymous user. Just an anonymous user, minding his or her own business and leaving a comment.

Wed, September 1, 2010 @ 4:01 PM

3. Tim Wall wrote:
And now, here's a comment left by me, the post's author. You can see that we've given it a unique background to set it apart. We've also added a nifty little badge to the upper right for authors only.

Wed, September 1, 2010 @ 4:03 PM

4. Ryan Whitaker wrote:
And here I am, a user on the LightCMS website who didn't write the blog post. This looks great, guys.

Wed, September 1, 2010 @ 4:25 PM

5. Jake Whiton wrote:
I like this a lot. It will help conversations in the blog comments be better and easier to follow. Any thoughts on doing nested replies? I wonder what my comment is going to look like?

Thu, September 2, 2010 @ 9:16 AM

6. JoeDesigner wrote:
Some strangeness here. When viewing on Safari 5 on a MAC I honestly don't see the difference. They look just like all the other comments throughout this blog. Tim Wall; your comment has no different background then the rest. Alternatively, when viewing with FF 3.6 on a MAC, Tim's comment styling seems to be spilling over to Ryan's directly bellow it.

Thu, September 2, 2010 @ 5:36 PM

7. Ethan Sisson wrote:
Yo Joe,

It sounds like you're seeing the comments with an old version of the stylesheet. Try refreshing the page to see if that will load the latest styles. If that doesn't do it, clearing your cache should do the trick.


Thu, September 2, 2010 @ 5:57 PM

8. JoeDesigner wrote:
Hey Ethan that worked on FF but on Safari it was due to my dev. panel being left open (feels like I'm always working). I can now see this new feature in all it's glory. Very cool.

Thu, September 2, 2010 @ 9:49 PM

9. Ethan Sisson wrote:
Glad you got it worked out, Joe. Have fun styling comments!

Fri, September 3, 2010 @ 8:25 AM

10. Green Comfort - Serviced apartment chennai, wrote:
Green Comfort Apartments in Chennai, Luxury Accommodation in Chennai, Luxury Service Apartments in Nelson Manickam Road, Luxury Accommodation, Vacation Service Apartments, Online Booking Service Apartment Chennai, Serviced Apartments For Corporate Individual, South India Luxury Serviced Apartment, South India Luxury Serviced Apartment

Thu, March 31, 2011 @ 1:03 AM

11. Rockport Texas Hotels wrote:
How do I get this feature installed on my blog? I would definitely want my comment to look different than others.

Fri, December 21, 2012 @ 7:15 AM

Add a New Comment


Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.



Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started