Change Sidebar Widths

ShannonElizabeth
(@shannonelizabeth)

7 years, 9 months ago

I see this question has been asked many times before with no answers… I hope I can find an answer 🙁

How can you change the width of the sidebars? I’d like to make them much more narrow.

http://www.grabmypassport.com

Thanks!
Shannon

The page I need help with: [log in to see the link]

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

emranemranx
(@emranemranx)

7 years, 9 months ago

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!

katarina8890
(@katarina8890)

7 years, 8 months ago

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.

Jesús Hernández Maíz
(@jhmaiz)

7 years, 5 months ago

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

Jesús Hernández Maíz
(@jhmaiz)

7 years, 5 months ago

¿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

rcouvrette
(@rcouvrette)

7 years, 5 months ago

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.

Jesús Hernández Maíz
(@jhmaiz)

7 years, 5 months ago

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

j.koelb
(@jkoelb)

7 years, 1 month ago

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
theshulz
(@theshulz)

6 years, 10 months ago
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 6 years, 10 months ago by theshulz.
blenderitalia
(@blenderitalia)

6 years, 9 months ago

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)

6 years, 9 months ago

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——*/