Adding colored vertical line to separate content from sidebar

  • Author
    Posts
  • #1379410

    omaradnan2
    Member

    Hi guys,

    I tried searching online for this but didnt find a good solution that works with my blog (cfatutor.me)

    I would like to add a vertical line (color #cc0000) that separates content from sidebars

    Thanks

    OMar

    The blog I need help with is cfatutor.me.

    #1379518

    Hi there,

    You can do this by adding side borders to your main content, and then adjusting margins and padding to fit the width (since the width of the border will add to the total space used by your content and sidebars). Give this a try:

    .column-content {
    border: 1px solid #cc0000;
    border-top: 0;
    border-bottom: 0;
    margin: 0;
    padding: 0 14px;
    }
    
    .column-narrow {
    margin-right: 15px;
    }
    
    .column-last {
    margin-right: 0;
    margin-left: 15px;
    }

    Let me know if it looks the way you want it to look :)

    #1379526

    justpi
    Member

    Should the lines extend down to where the content ends, or only down to where the widgets end?
    If you prefer the former, use fabianapsimoes’ solution. If you prefer the latter, use this:

    .column-narrow {
        border-right: 1px solid #CC0000;
        margin-right: 18px;
        padding-right: 18px;
        width: 193px;
    }
    .column-content {
        margin-right: 0;
    }
    .column-last {
        border-left: 1px solid #CC0000;
        border-right: 0 none;
        margin-left: 18px;
        margin-right: 0;
        padding-left: 18px;
        padding-right: 0;
        width: 193px;
    }

    #1379569

    omaradnan2
    Member

    Is there a way where I can use the code fabianapsimoes provided only for the home page and the code justpi provided for other pages? The thing is that I tried fabianapsimoes code but it didnt work on other pages – the content drifted down because there is only left sidebar in the other pages (not two sidebars) – The code justpi provided work perfectly with both pages but I dont like how it appears in the home page because the two sidebars have different lengths and the mismatch between the size of both lines don’t look good .. so is there a way to use one code for certain page and the other for other pages?

    #1379589

    justpi
    Member

    Yes, it’s possible. But it will require some adjustments, because I used a little bit more space between text and line (18px) than fabianapsimoes did (14/15px), and I narrowed the sidebars a little. These things shouldn’t change from page to page, so first you must decide: do you want that space to be as in her version, or as in mine (or maybe even more)?

    #1379596

    omaradnan2
    Member

    If it wouldn’t change from page to page then I would want it as yours but without the content moving down in pages other than home – does this mean I have to change the 14 and 15 in your code to 18?

    #1379605

    omaradnan2
    Member

    Im sorry – I actually meant I would want the other code .. the one that extends to the end of the page .. fabianapsimoes code

    #1379608

    justpi
    Member

    Now you got me confused…
    a) 18px of space or 14?
    b) Borders down to the end of the content on the homepage and down to the end of the widgets on the other pages, or borders down to the end of the content on all pages?
    (Depending on the answer to #b, I may have a third question too!)

    #1379612

    omaradnan2
    Member

    Ok I’m sorry because I got confused between the posts initially

    Ideally, I want a code to
    – Extend to end of content on the home page only (fabianapsimoes code)
    – Extend only to widgets and sidebar on the other pages (your code)

    If not possible, then I won’t mind if it extends to end of content on all pages – however, the code fabianapsimoes provided had problem in other pages because the content moved down to end of the page

    #1379613

    justpi
    Member
    .column-narrow {
        border-right: 1px solid #CC0000;
        margin-right: 18px;
        padding-right: 18px;
        width: 193px;
    }
    .column-content {
        margin-right: 0;
    }
    .home .column-content {
        border-right: 1px solid #CC0000;
        border-left: 1px solid #CC0000;
        padding: 0 18px;
    }
    .home .column-narrow {
        border: 0 none;
        margin-right: 0;
        padding-right: 18px;
    }
    .home .column-last {
        margin-right: 0;
        padding-left: 18px;
        padding-right: 0;
    }
    #1379616

    omaradnan2
    Member

    AMAZING! Thanks

The topic ‘Adding colored vertical line to separate content from sidebar’ is closed to new replies.