• Skip to primary navigation
  • Skip to content
  • Skip to footer

Talk About Local HomepageTalk About Local

Hyperlocal in the UK

  • Home
  • Working with us
  • In the press
  • Blog
  • Contact
  • LNE

Customising the theme of your WordPress website: tutorial #3

18th February 2011 by nickygetgood

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

comments

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.

comments 2

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;}

shaded-comment

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.

comments-title

… becomes

comment-title2

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.

  • About
  • Latest Posts

nickygetgood

Latest posts by nickygetgood (see all)

  • Some hyperlocal winners at the Wales Blog Awards - 24th September 2012
  • Talk About Local training at Peabody's Pembury Learning Centre - 7th June 2012
  • Networking for Work - 10th May 2012

Filed Under: Step By Step Guides, Wordpress Guides and Tips Tagged With: CSS, customisation, hyperlocal, Najm Clayton, theme, wordpress

Reader Interactions

Trackbacks

  1. Customising the theme of your Wordpress website: tutorial #2 - Talk About Local says:
    12th July 2011 at 2:33 pm

    […] Click here to go to Customising the theme of your WordPress website: Tutorial Three Nicky Getgood View all posts by Nicky Getgood Nickys website […]

Footer

Search

  • Contact
  • Guidelines
  • Legal

© 2019 · talk about local · Maintained by Turriff Web