XF 2.0 How to always push p-body-sidebar to bottom?

[ISPr_Winter]

Hi All,

I'm new to XenForo and recently purchased and installed the latest v2 release for testing. My first task is to integrate the forum into our existing style, which means I've got a lot of learning to do but currently there is one simple change that I'm trying to figure out.

Essentially I want to ensure that the sidebar is always at the bottom, but still responsive when it's down there like it is now. I never want it to display at the side like it does by default.

At the moment when the window shrinks you see the content scale and the sidebar drop to the bottom, which is fine, but I want it to be at the bottom all the time even in the normal fully expanded view.

I can't see an easy switch to do this so does anybody have any suggestion for a simple code change to make this happen? Thanks.

 

[Case]

Something like this in extra.less should do it...

.p-body-content  {
    display: block;
}

.p-body-sidebar {
    display: block;
    width: 100%;
}

 

[ISPr_Winter]

That's close to what I'm looking for, but still not quite ideal. Couple of problems.

1. It produces some excess width on the right side of the sidebar (i.e. extends slightly beyond the main forum content above).

2. It widens the sidebar blocks to fit the screen, but what I want to do is have it scale responsively in exactly the same way as it does now. What that means is when you first shrink the window the sidebar by default drops below the forum content but initially appears as several boxes side-by-side (inline), only later at even smaller resolutions does it extend each into blocks that fill the screen. So I quite like the inline boxes and want to preserve that appearance, except at very low resolutions like at present where it then goes 100% width. If that makes sense.

---

I can produce the same sort of effect by setting 'Wide responsive break point' to 1200px (same as the 'Maximum page width'), but this isn't ideal as it then forces the page to adopt a more compact display and I want the normal display with menu titles etc.

 

[Ehren]

Something like this should help

@media (min-width: (@xf-responsiveWide + 1px)){
    .p-body-main,
    .p-body-content{
        display: block;
    }

    .p-body-sidebar{
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        margin: 20px -5px -20px;
        width: auto;
    }

    .p-body-sidebar > * {
        margin: 0 5px 20px;
        margin-top: 0px;
        min-width: 250px;
        flex: 1 1 250px;
    }

    .p-body-sidebar > :last-child{
        margin-bottom: 20px;
    }

    .p-body-sidebar::after {
        display: block;
        content: '';
        height: 0;
        margin: 0 5px;
        min-width: 250px;
        flex: 1 1 250px;
    }

    .p-body-sidebar .block-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .p-body-sidebar .block-container .block-footer {
        margin-top: auto;
    }
}

 

[ISPr_Winter]

Ah perfect, that's exactly what I wanted to achieve, thanks. The only change I made was to add this bit of code in order to remove the 10px gap that would normally exist when the sidebar shows:

    .p-body-main--withSidebar .p-body-content {
        padding-right: 0px;
    }

 

[ISPr_Winter]

I just realised that code screws up the 'Members' page output (i.e. the Most messages, Most points and Staff members boxes).

I think I've managed to fix it by tweaking the first display:block; code to only apply when inside of the sidebar rule.

    .p-body-main--withSidebar .p-body-content {
        display: block;
    }