WordPress.org

1. gabbythegrump
   Member
   Posted 5 years ago #

   I have set up WP default theme blog for my pastor at http://visitfriendshipbaptist.org/perspective and have mostly modified it to my satisfaction although perhaps not technically correct methods. I am and have been very pleased with WP.

   However, I would like to insert an image divider or separator between post. I have seen this on other WP blogs, but it does not appear to be a part of Kubrick. I looked at the source code of another WP blog and found a line of code 'div class="sep"' that might have something to do with a separator as that blog has one, a default one I think.

   I dabble with html and sometimes can figure some things with PHP, but generally Iam a newbie. I will appreciate it if someone can give me some guidance on inserting a separator or divider that will appear between each post.

2. BPartch
   Member
   Posted 5 years ago #

   Hello

   What I do is use an image for this but the easy method is to just add

   <hr />

   in the desired places.

   Though if you want to use the image method you will have to create the image that will be used as a seperator and then in the .css file add this:
   div.hr {display: none}
/*/*/a{}
div.hr {
display: block;
height: 10px;
background-image: url(images/hr.gif);
background-repeat: no-repeat;
background-position: left center;
margin: 1em 0 1.5em 0;
}
hr {display:none}/* */

   You may want/need to alter that css some to get the effect you want for your particular site.

   Then in the HTML where you want the divider to appear just add:

   <div class="hr"></div>

   Hope it helps.

3. billyztop
   Member
   Posted 5 years ago #

   If you want it like mine http://www.quiglag.com then you need to go to your Theme editer > Index.php and add <div class="hr"> </div> right before the end of the loop.

4. gabbythegrump
   Member
   Posted 5 years ago #

   Thanks BPartech, I have it working now apparently. The problem I had at first was where to insert the div class code as style.css is a large page. I found near the end of style.css
   hr {
   display: none;
   }
   so I took that out and inserted the css info you gave me above. The only modification I made was changing height px from 10 to 24 as my hr.gif is 238x24

   I uploaded hr.gif to the images folder for the WP default theme.

   Assuming that was OK up to this point I wasn't sure what page to insert the <div class="hr"></div> into so I tried a couple of likely spots in index.php.

   Sure enough that works and now I'll go back and tamper with the style to get the hr.gif centered horizontally. I think I need to take out one of the insertions on index.php

   Thank you very much for your complete and prompt response.

5. gabbythegrump
   Member
   Posted 5 years ago #

   Billyztop thanks too. I like your blog design and when I get a couple of other sites republished I'll study it over some more.

6. BPartch
   Member
   Posted 5 years ago #

   Hrello

   Glad you got it to work, though I just realized that I left something out, you should actually include the <hr /> at the end of the div:

   <div class="hr"></div><hr />

   Sorry about that!

Topic Closed

This topic has been closed to new replies.