Adding a border on one side of column?

  • Very much new to working with WP. I’ve honestly searched for a simple way to add a divider between two columns on my Page/s. I’ve seen a few post that seem to involve adding code into the css. I’m not clear on a few things. Well…many things.

    1) If I were able to figure out what code to enter and where exactly, would that code then apply the border on any columns that I make in WP? I might not want that on certain pages.

    2) Can I somehow just add code to the column on the page where I’m working instead of doing it in css? If so what would that code be? Here’s the code generated at the start of the column right now. <div class=”unit two-thirds”>

    Please if you can help give me more precise steps on what and where to enter the code, be it in css or the actual page.

    I am using the column generator that came with the Theme. I’ve installed a few Column plugins but none of them have an option for adding a border.

    Here is a link to a page I started which is still in progress.

    3) One other question which may be for a different post. Is it because this Theme is “responsive” that the page is so wide when viewed on my PC? I have a similar page on a different website (not a WP site) and I was able to get everything into a much narrower area, with both columns and text aligned below the width of the top photo. Is there a WP Appearance setting or Theme setting that would limit the maximum width when viewed on a larger screen?

    Many many thanks!

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

  • If it is a paid theme you should consult the theme dev.

    .grid .two-thirds {
    border-right: 2px solid #808080;

    in a child theme (check in the Codex on how to create a child theme) will add a right border to the wide column and this acts as required divider.

    Doing this for individual pages could be done a number of ways.
    Q2 Inline css isn’t great but adding a class eg <div class=”unit two-thirds column-divider”>
    and defining

    .column-divider{
border-right:1px solid grey;
}

    in your child theme css could work(untested)

    Identifying the page ID and applying the css to only those pages you want would be a possibility, or a new page template for those posts you want different styling applied to with new classes added. It depends on how the theme is structured. Consult the developer.

    You have an @media rule

    @media only screen and (max-width: 1199px)
.wrapper, .boxed-layout>.primary-wrapper, #content.widecolumn {
width: 960px;
}

    which is allowing the columns to spread wider as soon as you hit 1200px wide

    followed by

    .wrapper, #content.widecolumn {
max-width: 1200px;
}

    so that would appear to be a deliberate choice by the dev

    again, in a child theme adding

    .wrapper, #content.widecolumn {
max-width: 960px!important;
}

    should control this
    M

    Thread Starter westlightimages

    (@westlightimages)

    Thanks for the reply and all this info. I got some reading up to do! I should stick with taking photos and leave the web design stuff to pros in that field…but I love messing around with new stuff.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding a border on one side of column?’ is closed to new replies.