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.

54 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.

  26. On May 17th, 2008 at 10:16 am Christie said:

    Hey Jared, thanks for this awesome blog template! I’m trying to customize the seperator and have followed instructions, looked at the main index file to see if that was working, and double checked the path to my image. For some reason I’m still not able to get the seperator to come up. Do you know anything else that might be the problem? thanks!

  27. On May 17th, 2008 at 1:06 pm Jared said:

    Christie - check your stylesheet against the directions again. You forgot to put in the “url(…)”.

  28. On May 27th, 2008 at 1:12 pm Mary Hanson said:

    Hi Jared,
    I tried everything mentioned above and no luck. I even went through and changed to the full url for the separator, but still doesn’t show up. I feel like a thorn in your side… any ideas? :)
    Mary
    ps, the full url for mine is here:
    http://maryhansonphotography.com/blog/wp-content/themes/prophoto/images/sepalogo.png

  29. On May 27th, 2008 at 1:19 pm Mary Hanson said:

    oops…just realized my website if you click on my name has a typo, missed a letter. :) fixed now.

  30. On May 27th, 2008 at 2:42 pm Jared said:

    Mary, your stylesheet got a bit mixed up: it reads:

    div.entry-meta {
    margin: 0 0 25px 0;
    font-size: 10px;
    text-transform: lowercase;
    clear: both;
    .meta-inner {
    margin: 0px 0px 1px 0px;
    padding: 0 0 85px 0;
    background: url (http://maryhansonphotography.com/blog/wp-content/themes/prophoto/images/sepalogo.png)no-repeat center bottom;
    }

    it should read:

    div.entry-meta {
    margin: 0 0 25px 0;
    font-size: 10px;
    text-transform: lowercase;
    clear: both;
    }
    .meta-inner {
    margin: 0px 0px 1px 0px;
    padding: 0 0 85px 0;
    background: url(http://maryhansonphotography.com/blog/wp-content/themes/prophoto/images/sepalogo.png) no-repeat center bottom;
    }

    Basically, you 1) somehow deleted the closing curly brace from the preceding rule, 2) added a space between “url” and (http://…” and 3) removed the space between “….png)” and “no-repeat.”

    also, it looks like you skipped a step when tweaking Ajaxd-WordPress, make sure you check the box that says “use a custom awp template for your theme”

  31. On May 27th, 2008 at 3:23 pm Mary Hanson said:

    Jared…You rock. Really. Your customer service is top notch and I cannot believe how nice you are!!
    thanks again,
    Mary

  32. On May 30th, 2008 at 7:45 pm Betsy said:

    I can’t figure out what I am doing wrong either. I downloaded the file to the prophoto/images folder… does it have to have a web address? SO confused. Sorry & Thanks!

  33. On May 30th, 2008 at 9:01 pm Max said:

    Jared, thanks for all your suggestions. The separator, after a few tweaks worked great.

    Max.

  34. On May 30th, 2008 at 9:33 pm Jared said:

    Betsy, your stylesheet says:

    url(divider.jpg)

    when it should say:

    url(images/divider.jpg)

  35. On May 31st, 2008 at 1:44 pm Betsy said:

    Great!! Thanks! You rock.

  36. On May 31st, 2008 at 3:42 pm Matt said:

    Hi, Jared: Thanks so much for your work on this and your great support of the users. I’ve read all the comments and the instructions, but I can’t seem to get the divider logo to appear. Can you please take a look and let me know what I’m doing wrong? Thanks!

    Matt

  37. On June 2nd, 2008 at 10:31 am Jared said:

    @Matt:

    something is funky with your postlogo.jpg divider image. it’s blank white. so i think it’s there but not showing anything.

  38. On June 2nd, 2008 at 7:24 pm Betsy said:

    Hi again…

    Suddenly, my divider image isn’t showing up, but I don’t think I did anything to make it go away. HELP!

    Thanks!

  39. On June 2nd, 2008 at 10:04 pm Matt said:

    Hi Jared - forgot to mention that my site is mattscottphotography.com

    Thanks.

  40. On June 3rd, 2008 at 11:07 am Jared said:

    @Matt: did you see my above comment? ^^^

    @Betsy: something is funny with your divider.jpg image too. I should be able to see it here:

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

    But I can’t. Try re-uploading it.

  41. On June 3rd, 2008 at 1:20 pm Betsy said:

    I did that… I can see it when I click on that link you gave me… The weird thing is, that it shows up when I’m in Safari, but not in Firefox… and most of my friends can’t see it either. Hmmmm???

  42. On June 3rd, 2008 at 8:46 pm Matt said:

    That was the problem. Thanks Jared. I’m not sure what happened. I definitely spent time creating a logo, but it seems not to have saved. Thanks again.

    Any update on the next theme? Very curious to see what it looks like. Keep up the excellent work.

  43. On June 4th, 2008 at 9:18 am Jared said:

    @Betsy: wierd. I can see it in Safari as well. How did you create and export this image? There seems to be something weird about the file itself. It’s a .JPG, but it has “layers”. Can you re-export it out of photoshop, using the option “Save for Web & Devices” and try reuploading it?

  44. On June 5th, 2008 at 12:47 pm Betsy said:

    Awesome. That worked. Thanks!!!

  45. On June 8th, 2008 at 11:20 am Julia said:

    Can you take a look at my settings and see what I’ve missed? I’ve read through the instructions and comments, and can’t find where I went wrong. Thanks!

  46. On June 9th, 2008 at 7:40 am Jared said:

    @Julia: it seems to be working. i can see your divider image just fine. it takes a few seconds to load the first time, because CSS images load last, but it’s there.

  47. On June 29th, 2008 at 4:03 am Renee said:

    Thanks Jared I did this and it looks great.
    Any idea though why the divider doesnt appear between the bio section and the first post?
    Is there any way to get a divider in there?? It woud make the page seem more balanced when you first open the blog.
    thanks, Renee

  48. On June 29th, 2008 at 7:13 pm Jared said:

    @Renee: it doesn’t appear there because the image “attaches itself” sort of to the bottom of each post, not the top. you could add one at the bottom of the blog, sort of by hacking the same instructions, but attaching the image to the bottom of the “#indexbio” div on line 271-ish of your stylesheet.

  49. On June 29th, 2008 at 8:00 pm Renee said:

    Jared
    I tried that with the divider pic and also tired repeating the black line (which i have orange) that was at the top of the page under the bio section in place of the dotted line there but no luck….

  50. On June 29th, 2008 at 11:15 pm John Blair said:

    Renee,

    go to line 271, find all this…

    #indexbio {
    margin: 0px 0px 15px 0px;
    padding: 0 0 30px 0;
    background: url(images/your_file.jpg) no-repeat center bottom;
    }

    This is what I got to work for mine. You may want to mess with the 15 and 30 values a bit to fit it to your specific needs.
    jb

  51. On June 29th, 2008 at 11:53 pm John Blair said:

    I should have said, find the #indexbio and replace the existing line with the code above.

    jb

  52. On June 30th, 2008 at 3:02 am Renee said:

    awesome thanks for that John!!!
    I didnt realise I needed to replace the code that was there - thats how I went wrong.
    All good now, thanks for that :-)

  53. On June 30th, 2008 at 5:56 am Jared said:

    Hey, thanks for helping out, John!

    ^^ what he said… :)

  54. On June 30th, 2008 at 8:28 am John Blair said:

    Glad I was able to help.

    jb

Leave a Reply