Home / Forums / DynamiX Support / Sidebar Widths

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Pamela BRanoff

    This is the best theme we ever found so far! Thank you for making it so great!
    People at my design firm were wondering if there are any “proper” ways to manipulate sidebar widths on a “per page” basis.

    An example site : http://www.beautyink.ca
    We can see that the sidebar on the home page has a css width of 33% – and this is the “limit” (we cannot make it wider than that unless we shrink the middle content).

    Can you please give us some tips about managing side bar widths?

    Tom ( Support)

    Hi Pamela,

    Thank you for the kind words, I will pass this onto Andy (theme creator) 🙂


    This will take a little bit of customization as it is not a standard theme option. Technically it should be in the customization forum but here is the basics of it for you to have a play with.

    To start, I recommend using the Custom CSS field within Appearance > Theme Options > Customize > Custom CSS as adding your CSS here instead of the CSS file will mean that when you update the theme, the code will still be within your settings.

    There is no documentation available as it is not a standard theme option but I can help you out with the code.

    Try the following CSS instead,

    #content.layout_six {margin-left: 20%; }
    .row .six, .row .two_column {width: 60%;}
    .sidebar.columns.four {width:20%;}
    .sidebar.columns.three {width:20%;}
    .sidebar.side_one.layout_six {margin-left: -80%;}

    It is kind of hard to explain but I gave it a go.

    #content.layout_six {margin-left: 20%; } – layout_six has a margin left of 20% as it needs to be pushed out 20% from the left.
    .row .six, .row .two_column {width: 60%;} – has a width of 60% as it is taking up 60% of the page (this is the main content area)
    .sidebar.columns.four {width:20%;} – Width for the right column
    .sidebar.columns.three {width:20%;} – Width for the left column
    .sidebar.side_one.layout_six {margin-left: -80%;} – is pushing out 80% from the right.

    .sidebar.side_one.layout_six {} ( left sidebar for sidebars left and right as per blog page )
    .sidebar.side_two.layout_six {} ( right sidebar for sidebars left and right as per blog page )

    All columns and content have to add up to 100%, if the set a sidebar to 20% then the margin-left of the content has to be 20%.

    Adding the code in should alter the width of the sidebars.

    To add this to a specific page, you will need to find the ID of the page.

    Change the page id for your own page id. To find the ID, right click > View Source > Search for page-id- > copy the id and paste into the CSS.

    .page-id-110 #content.layout_six {margin-left: 20%; }

    Kind regards,

    Pamela BRanoff

    Tom this is exactly what we needed.
    Thank you very much!
    I know how to use CSS but I needed that particular set of codes – now I can play with the percentages and get it going.

    Thank you very much!
    I hope you get recognized enough for what you do 🙂

    Tom ( Support)

    Thank you for the kind words!

    If you are happy with the theme, please take a second to rate the theme 5 stars here.

    Much appreciated 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.