This is the next part in my WordPress Series on how to modify a WordPress theme. In this part we shall turn our attention to styling the comment.php page.

Before going on you should have read the last post, How To Modify A WordPress Theme - Part 3, and you should have completed the tasks in it.

The file comment.php is embedded at the bottom of the single.php whenever you view a single post. I will be writing this for a person who has little or no experience of blogging, so some parts will seem a bit simplistic.

Now we come to the comments section. In the Sandbox theme, comments are shown first, followed by trackbacks (links from other sites). In essence a comment is like a mini post, it has the writer’s name as a title, followed by some meta info like the date, and then the actual comment.

There’s not really a lot to do here, I like to make the comment’s font size slightly smaller than the post so that if there are a lot of comments the page size will not be so big. I also remove the comment numbers as I do not see the purpose in them, there is a comment count at the start. The comment form however needs work, as it stands it is quite ugly in my opinion.

Here’s a diagram that shows you the basic construction of the comment area. As you can see there are three sections that are all inside a #comments div.
#comments-list: This holds a list of all the comments.
#trackbacks-list: This holds a list of all trackbacks.
#respond: This is where you will find the comment form.

So let’s start, you should know the process by now. Start WOS, open style.css in HTML-kit and open a single post, that has comments in your browser. If you haven’t got a post with comments, then add some. Don’t forget to save and preview in browser after each change in code below.

Styling The Comments

To make the font size smaller, go to the bottom of the style sheet and add:

div.comments { font-size: .8em; }

To remove the comment numbers add:

div.comments ol { list-style: none; }

On some blogs you have probably seen the effect where alternate comments have a different color background, much like mine. If you have the Web Developer toolbar and press ctrl-shift-U you will see the source code for the page. Scroll down to the comment area. Each comment is a list item, the code will look like:

<li id="comment-131" class="comment c0 c-y2007 c-m12 c-d16 c-h03 alt">

The numbers will be different, so don’t freak if it is . Inside the quotes for the class, at the very end you will see "alt" on alternate comments. This means we can set a default background for all comments and then another for those with the "alt". For example two shades of blue.

div.comments ol li { background: #a1baf9; }
div.comments ol li.alt { background: #c5d5fd; }

Now see the text is touching the edges of the colored boxes? Add some padding to the text to give it room to breath and move the comments closer together:

div.comments ol li { background: #a1baf9; padding: 10px; margin: 0px; }

If you still want a gap between the comments change the margin, by "playing" with different numbers. There are four numbers and they are in the order - top, right, bottom and left. Third one is bottom so that’s the one to change:

div.comments ol li { background: #a1baf9; padding: 10px; margin: 0px 0px 10px 0px; }

Styling The Comment Form

As it stands there’s not a lot we can do with this without adding more html code. So what I’ll do is pretty it up a little here and then when I get into creating your own theme from scratch, in future (soon) posts, I will show you alternative layouts.

First give the comment form a colored background by adding:

div.formcontainer { background: #e5ecfe; padding: 10px; }

The red stars still have a white background! Around line 98 find the line:

form#commentform span.required{background:#fff;color:red;}

and change it to:

form#commentform span.required{background:transparent;color:red;}

And lastly, the form labels could do with being made a bit bolder, add:

div.form-label { font-weight: bold; }

Styling The Footer

The last part of the page that can be styled is the Footer. This can be anything from a line seperator, a colored background or a textured background. In the style sheet around line 115 you will find:

div#footer { text-align:center; }

A line separator is simply the addition of a border but only along the top like:

div#footer {
  text-align:center;
  border-top: 1px solid #5072c8;
}

Now view it in the browser. It looks a bit cramped and the sidebar color covers part of the footer, to fix that edit to:

div#footer {
  text-align:center;
  border 1px solid #5072c8;
  background: white;
  height: 60px;
  padding-top: 10px;
}

This also shows you how to change the background color. Ever wanted to show a copyright for something, for example the blog’s content? Open footer.php, go to the end of line 5, press enter and type:

<p>All text and images on this blog are &copy;MMVIII by Fred Blogs</p>

Then in the style sheet modify the div#footer to:

div#footer {
  text-align:center;
  border 1px solid #5072c8;
  background: white;
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}

If you wanted an image background, you use the same method as you did for the header:

div#footer {
  text-align:center;
  border 1px solid #5072c8;
  background: white;
  height: 60px;
  padding-top: 10px;
  padding-bottom: 10px;
}

I have used the same image as I used in the header as an example, you can use any image you like as long as it can repeat horizontally.

And that’s about it for the comments section. Now you can have a look at other pages, for example the homepage, archives, about, categories etc. and see what they look like. Next time will be the last in the series of how to modify a WordPress theme where we shall clean up some details on the other pages.