Adding colored vertical line to separate content from sidebar

  • Unknown's avatar
    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: (visible only to logged in users)

  • Unknown's avatar
    fabianapsimoes · Member ·

    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 :)

  • Unknown's avatar
    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;
}
  • Unknown's avatar
    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?

  • Unknown's avatar
    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)?

  • Unknown's avatar
    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?

  • Unknown's avatar
    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

  • Unknown's avatar
    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!)

  • Unknown's avatar
    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

  • Unknown's avatar
    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;
}
  • Unknown's avatar
    omaradnan2 · Member ·

    AMAZING! Thanks

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