WordPress.org

Ready to get started?Download WordPress

Forums

How to add image separator graphic between posts (11 posts)

  1. visionphotographs
    Member
    Posted 5 years ago #

    One last question =)

    I'd love to know if anyone knows how to add an image separator graphic between posts....an example at : http://chelseabeckphotography.com/blog/
    She has the damask image in between her post and previous post.

    I looked everywhere on the web and can't find out how to do it...is there a plug-in for this or is it a code issue?

    Thanks again.

  2. MadsK
    Member
    Posted 5 years ago #

    You can do this with css, but it depends how your theme looks.

    If each post is wrapped in its own div you can add an extra empty div at the bottom of the post div and use a background-image to seperate each post.

    Which theme are you using?

  3. visionphotographs
    Member
    Posted 5 years ago #

    I'm using Jillij-flash

    My blog is http://www.visionphotographs.com/blog

    Not sure what you meant by above....I'd need some example code to know what you mean....I'm not that great with css...but I can get by if I see example code.

    Thanks for your help!

  4. visionphotographs
    Member
    Posted 5 years ago #

    MadsK...any help?

  5. whooami
    Member
    Posted 5 years ago #

    your page nearly crashed my firefox browser -- no thanks, and good luck. self starting music and the works -- meh.

  6. visionphotographs
    Member
    Posted 5 years ago #

    well you must have a bad internet connection...it works fine everywhere for me....it's a photography blog...much different than your average blog. But thanks for your unrequested feedback....just really looking for someone to help out someone who is new to WordPress...

  7. whooami
    Member
    Posted 5 years ago #

    im at work, on a 100Mbit connection -- im pretty sure I have a better connection than most ppl here right now. thanks anyway.

    the problem with your site and my browser is your errors, not MY connection.

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvisionphotographs.com%2Fblog%2Fabout%2F

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvisionphotographs.com%2Fblog%2F

    and you didnt get unrequested feedback, you got someone telling you they were looking to help and couldnt.

  8. visionphotographs
    Member
    Posted 5 years ago #

    well unfortunately, I'm not sure what all that means....so I will have to see if I can find an answer anyway. Thanks for trying.

  9. MadsK
    Member
    Posted 5 years ago #

    I looked through your code and it seems that the post is divided into seperated divs, which will help to do this trick.

    I will try to explain this the best i can, but as i don't know how familiar you are with html it might not be so easy to understand.

    I wasn't able to find the theme so you have to add this code yourself.

    First of all connect to your host and browse to the wordpress theme folder. Find the folder for Jillij-flash and copy the index.php and style.css file to your own computer.

    With a text editor open up the index.php file and look/search for <div id="post"> - This will be the start of the post. Next find the ending <div> for it (The div will include both a div with the id entry and postmeta). Just above the closing </div> add a new div like this <div id="postend"></div>

    This will create an empty block between each post so now we need to add an image to it. I've created one you can use as a test and replace with your own when you make one. You can get it here:

    http://img367.imageshack.us/img367/1606/damasksplitterbgsd8.gif

    Place this within the theme folder under images (or change the path below in the css)

    Open up the style.css file and go to the buttom and add the follow

    /* Add image splitter between posts */
    #postend {
    background: url(images/damasksplitter_bg.gif) no-repeat;
    height: 100px;
    width: 1000px;
    }

    That should do it :)

  10. visionphotographs
    Member
    Posted 5 years ago #

    OMG you are a lifesaver! Thank you soooo much!

  11. geezerd
    Member
    Posted 5 years ago #

    OK, this is 3 months old, but I don't care, hahah...

    MadsK's code should be <div class="postend"></div> and .postend {

    Making them id's instead of classes is wrong, since they will appear multiple times per page.

Topic Closed

This topic has been closed to new replies.

About this Topic