It always kind of bugged me a bit that comments I made on my own posts looked exactly like everyone else’s. It took me a long time to dig into how to make them look different, but I finally did. So, here’s how I styled author comments differently on this blog and on the BatchBlue Blog.
First of all, so you can get an idea of what I’m talking about, here’s how comments I leave on this blog look:
And on the BatchBlue Blog, here’s how a comment I leave looks:
First thing I did was find this great blog post by Matt Cutts (now with Google). His solution involved taking this:
<li class="<?php echo $oddcomment; ?>"
from the comments.php page and replacing it with:
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = "authcomment";
Basically, what that is doing is taking any comments left by a logged in user with the user_id of 1 and applying the class “authcomment” to it. That works great if you have only one author. But the BatchBlue Blog has eight authors, with user_id from 1 to 8. Because I wanted to show a photo of the author next to his/her comment, I needed to give each author their own class name.
So, instead I used:
$oddcomment = "comment-ransom";
if (2 == $comment->user_id)
$oddcomment = "comment-riggen";
if (3 == $comment->user_id)
$oddcomment = "comment-lynch";
if (4 == $comment->user_id)
$oddcomment = "comment-ohara";
if (5 == $comment->user_id)
$oddcomment = "comment-darowski";
if (6 == $comment->user_id)
$oddcomment = "comment-calhoun";
if (7 == $comment->user_id)
$oddcomment = "comment-sweeney";
if (8 == $comment->user_id)
$oddcomment = "comment-larson";
This way, comments I left would get the class “comment-darowski”, comments Michelle left would get “comment-riggen”, etc.
And the CSS to make it look like the image above…
background: transparent url(../images/5-thumb.jpg) no-repeat left top;
And repeat that for each author, swapping out a different photo file name.
For this blog, I used a mild variation on the original code by Matt, just naming the style “comment-darowski”. The CSS:
background: #FFC url(images/adam.png) no-repeat 14px 14px;
border: 1px dotted #999999;
padding: 10px 10px 10px 50px;
So, there you are. Have fun!