How to add horizontal lines between posts in TwentyTen

One simple effect that can improve a TwentyTen-based blog is adding horizontal lines between the individual posts in the main blog view.

And amazingly it’s not too difficult to achieve and doesn’t involve any work with graphics or single-colour pixels.

You just need a line of CSS.

Here’s how to do it:

If you are using a child theme

1. Open the STYLE.CSS file for editing (eg. using the Appearance | Editor menu)

2. Insert the following at the bottom of the file and save it again:

.hentry {
border-bottom: 2px solid #000000;
}

replacing the #000000; with the colour code of your choice.

.hentry {
    margin: 0 0 48px 0;
    border-bottom: 2px solid #36BCA4;  /* added this line */

}

If you want to edit the TwentyTen theme files directoy

1. Open the STYLE.CSS file for editing (eg. using the Appearance | Editor menu)

2. search for the line

.hentry

3. After the margin line, add:

   border-bottom: 2px solid #000000;

as a line before the closing bracked, replacing the #000000; with the colour code of your choice.

This is the result on the DIY Blogger site:

The line on the DIY Blogger site

About Graham Tappenden

Graham Tappenden is a blogger from Germany. He has written code for WordPress themes since 2006 and been creating websites since 1994.
This entry was posted in TwentyTen and tagged , , , . Bookmark the permalink.