Customise the WordPress Comments Page

Change the font, font size, add borders / images / background colours to the comments themselves or just the page background.

Font Changes
In wp-layout.css, add this;

ol#commentlist p {
font-family: Tahoma;
font-size: 100%;
}

This is the font that the comments will be displayed in. Change to suit your site.

Add Borders

ol#commentlist li {
border-left: solid 1px #ff0000;
border-right: solid 1px #ff0000;
border-top: solid 1px #ff0000;
border-bottom: solid 1px #ff0000;
margin: 10px;
}

This will add a border around each post, and separate the posts by a margin of 10 pixels.
The colour there is red, so alter as you will, and for those borders that you do not want, just remove the line required.
You could always have a dotted line instead of solid too.

Comment Image
Add this line to the above code:

background-image: url(‘image.gif’);

This will place an image behind the comment entry. You can use a jpg / png / gif

Comment Colour
Add this line instead to the code:

background-color: #ff00ff;

(If you add both of the above – an image and a colour – the last one in the statement will take precedence. I’d just add the one though).

Comment Page Background
Add the following to your wp-layout.css:

#commentspopup {
background-image: url(‘image5.gif’);
}

Note: If you do not use popup comments, add this to your wp-comments.php instead.
That will place an image on the overall page. If you just want a colour, then use this:

#commentspopup {
background-colour: #ff00ff;
}

Lastly, if you want the line with the commentors details to stand out more prominently from your new colour scheme, open up either wp-comments-popup.php or wp-comments.php, and make the following two changes that I have noted in bold type:

< ?php comment_text() ?>
<p><cite<strong>1</strong>><?php comment_type(); ?> by <?php comment_author_link() ?> &#8212; <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite<strong>1</strong>></p>
</li>

put this into your wp-layout.css

cite1 {
font-size: 90%;
font-style: normal;
background-color: #fff;
}

This last part will give a white background to the commentors details.

There are a few screenshots accompanying the description of the alterations needed at www.tamba2.org.uk/graphicalcss