So far in this How To Style Your Comments series we have been organizing exactly what we want to show in our comment area. In this part we are going to get down to the actual styling. If you are looking for inspiration there are several sites you can have a look at that have collections of comment designs:

• Smiley Cat Showcase
• 30 Comment Designs for Web Designers

I am going to show you how to do to basic layouts. The first is where the gravatar, comment author’s name and date are above the comment. the second is where the same info is off to the left and the comment text is to the right. Once you can do these and understand how they work you can then go on to using images as backgrounds to recreate any of the designs you saw in the above showcases.

If you do have any difficulty with either what I show you here or in creating a specific design let me know and I’ll see what I can do to help you.

Gravatars

A gravatar is a Globally Recognized avatar that you can get for free at gravatar.com. Your gravatar has a MPAA style rating so you can have any image you like and restrict it to a specific audience. All you need to do is design your avatar image, sized to 80×80 pixels and upload it.

I shall be implementing gravatars on this blog so I suggest you create an avatar and signup, then it will show up whenever you make a comment here or any other gravatar-enabled blog.

The reason I am even mentioning Gravatars is that Wordpress, as of version 2.5, now supports their use. To display the icon you must enable them in the Admin Panel. Go to Settings > Discussion and at the bottom of the screen you can set whether you want to show or not show Gravatars and what rating you want to be used on your blog.

The following function is used to display a gravatar is given as:

function get_avatar( $id_or_email, $size = '64', $default = '' )

$id_or_email: You can use ‘$comment’ or ‘$comment->comment_author_email’ which I think is slightly faster.
$size: This can be anything up to 96 pixels. If a size is not specified then 96 will be used.
$default: If the comment author has not got a gravatar a boring default image is supplied. If you want to supply an image that fits in better with your theme you can specify it here although I haven’t had much luck on my local server.

Here is an example use within a theme:

if (function_exists('get_avatar')) {
  echo get_avatar( $comment, ‘64′);
} else {
  //alternate gravatar code for < 2.5
}

If you are using Wordpress 2.5 or greater then all you need is the line that is in red, but if you are going to distribute your theme you should use all the code. It tests to see if the function is available, if it is, it is used otherwise you can supply an alternate. Either display a default image or you can use of one of the many gravatar plugins available.

So that we are all on the same page, all the styling I am about to show you are based on the default theme with separated trackbacks and author highlighted comments implemented as per parts one and two of this series.

Defined Comment Styles

In the default theme the stylesheet is very disorganized! For example styles for the comments are close to the start, in the middle and close to the end. The following styles are defined:

.alt

.commentlist li
.commentlist li.auth
.commentlist li
.commentlist li .avatar
.commentlist cite, .commentlist cite a
.commentlist p
.commentmetadata

/* Begin Comments*/
.alt
.commentlist
.commentlist li
.commentlist p
#commentform p
.nocomments
.commentmetadata
/* End Comments */

So what I have done is bring them all together so that they are easier to edit and to remove the duplicates like this:

.commentlist, .commentlist li
.commentlist li, #commentform input, #commentform textarea
.commentlist li
.commentmetadata
.commentlist li .commentmetadata
.commentlist li.alt
.commentlist li.alt .commentmetadata
.commentlist li.auth
.commentlist li.auth .commentmetadata
.commentlist li .avatar
.commentlist cite, .commentlist cite a
.commentlist p
#commentform p

Comment Style One

As you can see this is a simple layout with no images, Visitors comments are alternatively yellow and green and your comments are red.

The first thing that needs doing is to put the gravatar, author and date info inside a div so that it can be styled differently to the comment’s text. The comment’s metadata is a slightly darker shade so that they are not as prominent as the the actual comment text.

In comment.php make the following changes:

  <li <?php if ($comment->comment_author_email == get_the_author_email()) {
    echo $admincomment;
  } else { echo $oddcomment; } ?>id="comment-<?php comment_ID() ?>">
    <div class="commentmetadata">
      <?php echo get_avatar( $comment, 32 ); ?>
      <cite><?php comment_author_link() ?></cite> Says:
      <?php if ($comment->comment_approved == '0') : ?>
        <em>Your comment is awaiting moderation.</em>
      <?php endif; ?>
      <br />
      <small><a href="#comment-<?php comment_ID() ?>" title="">
      <?php comment_date('F jS, Y') ?>
      at <?php comment_time() ?></a>
      <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small>
    </div>

    <?php comment_text() ?>
  </li>

