WordPress.org

Ready to get started?Download WordPress

Forums

Preference Lite
[resolved] Adding vertical divider between main content and sidebar (9 posts)

  1. sue_gir
    Member
    Posted 5 months ago #

    Hi,
    My side bar is not very long so as you scroll down the page, the page loses interest because of lack of color. I'd like to add a vertical line to divide the main content from side bar (all the way down past the end of side bar).

    I have already tried this.
    http://wordpress.org/support/topic/adding-dividing-line-to-separate-sidebar-from-main-content
    And this:
    http://en.forums.wordpress.com/topic/adding-colored-vertical-line-to-separate-content-from-sidebar?replies=11

    But nothing seems to change. Please let me know how I can get it to work.

    I appreciate the help. Thanks.

  2. David Beja
    Member
    Posted 5 months ago #

    Can you provide an url of your website?

  3. sue_gir
    Member
    Posted 5 months ago #

    Sorry, I forgot. Here it is. http://trulyinspiredmom.com

  4. David Beja
    Member
    Posted 4 months ago #

    I have 2 suggestions:

    1) Using CSS3 box-shadow (it will not work below IE9)

    #component {
        box-shadow: 3px 0px #1693a5;
    }
    article {
        padding-right: 10px;  /* this padding is used so that the text has some padding from the border */
    }

    2) Using a background image
    You create an image with a rectangle of the color of the border with 3px X 1px (3px is the width of the border you want...) and set it as a background of the #component div:

    #component {
       background: transparent url(url_of_the_image) repeat-y top right;
    }
    article {
        padding-right: 10px;
    }

    Another option would be to set a border-right to #component, but then you would have to redefine the widths of the bootstrap spans so that the sidebar wouldn't jump to the bottom.

    Note that it's better to make theme changes with a child theme or with a plugin that change the css dynamically, like Jetpack.

    Hope this helps!

  5. sue_gir
    Member
    Posted 4 months ago #

    Thanks a lot! The first suggestion works brilliantly!

  6. LocalAPPDiva
    Member
    Posted 16 hours ago #

    David- I would like to do something similar to sue_gir. I tried what you stated to do for her but did not work. Any advice??

  7. stephencottontail
    Member
    Posted 16 hours ago #

    @LocalAPPDIva: Can you post a link to your website?

  8. LocalAPPDiva
    Member
    Posted 15 hours ago #

    Hi Sorry it is http://www.NEAZRA.org I did figure out the border issue. I am still playing with it till I get the look that I want. I do however would like to have a custom divider show up after each widget in the sidebars what would be the easiest way to code it into the theme?

  9. stephencottontail
    Member
    Posted 15 hours ago #

    As you're using the Intuition theme, not Preference Lite, you may get better answers if you post in the dedicated theme forum: http://wordpress.org/support/theme/intuition

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.