post-page

Customise the WordPress Comments Page

3
responses

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

heading
heading
3
Responses

 

Comments

  1. rohit says:

    thanks, very informative

  2. laura says:

    This may seem like a completely ridiculous question, but I need a way to allow visitors to comment and attach a photo to their comment. Easily. These aren’t all savvy visitors. Any tips on how to help them do that?

  3. James Skemp (5 comments.) says:

    You may want to take a look at your examples above – ‘strong’ is displaying, instead of bold text.



Obviously Powered by WordPress. © 2003-2013

page counter
css.php