Now it is a simple matter to style the individual parts. The main parts that make it work are to give .commentlist li zero padding then give .commentlist li .commentmetadata zero margin and a height slightly more than the size of the gravatar which is floated left. Here are the relevant styles:

.commentlist, .commentlist li  {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.commentlist li, #commentform input, #commentform textarea {
  font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li {
  background: #ffc;
  border: 1px solid #dda;
  margin: 10px 0px;
}
.commentlist li .commentmetadata {
  background: #eea;
  padding: 5px;
  height: 38px;
}
.commentlist li.alt {
  background-color: #cfc;
  border: 1px solid #ada;
}
.commentlist li.alt .commentmetadata {
  background: #aea;
}
.commentlist li.auth {
  background: #fcc;
  border: 1px solid #daa;
}
.commentlist li.auth .commentmetadata {
  background: #eaa;
}
.commentmetadata {
  font-weight: normal;
}
.commentlist li .avatar {
  float: left;
  padding: 2px;
  margin-right: 5px;
}
.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  color: #ooo;
}
.commentlist p {
  font-weight: normal;
  line-height: 1.5em;
  text-transform: none;
  margin: .5em 5px;
}

Comment Style Two

This style is more like what you would find in a forum, where the gravatar and info are up against the left side and the comment text is on the right.

This one is a little more complex in comment.php but essentially it is two divs, .commentmetadata is floated left and given a width and then the comment text is inside another div and floated right.

Once again, I have used yellow and green to alternate the visitor comment’s colors and then red to highlight your comments and in each case the comment’s metadata is in a darker shade of the parent color.

 <li <?php if ($comment->comment_author_email == get_the_author_email()) {
    echo $admincomment;
  } else { echo $oddcomment; } ?>id="comment-<?php comment_ID() ?>">
  <div class="commentmetadata">
    <?php echo get_avatar( $comment, 64 ); ?><br />
    <cite><?php comment_author_link() ?></cite><br />
    <?php if ($comment->comment_approved == '0') : ?>
      <em>Your comment is awaiting moderation.</em><br />
    <?php endif; ?>
    <small><a href="#comment-<?php comment_ID() ?>" title="">
    <?php comment_date('F jS, Y') ?><br />
    <?php comment_time() ?></a><br />
    <?php edit_comment_link('edit','&nbsp;&nbsp;',''); ?></small><br />
  </div>
  <div class="comwrap">
    <div>
      <?php comment_text() ?>
    </div>
  </div>
  <div class="clrem">&nbsp;</div>
</li>

And here are the relevant styles:

.commentlist, .commentlist li  {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.commentlist li, #commentform input, #commentform textarea {
  font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li {
  background: #ffc;
  border: 1px solid #dda;
  margin: 0px;
}
.commentlist li .commentmetadata {
  float: left;
  width: 80px;
  background: #eea;
  text-align: center;
}
.commentlist li.alt {
  background-color: #cfc;
  border: 1px solid #ada;
}
.commentlist li.alt .commentmetadata {
  background: #aea;
}
.commentlist li.auth {
  background: #fcc;
  border: 1px solid #daa;
}
.commentlist li.auth .commentmetadata {
  background: #eaa;
}
.commentmetadata {
  font-weight: normal;
}
.commentlist li .avatar {
  padding: 5px;
}
.commentlist cite, .commentlist cite a {
  font-weight: bold;
  font-style: normal;
  font-size: 1.1em;
  color: #ooo;
}
.commentlist p {
  font-weight: normal;
  line-height: 1.5em;
  text-transform: none;
  margin: .5em 5px;
}

Here I am using a technique that employs negative margins. Say you want two columns, one has a fixed width the other you either don’t know or don’t care about it’s width value just as long as it it fills the remainder of the width. In this case I want the info div to be a known size, the layout looks like the image to the right. The html looks like:

<div id="sbar"></div>
<div id="comwrap">
  <div id="content"> </div>
</div>

The CSS looks like:

#sbar {
  float: left;
  width: 80px;
}
#comwrap {
  float: right;
  width: 100%;
  margin-left: -90px;
}
#content {
  margin-left: 90px;
}

Note that both comwrap and content have the same margin-left value, BUT it is a negative value on comwrap only. There is also a 10 pixel difference (90-80), this is to allow for a gutter between the two columns. I use this technique a lot in my design work as I have found it easy to use and works in all browsers reliably.