XF 2.2 Sidebar width

Nicolas FR

Well-known member
Hello,

I change in Style Properties the sidebar width but this settings change sidenav width too :confused:
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.......
 
Solution
@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.

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

Just simply change width to the desired width.
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 !
Less:
.p-body-sidebar {
    margin-top: 30px;
}
I can't change width in extra.less. Even with !important
 
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.
 
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
 
If i put this, the width change but p-body-content don't so the sidebar comes out of the canvas
Less:
.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....
 
@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.

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

Just simply change width to the desired width.
 
Solution
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:
Code:
/* sidebar width
@media (min-width: (@xf-responsiveWide + 1)) { [data-template="forum_list"] .p-body-sidebar { width: 275px; } }
*/
 
@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.

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

Just simply change width to the desired width.
Well done, it works like this !
Less:
.p-body-sidebarCol {
    width: 390px;
}
 
If i put this, the width change but p-body-content don't so the sidebar comes out of the canvas
Less:
.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 🙏
 
Top Bottom