Although Plugins are very useful and necessary, CSS is as well. If users take time to leave a comment on your site, the least they deserve is for it to look nice.

Let’s take a look at the basic Wordpress comment loop:

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

Edit Author (and guest author) Comment Style

I’m only going to show you how to make the authors’ comment a different colored background and text (I’ll make it gray and orange in this case), since this is meant for you to learn the basics so you can continue being creative with CSS styling.

What we’ll do first is edit the loop code above so that comments made by the blogs’ author are different from the rest:

<li class="<?php if ($comment->comment_author_email == "author@domain.com")
echo 'author'; else if ($comment->comment_author_email == "author@domain.com")
echo 'author'; else echo $oddcomment; ?> item" id="comment-<?php comment_ID() ?>">

For author and guest author loop:

<li class="<?php if ($comment->comment_author_email
== "author@domain.com") echo 'author'; else if ($comment->comment_author_email ==
"guest@domain.com") echo 'guest'; else echo $oddcomment; ?> item" id="comment-<?php
comment_ID() ?>">

Simply replace author@domain.com with the blogs’ author email. If suing it to identify an author and guest author as well, replace the guest@domain.com on the corresponding code snippet. Now that we have the correct loop to identify the authors’ comment, we simply put the following snippet of HTML/PHP so we can style the comment:

<span class="author_meta"><?php comment_author_link() ?></span>

The CSS that will style this looks like this:

li.author span.author_meta a {
     background: #EFEFEF;
     color: #CF4900;
}


This will style the authors’ comment (and guest authors’ comment).

Make alternating comments different

Paste this code snippet before the comment div (and comment list obviously as well).

<?php
return;
}
}

/* This variable is for alternating comment background */
$oddcomment = ‘alt’;
?> 

The corresponding CSS to edit the style is this (This is the CSS I use on my site, change the EFEFEF to the hex number color you desire):
.commentslist li.alt{
     background:#EFEFEF;
}

Another article is to be published given the fact it would have made this one too long. Look forward to Wordpress Comments Part Three: Styling with CSS II

This next post will feature some examples of styled comments (like the style used on this site) and maybe feature a few examples of beautifully done comment styles.