Styling comments

WordPress is great when used as a cms, one thing many forget to apply is styling to the comments pages, comments can be fully configured and styled to tie in with the overall look and feel of a new site, using graphics and css styling can also enhance the usability of the comment feature, to style the comments on my site i used the following code:

The php code

This was added to the comments.php file:

{code type=php}<ol>
<?php foreach ($comments as $comment) : ?>
<li <?php echo $oddcomment; ?>id=”comment-<?php comment_ID() ?>”>
<cite>
<?php if(function_exists(‘get_avatar’)) { echo get_avatar($comment, ’35′); } ?>
<span><?php comment_author_link() ?></span><br /><span><?php comment_time() ?></span> on <a href=”#comment-<?php comment_ID() ?>” title=”"><?php comment_date(‘F jS, Y’) ?></a> <?php edit_comment_link(‘edit’,'&nbsp;&nbsp;’,”); ?>
</cite>
<div><?php comment_text() ?></div>
<?php if ($comment->comment_approved == ’0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
</li>
<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? ‘class=”alt” ‘ : ”;
?>
<?php endforeach; /* end for each comment */ ?>
</ol>

{/code}

Stylesheet

All you need to do is add this to your stylesheet, and create a background image for the comment list ul, the comments are also gravatar enabled.

{code type=css}
.commenttext{
padding: 10px 0px 0px 0px;
line-height: 18px;
}

.commentsheading {
padding: 3px 5px 3px 0px;
margin: 0px 0px 8px 0px;
text-decoration: none;
}

.alt {
margin: 0;
padding: 10px;
}

.commentlist {
padding: 0;
text-align: justify;
}

.commentlist li {
background: #f3efec url(‘images/comment_background.jpg’) repeat-x left top;
margin: 15px 0 10px;
padding: 15px 15px 10px 15px;
list-style: none;

}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}

.commentlist p {
margin: 10px 5px 10px 0px;
}
.children { padding: 0; }

#commentform p {
margin: 5px 0;
}

.nocomments {
text-align: center;
margin: 0;
padding: 0;
}

.commentmetadata {
margin: 0;
display: block;
}

.commentlist li, #commentform input, #commentform textarea {
font: 0.9em Helvetica, Arial, sans-serif;
}
.commentlist li ul li {
font-size: 12px;
}

.commentlist li {
font-weight: bold;
}

.commentlist li .avatar {
float: left;
padding: 0px 10px 0px 0px;
}

.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 12px;
}

.commentlist p {
font-weight: normal;
line-height: 18px;
text-transform: none;
}

#commentform p {
font-family: Helvetica, Arial, sans-serif;
}

.commentmetadata {
font-weight: normal;
}

#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}

#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 0px;
}
#respond:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#commentform #submit {
margin: 0 0 5px auto;
float: left;
}

{/code}