Customising the theme of your WordPress website: tutorial #3

A guide written for talk about local by Najm Clayton:

Styling Comments

The 3rd and final tutorial in this group takes a brief look at adding simple styling to the comments of a blog post.

1. The Post Title

The first thing we notice when going to the actual post is that the colour of the title is black and not red as on the home page. This is because on the home page the blog title is a link but it is not on the blog post. We fix this by adding:

#content .entry-title {color:#cc0001;}

to the bottom of our style sheet.

Click the Update Button and check the change.

2. Comments – Spacing

The comments take the same line height as the main article, however, to me this looks to much and I like to return it back to the normal height and letter spacing for the theme with – you guessed it – line-height: normal; letter-spacing:normal

This is the code to add to the bottom of the style sheet:

#comments p  {line-height:normal;letter-spacing:normal}

Click update and check changes.

3. Comments – Border and Shading

Now we will add a border to the individual comments and a touch of shading at the top and the bottom.

To create a thin grey border we add:

#comments li {border:#cccccc solid 1px;}

and to add some grey shading to the author and reply parts of the comment we add:

.comment-author, .comment-meta, .reply{background: #f4f4f4;}

Important: The dots at the start of each style name are essential.

4. The Comments Title

Finally we will finish off by changing the comments title so that it fits better with the rest of the colour scheme.

… becomes

with

h3#comments-title {color:#cc0001;}

See the altered theme at: http://testserver5.asharifa.com/tutorials/

Congratulations! You have completed all three tutorials and successfully customised your WordPress theme to suit your own needs.