XF 2.2 Sidebar width

[Deleted member 184953]

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;
}

 

[Deleted member 184953]

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.

 

[Deleted member 184953]

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

 

[Deleted member 184953]

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

 

[Deleted member 184953]

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; } }
*/

 

[Deleted member 184953]

@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;
}

 

[Deleted member 184953]

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.

 

[Deleted member 184953]

@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