T U T O R I A L     S E R I E S

Change the font-family
At present in your css, this is all the code that affects comments

ol#comments li p {
font-size: 100%;
}

Okay ... there is some more, but we can ignore it for now.
Now if you were to 'View Source' on a comment page, you will see that there are some tags that are called, but are not defined, so that's what we are going to do here, and later on. So, changing the font-family ..
Add the following to your style.css (you can copy and paste it if you want)

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

We now have the font-family Tahoma, and it is set at a size of 100%.
Now this will only affect text that is an ordered list within your comments page - that is, just your comments. It will not affect other text on the page. To be precise, it will only affect paragraph text that is contained within a commentlist div. Remember, if the font-family that you want has more than one name, such as Lucida sans unicode, it should be entered in quotes - "Lucida sans unicode"

Bordering
Time to add some css;

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 tells the browser that each list element (in an ordered commentlist div) must have a border on each side, and that the border should be solid, 1 pixel wide and be bright red.

I have added a margin so that the comments are slightly apart. Change or remove this as you wish.
Now you don't need all sides bordered if you don't want, and you can of course change the border styles and sizes to suit the look you want.

Another point: There is a very good reason why we are not using the 'p' element in the above definition. Take a look at this screenshot

That uses the same code as above, but with the top line being ol#commentlist li p {
See how the comment is in a different box from the person who made it ? Now that's not so bad on it's own, but look at the bottom entry ... when I entered that, I wrote the first line "Here's a lyric from Apoptygma Berzerk" I then pressed Enter, and continued writing. The code though thought that this was another paragraph, so it put a box around the first line, and then a box around the rest. So you could end up with several boxes for just one comment entry. Messy. So that's why the 'p' is not there. Anyway.......

Change the "Comments by" line
Because we have changed the background, it's maybe not as quickly obvious as to who has made the comments. If you like the look you have, then just ignore this bit.

If though you want to alter the 'Comments by..." then we need to make a change elsewhere.
From your login, go to Templates, and edit the comments template that you use (either 'popup comments' or 'comments') and look for this part (It's about a third of the way down);

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

You need to change it so that it looks like this - add the 1 in both locations.

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

Now save the change.
Now we need to add cite1 to your css, so open style.css

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

We have had to to this because the element cite is used elsewhere, and we only want these changes to affect the comments page.

The new code above will produce a result like this.
The commentor now stands out that bit more.
You can change anything on each of those lines, and add borders like the examples above if you want. It's a bit small for an image, but you could try !

By now, you should be able to change the font and font size of your comments, you can have your comments box bordered, and you can have a background image or colour too. Pretty good. Shame about the rest of the page ......... but read on !

The Comments Link
In a default install, this part of the CSS controls how that link looks.

p, li, .feedback {
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}

If you are going to customise your page, it's a good idea to split these statements. This was described on the 'Post content' page. So you should have this:

.feedback {
font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
letter-spacing: -1px;
}

Change the 90% up or down to make the text larger / smaller. If you make the font a fixed size - by using a 'pt' measurement, this may make it hard for people with other screen resolutions to see the words you have there.

The 'Comments' is a link, and can be styled as such too. Here for instance, it is coloured green, but when it is hovered, it turns yellow.

.feedback a {
color: #00ff00;
}

.feedback a:hover {
color: #ffff00;
}