Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Tee

    (@pumatalk)

    Does anyone here know how I can do this? It’s just a Horizontal dashed-line to seperate the posts

    -Joey

    Well, this isn’t the most elegant way to do it, but you could open your index page in your theme and find where the code is located that prints the categories, comments, etc. at the bottom of the post and add:

    <p>———————————–</p>

    It would look something like below in the default theme.

    http://www.georgetownprofessor.net/blogs/spring07/shyndman/

    I’m sure there is a nicer way to do it, but I’m not that good with css or html, so I do what I can to get by 🙂

    I tried the <hr> tag, but that didn’t seem to work…and I think it has been depreciated anyway.

    Steve

    Add the following to the style.css file in your theme directory:

    hr{
    background : transparent url(images/hr_image.gif) repeat-x scroll top;
    }

    Naturally, you would need to have an image file called “hr_image.gif” in your images directory. That image file would then scroll across the screen, on the horizontal x-axis, and provide the look of what you want. Naturally, you would have to place the <hr /> tag in the appropriate place in the WordPress theme file.

    I am using this technique to add the little “squiggly” thing between posts at:

    http://www.stoneycreekwebdesign.com/blog/

    Feel free to email me with questions at:
    dwzemens AT stoneycreekwebdesign DOT com

    Add the following to the style.css file in your theme directory:

    hr{
    background : transparent url(images/hr_image.gif) repeat-x scroll top;
    }

    Naturally, you would need to have an image file called “hr_image.gif” in your images directory. That image file would then scroll across the screen, on the horizontal x-axis, and provide the look of what you want. Naturally, you would have to place the <hr /> tag in the appropriate place in the WordPress theme file.

    I am using this technique to add the little “squiggly” thing between posts at:

    http://www.stoneycreekwebdesign.com/blog/

    Feel free to email me with questions at:
    dwzemens AT stoneycreekwebdesign DOT com

    CORRECTION:
    div.hr {
    background : transparent url(images/sb_hr.png) no-repeat scroll top;
    height : 30px;
    border : 0;
    background-repeat: repeat-x;
    }

    I am using this CSS and applying the tag as a class in a division as follows:

    <div class=”hr”><hr /></div>

    Place this just above the <?php endwhile; ?> tag of The Loop.

    Sorry for the earlier improper markup.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add a HR (horizontal Line) between posts?’ is closed to new replies.