WordPress.org

Ready to get started?Download WordPress

Forums

How to add a HR (horizontal Line) between posts? (6 posts)

  1. Tee
    Member
    Posted 7 years ago #

    Hey,

    Can anyone help trying to get a "HR" dashed line to seperate my posts. Im not sure if I need to edit the style.php or the Style.css (what would be the code that write in there HR + dashed line)

    here's an example of what I would like to do: http://img255.imageshack.us/img255/6920/hrline2ye.png (you can see the HR dashed line that I did in photoshop)

    and here's my blog http://www.PumaTalk.com/blog

    my best,
    -Joey

  2. Tee
    Member
    Posted 7 years ago #

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

    -Joey

  3. ekusteve
    Member
    Posted 7 years ago #

    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

  4. dwzemens
    Member
    Posted 7 years ago #

    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

  5. dwzemens
    Member
    Posted 7 years ago #

    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

  6. dwzemens
    Member
    Posted 7 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic