How to Distinguish Author Comments on Your Blog
Nov 29th, 07 | 10 remarksOne 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):
else echo $oddcomment; ?>
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:
float:left;
margin:0;
padding:5px;
font-size:1em;
width:120px;}
.cite img{padding-right:5px;}
.cite a{font-weight:bold;}
.comment_content{float:right; width:390px;}
li.author .comment_text{/*for author comments*/
color:#222;
border:solid 1px #69c;
background: #69c url(images/auth_comments.jpg) top left;}
li.author .cite a{color:#333!important;}
li.author .cite a:hover{color:#fff!important;}
li.author .cite .commentmeta a{color:#333!important;}
.author .comment_text p a {color:#fff !important;}
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!
Nice tutorial. This will come in handy for my blog as more designers blog on it.
Nov 29, 07 | 3:39 pmwow, finally a tutorial on this that doesn’t require a doctorate degree in php and css. thanks!
Nov 29, 07 | 4:07 pmWow! My wish has come true =)
This is an awesome tutorial, I’m going to work on implementing it my own blog right now, I’ll let you know how it goes.
Nov 29, 07 | 6:45 pmThanks all, and hopefully I didn’t leave anything out! =)
Nov 29, 07 | 7:20 pmCheck it out, I totally got it working.
Thanks Charity!
Nov 29, 07 | 8:56 pmNicely done Chris, and you’re welcome! :)
Nov 30, 07 | 9:43 amNicely done ! One of the easiest tuts I came across for stylin’ comments.
Dec 1, 07 | 2:11 pmWell I found this very useful and it’s going in my del.icio.us bookmarks for when I redesign my blog! (ah, someday…) Thank you, Charity!
Dec 3, 07 | 6:16 pmThanks for the tutorial! There’a a plug in for this but I rather try your tip. One question: how do I add color to the commentors name like you have it here?
Dec 17, 07 | 9:48 am[...] How to differentiate author comment: Charity from DesignAdaptations.com wrote an useful tutorial about it. [...]
Jan 14, 08 | 8:46 am