Home / Forums / DynamiX Support / How to Change Width

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts

  • omer
    Participant

    Hi,

    I use blog view for my site. I chosed 1 left 1 right side bar. However, middle parts’ width is lee than I want to. Is there any way to change widht of sidebars and middle part?

    Thanks


    Tom ( Support)
    Keymaster

    Hi Omer,

    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. If you find this too difficult, you can request customizations through the customization forum here.

    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,
    Tom


    omer
    Participant

    Thanks Tom. I will try what you said. In my opinion, you can add this propery as default to your themes.


    omer
    Participant

    Hi,

    I could change widht of sidebars. However, I cannot use the whole middle part. http://imgim.com/3091incid1456298.png as you can see there are empty spaces at the middle. Is there a way to widen middle part ?

    Thanks


    Tom ( Support)
    Keymaster

    Hi Omer,

    Try adjusting the following CSS.

    .row .six {
    width: 60%;
    }
    

    What code do you have at the moment and I will take a quick look.

    I recommend using the inspect element option within Chrome to figure out exactly which CSS element to adjust.

    You can view the comprehensive Custom CSS screencast here, this will give you more information on how to customize elements.

    Tom


    omer
    Participant

    Hi,

    At my CSS code is like;

    #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%;}
    .row .six {width: 60%;}

    Still there are spaces at right and left of the middle part


    Tom ( Support)
    Keymaster

    Hi Omer,

    You had the right CSS just without the !important rules. I have added these, please see below.

    .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% !important;}
    #content.layout_six {margin-left: 20% !important;}
    .row .six {width: 60% !important;}
    

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

    Much appreciated 🙂

    Kind regards,
    Tom


    omer
    Participant

    thanks a lot. I have already rate theme 5 stars 🙂


    omer
    Participant

    By the way, These codes changed just my homepage. Is there a way to apply this codes to pages or posts?

    You can see a page view from my site here http://i.hizliresim.com/d4o6R7.png


    Tom ( Support)
    Keymaster

    Hi Omer,

    This is really getting into customization now.

    You will need to find out the page-id or post-id and set the code to that page too.

    Right click > view source code on your browser on the page > search for post-id > copy the page id, page-id-1234 > add it into your custom CSS like this.

    .post-id-4444 #sub-tabs, .post-id-5555 #sub-tabs {
    display: none;
    }
    

    You will need to add this for each rule. Normally users have the same set up for each page so this is not a problem.

    Hope this helps.

    Kind regards,
    Tom


    Spatiulus
    Participant

    Hello! I used this code:
    .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% !important;}
    #content.layout_six {margin-left: 20% !important;}
    .row .six {width: 60% !important;}

    and all worked well, but when I created a two columned row – happened this:

    • This reply was modified 3 years ago by  Spatiulus.

    Spatiulus
    Participant

    I am bad in CSS, but I understand that columns are now 60% each one, not 50% as it should be. When I wright:
    .row .six, {width: 60%!important;}
    .row .six, .row .two_column {width: 50%!important;}

    the whole row became 50%. Can you help me please? I just wanted to make my sidebars thicker than the default 25%

    Andy
    Andy
    Keymaster

    Hi,

    Nearly there. It’s because you’re applying it to every two_column / six column. You need to focus more on the sidebar and content itself. e.g

    #content.layout_six {width:60% !important;}
    .sidebar.layout_six {width:20% !important;}

    .sidebar.side_one.layout_six {margin-left: -80% !important;}
    #content.layout_six {margin-left: 20% !important;}


    Steam_Donkey
    Participant

    Would love an update to customize column width more easily. I’m running into this issue as well, but would like it customized across all pages (would be the same ratio of column width through the website).

    Andy
    Andy
    Keymaster

    It is something I want to develop in the near future. I think I’ll go with more options. e.g. 20% / 80%, 25% / 75% etc.

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

You must be logged in to reply to this topic.