XF 2.1 Sidebar width - trying to NOT widen all of them

[beerForo]

I have entered this valve in this area:

Sidebar and side navigation width
Width of any elements that make up the sidebar

But I only want it for the forum sidebar (widget position Forum list: Sidebar), not the account settings sidenav etc. How can I do this in CSS? Thanks

 

[beerForo]

Anyone know this one?

 

[Russ]

Extra.less edit:

[data-template="forum_list"] .p-body-sidebar {
    width: 300px;
}

Would target just the sidebar on the main forum page (Forum list: Sidebar)

 

[beerForo]

Thanks!

 

[beerForo]

@Russ Oops this is messing it up on mobile. I am using a percentage and since mobile is 100% my 35% is shrinking it. Any ideas?

 

[Russ]

Whoops... try this instead:

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

 

[beerForo]

Bingo!

 

[jgaulard]

Whoops... try this instead:

Hi - Thank you for this code. I used it and the sidebar is now perfect at 300 pixels wide. I do have one issue though. Now that the sidebar is wider, some advertisements that I have in the primary main content (left) column seem to have remained as wide as they originally were and they're pushing into the sidebar. I can't seem to fix the problem. Would you happen to have any advice? Thank you.

PS - These ads are responsive, so they should shrink down, but they aren't.

 

[beerForo]

I know exactly what you mean.

I have the same issue. The "forum overview" top or bottom ads still "think" the sidebar is 250 because they will cover up the widened sidebar to that point. I was wondering myself, if the XF sidebar code is hardcoded somewhere else to make these ads think that.

I didn't post it here because I figured it wasn't part of this code. But yeah, any insight appreciated.

 

[jgaulard]

I know exactly what you mean.

I have the same issue. The "forum overview" top or bottom ads still "think" the sidebar is 250 because they will cover up the widened sidebar to that point. I was wondering myself, if the XF sidebar code is hardcoded somewhere else to make these ads think that.

I didn't post it here because I figured it wasn't part of this code. But yeah, any insight appreciated.

Hi - I actually used the Style Properties > Page Setup settings to change what I needed changed. I increased the width of the sidebar to 300px and then increased the maximum page width to 1500px and I now have no overlap. I actually didn't need to change the maximum page width. I just wanted to.

 

[beerForo]

Bookmarked your post thx!

 

[beerForo]

Yes the issue was I wanted to increase the sidebar but not the sidenavs. So I kept the XF setting at 250 and increased sidebar in extra.less. This issue is the ads think the sidebar is still 250 and overlap. The fix is as you stated, use the XF setting to increase, and use extra.less to decrease the sidenavs back to 250. In case this helps anyone.