WordPress.org

1. mastiff
   Member
   Posted 7 years ago #
   

   I've got a graphic I'd like to insert between posts on the main page. Can someone tell me where the appropriate place is to put it in the template files? For example, if I just wanted a horizontal line <hr>, where would I put that to get it to show up between posts?

2. Lorelle
   Member
   Posted 7 years ago #
   

   In the index.php template files, look for the end of the postmetadata section and the final DIV of the WordPress Loop. When the page is actually generated, it looks like this:

   </div>
<div class="post" id="post-2">

   Now, the second line is the beginning of the Loop where the posts repeat themselves down your page. The DIV is the end of each post.

   There, put a <hr /> tag (XHTML version) so when the page is generated, it would look like this:

   </div>
<hr />
<div class="post" id="post-2">

   There are other methods, but this is the easiest.

3. Michael Bishop
   
   Posted 7 years ago #
   

   And if you wanted to use a graphic, you could insert a class there, and in your css define a background, and anyother info you wanted.

4. mastiff
   Member
   Posted 7 years ago #
   

   Thanks. I'll try it tonight. Will that put the divider after the last post too? I think, ideally, it'd only be between posts, but may it'll be fine either way.

5. Joshua Sigar
   Member
   Posted 7 years ago #
   

   Will that put the divider after the last post too?
   Yes. But if you're good enough, you could cover up the divider for the last post with the footer.

6. mastiff
   Member
   Posted 7 years ago #
   

   Thanks for the help. I think I need some more advanced help though. ;)

   The idea I had for my divider graphic is one that spans the full width, including the sidebar and the edges, etc. When I cut in to the loop with a new <div id="xxx"></div>, I see that it only wants to put the graphic within the narrow column where the post text goes. I tried breaking out of the main <div id="content" class="narrowcolumn"> and going back in after the graphic, but it had some undersirable effects with the sidebar, like all the sidebar links got shoved down to the bottom (into the last instance of that class or something?). Any suggestions on how to pull this off easily without rewriting everything? TIA

7. Joshua Sigar
   Member
   Posted 7 years ago #
   

   ...and going back in after the graphic
   I'm not clear as to what you meant by that. ??

   Nonetheless, I may have a suggestion but I don't think it's easy for you. It'll be your "full-time job."

   Do you know the CSS term "z-index," "relative," or "absolute" positioning? No?

8. mastiff
   Member
   Posted 7 years ago #
   

   Hmm. No, not familiar. I can look it up of course. What I meant by "going back in" was like putting this at the end of the loop:

   </div><div id="divider">
   </div><div id="content" class="narrowcolumn">

   It didn't work, but that's what I meant.

   Thanks.

9. Joshua Sigar
   Member
   Posted 7 years ago #
   

   Forget what I said in previous post.

   Now, why do you want the divider to be outside "content?"
   It's supposed to be between "post"s and inside "content." Unless you're trying to accomplish something that I don't follow.

   So far, Lorelle's solution above sounds applicable for your purpose.

10. mastiff
    Member
    Posted 7 years ago #
    

    It was just for effect with the theme, I didnt want to be constrained to the boundaries of the post column. The best way I found is to provide a background image for .postmetadata and then use negative margins. Worked for me anyway.

Topic Closed

This topic has been closed to new replies.