Frequently Asked Questions:

Adding a custom post separator image

One thing I’ve been asked a few times is: how do I replace the default dotted line separating posts with a custom image that matches my branding? Like Shari’s blog, for instance, shown below:

Well, here’s how:

Step 1: Upload an image for your separator, it should be no wider than 900px, into your prophoto/images folder. Use an FTP program or your web-based file manager utility. Note carefully the name and spelling of your image, and it is case sensitive.

Step 2: in your WP Admin area, go to “Design” (”Presentation” in WP 2.3 and earlier) and click on “Stylesheet (style.css)”. (It might be a good idea to copy the whole file and paste it into TextEdit (Mac) or WordPad (PC) first as a backup in case you mess something up.) Then scroll down to line 346 to this chunk of code:

.meta-inner {
margin: 0;
padding: 0 0 25px 0;
border-bottom:1px dotted #CCCCCC;
}

Delete that chunk and replace it with this:

.meta-inner {
margin: 0px 0px 1px 0px;
padding: 0 0 85px 0;
background: url(images/myFile.jpg) no-repeat center bottom;
}

Except put your own file name and extension (.jpg,.gif, or .png). Then, just fiddle with the bottom padding (”85px” on the third line) until it looks right–this will probably need to be at least as many pixels as your image is tall. You may want to add some margin below the image as well, which you can do by fiddling with the “1px” on the second line.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Tuesday, April 8th, 2008 and is filed under Frequently Asked Questions, Pimp my Blog. You can leave a response, or trackback from your own site.

25 Responses to “Adding a custom post separator image”

  1. On April 8th, 2008 at 6:55 am Jamie said:

    This is great! I love it! Thanks!

  2. On April 8th, 2008 at 9:13 am Charise said:

    Thanks for this Jared! You ROCK!!

  3. On April 8th, 2008 at 4:49 pm Holly said:

    hmmm, what could i be doing wrong? did you load the image to the theme’s image folder or just an email folder on your site?

  4. On April 8th, 2008 at 5:09 pm Holly said:

    okay, i just realized that even the plain dotted border doesn’t show up on mine…this is so strange!

  5. On April 8th, 2008 at 5:41 pm Jared said:

    Holly » i just looked at your blog and figured out the problem. looks like you missed a file when you upgraded to ProPhoto 1.2. No big deal, all you need to do is: in your theme editor, open up “Main Index Template (index.php)” and hunt around at about line 39 for this:

    <div id=”meta-inner”>

    change it to this:

    <div class=”meta-inner”>

    save, and you should be fine.

  6. On April 8th, 2008 at 11:12 pm Zelo Photography said:

    Frickin’ Awesome. Can’t wait to do mine!

  7. On April 8th, 2008 at 11:37 pm Charise said:

    Just a quick update that it worked like a charm…thanks again jared

  8. On April 9th, 2008 at 9:26 am Holly said:

    thanks! got that fixed jared!! :)

  9. On April 9th, 2008 at 11:07 pm Becky said:

    oiy! I tried this and of course it didn’t work and now it shows no seperator. Can I get some extra help?

  10. On April 9th, 2008 at 11:20 pm Becky said:

    nevermind..got it :)

  11. On April 9th, 2008 at 11:51 pm Becky said:

    sorry, I do have one question…I got my logo up, but how do I get the line on either side of it (my logo) like the example blog that was shown. It has her logo with a line on boths sides extending to the edge of the page…how do I get that?

    Thanks

  12. On April 10th, 2008 at 5:05 am Jared said:

    Becky » those lines are part of the image.

  13. On April 13th, 2008 at 1:44 pm Petra Hall said:

    Neato! I just added my own logo now (not as nice as Shari, but oh well). Nice!! People won’t miss who’s blog it is now. :D

  14. On April 22nd, 2008 at 6:07 pm Kristina said:

    Awesome feature! Love it. Thanks so much!

  15. On May 2nd, 2008 at 2:26 pm Lindsey Marie said:

    I can’t do mine either!
    I did two test posts and there is no divider line at all! I followed the original
    directions of uploading my own image to the images folder still no go!
    Any help jared? you rock!

  16. On May 2nd, 2008 at 3:05 pm Jared said:

    Lindsey Marie » i can’t check because there aren’t any posts on your blog right now, so i wouldn’t be able to see the divider, even if it was there! the divider image will only show if you have one or more posts.

  17. On May 9th, 2008 at 4:38 pm Melissa Koehler said:

    I tried to do mine too but it won’t work

  18. On May 9th, 2008 at 6:15 pm Chantelle said:

    i have tried as well, but it just won’t work :( I can see that it has tried to change it as there is now just a large white space where the lines used to be but no image :( any ideas???

  19. On May 10th, 2008 at 8:43 am Jared said:

    Chantelle » i replied to your comment on the other post, about background images. if you follow my directions there, it should fix this too.

  20. On May 10th, 2008 at 8:46 am Jared said:

    Melissa => you have the same problem as Holly, a few comments up. If you follow the instructions I gave her, you should be golden.

  21. On May 10th, 2008 at 8:07 pm jana said:

    I have not clue what I am doing wrong, but now it is blank in that area. I have read through the thread and none seem to apply to fixing my problem. I have no clue what I am doing wrong!!

  22. On May 10th, 2008 at 8:45 pm Jared said:

    jana » your stylesheet is referencing this image:

    http://janakunz.com/blog/wp-content/themes/prophoto/images/divider.jpg

    but that image doesn’t seem to exist. check that you named it correctly and uploaded it into the correct spot.

  23. On May 10th, 2008 at 11:58 pm Chantelle said:

    thanks Jared, I followed your instructions and I have fixed up the background image noe but still no lock with the post title separator, something i have missed?

  24. On May 11th, 2008 at 8:06 am Jared said:

    Chantelle » your prophoto theme is still installed incorrectly. you have the “prophoto” folder INSIDE of another folder called “ProPhotoTheme12-030308″, which is your download folder. your download folder should not have been uploaded. the “prophoto” folder should be uploaded directly into your “themes” folder, inside of your “wp-content” folder.

  25. On May 11th, 2008 at 9:22 am jana said:

    Thank you Jared!!! I guess I was unclear as to which “images” folder to put it in and put it in a different one. It is working now.

Leave a Reply