Enter your keyword

How To Use An Image As a Post Separator

How To Use An Image As a Post Separator

These are the post separators from Script & Style.

These are the post separators from Script & Style.

Most WordPress themes use some kind of line or basic CSS border to create the line that separates one post from another in a blog. I was browsing around on Script & Style the other day and noticed the separator used there was especially cool (see above). I decided to try and see if I could do something similar, and it turns out that it’s pretty easy. I’ll go over the CSS first. If you are using Thesis, you can open up the custom.css file and paste in the following code:


.post_box {
border-top:none;
background: transparent url(images/yourimage.jpg) no-repeat bottom;
}

If you’re not using Thesis, you can put in the following custom CSS to your WordPress theme for the same effect:


.post {
background: transparent url(images/yourimage.jpg) no-repeat bottom;
}

One of these methods should work in most WordPress themes, but if you want to figure out how to alter the CSS for your own theme, just use Firebug to figure out the CSS div that is creating the border on each post. Then, alter the style for that CSS.

You should locate the image you’d like to use first, and upload it to your custom images file (wp-content–>themes–>thesis_151–>custom–>images if you are using the Thesis Theme). Any horizontal image will work, but you are probably going to want to use something in roughly the same size as your post box. There are some good suggestions on this page, but you can also find images through deviantART or by creating one in Photoshop. Remember to keep your image sizes small, or else it will slow down your page loading times.

Comments (3)

  1. Good advice. I love that you give this info, because it’s so straightforward & great for those learning how to code.

  2. Nov 24, 2009

    Nice tip!
    The only problem I have with it is that it shows on pages too, in Thesis1.6 How can you add a space so it doesn’t mesh with the end of the post tags ect… On the pages I just added a space and it moved the end of post line down, but it doesn’t let me do that for posts!!!? So the end of post line messes up the bottom of my words in my post.. Please help.

  3. Nov 27, 2009

    A link would help here, because I’m having a hard time picturing what you are talking about.

Post a Comment

Your email address will not be published.