A separator between articles on a static page

  • Resolved Gooly

    (@gooly)


    13 years, 6 months ago

    I want to be able to divide a ‘static’ page in multiple divisions. A kind of ‘simplified blog layout’. E.g. An article with a header/title, below that text and (eventually) images, a line/seporator below it and below that starts a new article in a new block. Etc. etc.

    I hear you thinking: “Use the blog option for it!”. But the point is that this website contains a lot of pages, and I want to have this option available for every page on the entire website.
    So using the blog option for all pages in the entire website is at least a bit overdone. (And how am I going to seperate all these posts to direct them to the correct page?)

    I thought about it and the headers and content is no problem, for obvious reasons. The only thing I actually need is a way to create a separator between the articles on one page. Preferable a line, or a ruler.

    A prerequisite is that it has to be available from the wysiwyg screen. (The person who is going to maintain this website content knows hardly anything about HTML/CSS)

    Things which already passed my mind and were ‘rejected’ are:

    Style the <p>’s and give them a border-bottom in the stylesheet.
    But that would give every single <p> a border and I don’t want that since there wil also be paragraphs inside the articles

    Create a <div> in HTML mode and give it a predefined class, which will add a border below.
    But like I already mentioned, the option needs to be available from the wysiwyg mode.

    Add a horizontal ruler <hr>
    <hr> is depracated in xHTML and also not available from the wysiwyg mode.

    And that’s were my inspiration stops and starts asking for help.
    Does someone else have an idea about this? Is there a plugin available for this? Is it more simple than I thought or is it impossible?

Viewing 5 replies - 1 through 5 (of 5 total)

  • I sometimes use a shortcode. You would type [divider] in the WP editor and a dividing line will appear at display time. I am demoing a very simple one here but you can add parameters that let you vary the width, color, etc.

    for the basic shortcode paste this in your theme’s functions.php

    add_shortcode( 'divider', 'shortcode_insert_divider' );
function shortcode_insert_divider( ) {
 	return '<div class="divider"></div>';
}

    Then add this CSS to your stylesheet, usually style.css

    .divider {
  width: 90%;
  margin: 10px auto;
  height: 1px;
  background-color: #999;
}

    This creates a thin gray line that is 90% of the width of its container, centered in that container, has 10 pixels of margin above and below it. You can vary any of that to your desired effect.

    Now add [divider] anywhere on the page you want a divider line.

    Thread Starter Gooly

    (@gooly)

    It works like a charm. Thanks! The idea of using a shortcode never came to my mind. But I also never worked with (WP) shortcodes before.
    I have the feeling that this is not just a solution for now, but also for eventually problems in the future ??

    Hi, sorry to open up an old wound, but I have been searching the net high and low for a similar solution to a problem I am trying to solve.

    I followed the [divider] code here, and it works, but not quite. My line rules run right through images.

    On a full-width page template I want to run:
    content left, image right
    divider
    image left, content right
    divider
    and so on.
    How do I implement that.

    Perhaps the best example of what I want to do is here:

    It’s the Thesis framework. I am trying to do the same in WordPress.
    See how those dividers have margins that or blocks that contain each section of content.

    Thanks!

    Hi

    The site you linked to has wrapped each section of content in a Div that has this css assigned to it:

    border-bottom: 1px solid #DDDDDD;
  margin-bottom: 1.467em;
  overflow: hidden;
  width: 100%;

    in other words, they are displaying a border at the bottom of a section. That sounds like a simpler approach for you if all you want is a line in between sections. The “overflow: hidden” clears the floats that were opened in each new section. The problem you are having sounds like a float problem. This approach will likely resolve it for you.

    If all you want is a horizontal line in betwe

    Thanks for the response!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘A separator between articles on a static page’ is closed to new replies.