One of my readers asked a good question today about how to differentiate author comments from those made by readers. It never occurred to me to write a tutorial on something like that, so thanks goes out to Chris Coyier for the idea. He has a nice looking blog and also writes about CSS (and Wordpress), so if you like this site you might want to check out his site as well!

Okay, getting started. Open up your comments.php file. (This tutorial assumes you’re using Wordpress as your blogging platform, by the way). Look for your opening OL tag. Using the default theme as an example, you should see something like this about 1/4 of the way down the page:

Depending on how your theme is set up, next you might see the statement within the LI tag which instructs WordPress to echo the comment if it’s approved. We don’t want to go straight into that yet. Instead, we’re going to insert some code telling WP to also check if it’s an author comment. Here’s how it looks in my comments.php file (I removed the Gravatar code for brevity’s sake):

This runs a comparison against whatever email address you entered as the administrator of your blog, so be sure you use that one if you want it to work. I you plan on having guest bloggers, you could also add this between echo ‘author’; and else echo:

Now you’ll have to add some styles to your CSS. The Web Developer Toolbar for Firefox is incredibly handy for this, because it’ll show you the elusive hooks used in WP’s core code which are used for identifying author comments. If you have it, hit Cmd+Shift+Y (Ctrl+Shift+Y on PC) and hover over a test author comment in your browser to see what I’m talking about.

Here’s how my style sheet looks:

Notice I had to override the inherited rules (from the .cite class) by adding the !important keyword. You may or may not have to do this depending on your styling hooks and how they cascade.

That should be all there is to it! Having your comments visually distinguished from others is not only helpful to readers, but to you as the author if you need to refer back to something you said earlier. ;) It’s also a nice addition to the “curbisde appeal” of your site. Enjoy!