Support » Theme: Hueman » Change Sidebar Widths

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi Shannon,

    You can try taking advantage of tools such as Inspect or Firebug which can aid in customizing. These are useful 3rd party tutorials on how to go about using Inspect.




    Thank you!

    Hey Shannon,

    Here’s what you need to do. If you want to change the left sidebar (sidebar 1) to something like 250px, you need to add this to custom CSS:

    .sidebar.s1 {
    width: 250px;
    }

    .col-3cm .sidebar.s1 {
    float: left;
    margin-left: -250px;
    }

    .col-3cm .main-inner {
    padding-left: 250px;
    }

    .content {
    background-color:#fff;
    }

    If you want to make it even more narrow just change the number.

    Hope this helps.

    Muchas gracias emranemranx, me he vuelto loco para buscar cómo hacerlo, genial!!

    ¿Cómo puedo hacer más ancha el sidebar de la derecha? pongo el mismo código pero cambiando left por right pero me descuabra
    Gracias

    Hi Katarina and/or others,

    I just saw your answer to Shannon (some 3 months ago) about how to change the left sidebar to 250px by adding to the custom css.

    I would like to make the left sidebar the exact same size as the right sidebar, and I would like to do this without messing anything else up. I like my Hueman Pro! But I would prefer if the column layout for the main content were wider, and the best way to do this methinks would be to make the left sidebar narrower, i.e. the same size as the right sidebar. For me, the left sidebar is a tad too wide anyway.

    If you can tell me how best to do this – I like the custom css method! – that would be greatly appreciated.

    Roger.

    jo, es cierto, descuadra la página, algo falta en el código

    j.koelb

    (@jkoelb)

    Hello,
    I tried the method Katarina8890 mentioned and it worked but there is one problem:
    If the left sidebar is collapsed (in mobile view), the box is too big (overlaps the main content) and expanding the sidebar doesn’t work.
    my homepage: http://www.herderschule-giessen.de

    Could someone please help?

    Thank you in advance

    katarina8890 (@katarina8890)
    Your method works! Tell me what to change in this code, what would the right sitebar size change? left change on right?

    • This reply was modified 4 months, 3 weeks ago by theshulz.
    blenderitalia

    (@blenderitalia)

    4you

    /*——-central and more——*/
    .sidebar-expanded .content {
    transform: translate3d(0px, 0px, 0px) !important /*block central*/
    }
    .sidebar {
    z-index:2!important
    }
    /*—-sidebar dx——-*/
    @media only screen and (min-width: 1200px) and (max-width: 50000px) {
    .col-3cm .main-inner {
    padding-right:340px!important
    }
    .col-3cm .sidebar.s2 {
    margin-right:-340px!important
    }
    .sidebar.s2 {
    width: 340px !important
    }}
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
    .sidebar.s2.expanded {
    width: 340px!important;
    margin-right:-340px!important;
    transform: translate3d(-290px, 0px, 0px) !important
    }
    .col-3cm .s2.collapsed {
    margin-right:-50px!important;
    width:50px!important
    }}
    /*——sidebar sx——*/
    @media only screen and (min-width: 960px) and (max-width: 50000px) {
    .col-3cm .main-inner {
    padding-left:260px!important
    }
    .col-3cm .sidebar.s1 {
    margin-left:-260px!important
    }
    .sidebar.s1 {
    width:260px!important
    }}
    @media only screen and (min-width: 480px) and (max-width:960px) {
    .sidebar.s1.expanded {
    width:260px!important;
    margin-left:-260px!important;
    transform:translate3d(210px, 0px, 0px) !important
    }
    .col-3cm .s1.collapsed {
    margin-left:-50px!important;
    width:50px!important
    }}
    /*——-end——*/

    blenderitalia

    (@blenderitalia)

    Added different color sidebar1 and sidebar2 and more

    /*——-central and more——*/
    .sidebar-expanded .content {
    transform: translate3d(0px, 0px, 0px) !important
    }
    .sidebar {
    z-index:2!important
    }
    .so-widget-sow-editor.so-widget-sow-editor-base {
    background: #262628;
    padding: 10px
    }
    .sidebar .widget {
    padding: 13px !important
    }
    /*—-sidebar dx——-*/
    .col-3cm .container-inner > .main::after {
    padding-right: 340px;
    background: #424242;
    }
    @media only screen and (min-width: 1200px) and (max-width: 50000px) {
    .col-3cm .main-inner {
    padding-right:340px!important
    }
    .col-3cm .sidebar.s2 {
    margin-right:-340px!important
    }
    .sidebar.s2 {
    width: 340px !important
    }}
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
    .sidebar.s2.expanded {
    width: 340px!important;
    margin-right:-340px!important;
    transform: translate3d(-290px, 0px, 0px) !important
    }
    .col-3cm .s2.collapsed {
    margin-right:-50px!important;
    width:50px!important
    }
    .s2.expanded {
    background-color: #424242
    }}
    /*——sidebar sx——*/
    .s1.expanded .post-nav, .s1.expanded .sidebar-content {
    opacity: 1;
    min-width: 260px
    }
    @media only screen and (min-width: 960px) and (max-width: 50000px) {
    .col-3cm .main-inner {
    padding-left:260px!important
    }
    .col-3cm .sidebar.s1 {
    margin-left:-260px!important
    }
    .sidebar.s1 {
    width:260px!important
    }}
    @media only screen and (min-width: 480px) and (max-width:960px) {
    .sidebar.s1.expanded {
    width:260px!important;
    margin-left:-260px!important;
    transform:translate3d(210px, 0px, 0px) !important
    }
    .col-3cm .s1.collapsed {
    margin-left:-50px!important;
    width:50px!important
    }
    .s1.expanded {
    background-color: #1e1d1d
    }}
    /*——-end——*/

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.