XF 2.2 Sidebar width

[Old Nick]

Hello,

I change in Style Properties the sidebar width but this settings change sidenav width too
How to change the width only for sidebar ?

in extra.less i tried with .p-body-sidebar or .p-body-sideNav but no changes.
I can change everything in extra.less for p-body-sidebar except width.......

 

[Ozzy47]

You’ve tried something like:

.p-body-sidebar {
    width: 300px;
}

 

[Old Nick]

Hello @Ozzy47

This code is exactly what i tried but it doesn't works. I don't know why because if you put this for example that's works fine !

.p-body-sidebar {
    margin-top: 30px;
}

I can't change width in extra.less. Even with !important

 

[Brad Padgett]

Try reverting the style property changes and then giving it a try. It may be possible it's over riding the extra.less input.

You have it right though. So if that doesn't fix it then you need to make sure there's no css already set for the sidebar.

 

[Old Nick]

I just thought of something: when you change the width of the sidebar in the style properties it reduces the width of the content of the page, there is something automatic that happens at that time that does not happen when the width of the sidebar is defined in extra.less
So for me it's not sufficient to set the sidebar width in exra.less, something else is missing. this setting is restricted somewhere

 

[beerForo]

Just search sidebar in the acp and you will find the setting:
Sidebar and side navigation width

 

[Old Nick]

If i put this, the width change but p-body-content don't so the sidebar comes out of the canvas

.p-body-sidebar {
    flex: auto;
    display: block;
    width: 390px;
}

if i set in extra.less the p-body-content width too it's the same....

 

[Old Nick]

Just search sidebar in the acp and you will find the setting:
Sidebar and side navigation width

Yes but the settings changes the width for sidebar AND sidenav and i want to change only the sidebar width...

 

[Brad Padgett]

@nicodak after taking a look at your site (if it's the one in the signature), you have a custom theme with different requirements.

I was able to get it to work in inspect element with this code per your custom theme.

.p-body-sideNavCol, .p-body-sidebarCol {
width: 300px;
}

Just simply change width to the desired width.

 

[Brad Padgett]

It still shouldn't change the .p-body-sideNav area for the sidebar in other places.

 

[beerForo]

Yes but the settings changes the width for sidebar AND sidenav and i want to change only the sidebar width...

I looked in my extra.less and I have this:

/* sidebar width
@media (min-width: (@xf-responsiveWide + 1)) { [data-template="forum_list"] .p-body-sidebar { width: 275px; } }
*/

 

[Old Nick]

@nicodak after taking a look at your site (if it's the one in the signature), you have a custom theme with different requirements.

I was able to get it to work in inspect element with this code per your custom theme.

.p-body-sideNavCol, .p-body-sidebarCol {
width: 300px;
}

Just simply change width to the desired width.

Well done, it works like this !

.p-body-sidebarCol {
    width: 390px;
}

 

[Old Nick]

I looked in my extra.less and I have this:

/* sidebar width
@media (min-width: (@xf-responsiveWide + 1)) { [data-template="forum_list"] .p-body-sidebar { width: 275px; } }
*/

Not working for me this code (uncommented)

 

[beerForo]

Glad you got i it worked out. I commented it out awhile back perhaps it no longer works.

 

[Old Nick]

@beerForo thank you for you are interested in my problem
@Brad Padgett thank you too of course, i was stuck with this for hours !

 

[Goldoff]

If i put this, the width change but p-body-content don't so the sidebar comes out of the canvas

.p-body-sidebar {
    flex: auto;
    display: block;
    width: 390px;
}

if i set in extra.less the p-body-content width too it's the same....

Let me up this thread to say this worked fine for me with no issues , so a big thanks to those who cared