Home / Forums / DynamiX Support / Sidebar Width

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

  • Daniel Zairi
    Participant

    Hi guys,
    if i wanted to decrease the sidebar with (site wide), where would i do it? (im using childe theme)

    thanks,
    Dan.


    Tom ( Support)
    Keymaster

    Hi,

    As this is a customization it was in the customization forum but as a one-off, heres what was said.

    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%.

    Kind regards,
    Tom


    Daniel Zairi
    Participant

    Thanks a lot Tom! well appreciated. that worked, however, this just left me with the content block needing to stretch a bit more to suit the new width, what will be the css for it?
    Thanks,
    Dan.


    Tom ( Support)
    Keymaster

    Hi Daniel,

    Can you provide the exact CSS that you have added to the customization field before I can tell you what is wrong.

    Kind regards,
    Tom


    Daniel Zairi
    Participant

    Hi,

    this is what i used:

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

    when checking with chrome (inspect elements), i was able to set the right main content block with to:

    media="all"
    .row .eight {
    width: 71%; /* used to be 6.66666%*/
    }

    but im not able to apply it via the CSS edit.

    Daniel.


    Daniel Zairi
    Participant

    Hi Tom,
    Funny enough using the above settings directly into the style.css (child) theme did the trick. however when trying to apply it via the theme settings css section it doesn’t seems to take effect. any idea? (this is not the first code that doesn’t take effect from the setting section)

    Daniel.


    Tom ( Support)
    Keymaster

    Hi Daniel,

    The media=”all” part of the code is invalid I think so it may not get picked up.

    Are you using the latest version of DynamiX? The code added to my test site works find from the Custom CSS field. If you are still having issues, please set your reply to private and provide your URL/login details so I can take a further look for you?


    Daniel Zairi
    Participant
    This reply has been marked as private.

    Tom ( Support)
    Keymaster

    Hi Daniel,

    The Custom CSS field is definitely working, see as I made the footer text larger. I will leave the code in so you can see.

    If things don’t seem to work, try adding the !important rule before the closing ; within CSS.

    Kind regards,
    Tom


    Daniel Zairi
    Participant

    Hi Tom, i have put all the code into the custom CSS and also tried adding the !important rule. however, some of the new CSS catches hand some don’t (very strange) as when i add that same code directly to the style.css it works just fine.

    please take a look, i have added it all to the custom css.

    Daniel.


    Tom ( Support)
    Keymaster

    Hi Daniel,

    Just tried it with the important rule and it works,

    #content.layout_six {margin-left: 20% !important; }
    .row .six, .row .two_column {width: 60% !important;}
    .sidebar.columns.four {width:20% !important;}
    .sidebar.columns.three {width:20% !important;}
    .sidebar.side_one.layout_six {margin-left: -80% !important;}
    .row .eight {
    width: 71% !important; /* used to be 6.66666%*/
    }

    Kind regards,
    Tom


    Daniel Zairi
    Participant

    Hi Tom,
    I think that anything that has to do with CSS that is not theme related (i.e. forum widget, buddypress buttons, gravity forms) is not taking effect when custom css is sued. However, when using the css editor it does take effect and that is strange.

    on another note, when the show “Author” tab is enabled, the icon of the author shows above the author name instead of inline which effectively pushes down the howl block and braking the design.

    please advise.
    thnaks
    Dan.


    Tom ( Support)
    Keymaster

    Hi Dan,

    It definitely works, you need to make you are choosing the correct class or ID when styling other elements.

    Do you have an example the Author tab you are referring to so I can get a better understanding of what you mean?

    Kind regards,
    Tom


    Daniel Zairi
    Participant
    This reply has been marked as private.

    Tom ( Support)
    Keymaster

    Hi Daniel,

    If you update to the latest version of DynamiX, 4.0.2, this issue should be fixed.

    Kind regards,
    Tom

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

You must be logged in to reply to this topic.