Side By Side Nodes

Side By Side Nodes

Dad.

Well-known member
Audentio submitted a new resource:

Side By Side Nodes - From Audentio Design

Hey everyone,

I hear a lot of talk lately about side by side nodes, so here is a resource to get you in the right direction. If you goal is to have an alternate style to your node list or save some space, this is a great way to set your forums up and XenForo is neat enough to allow this to be done with ease.

First, decide whether you want your category nodes side by side or your forum/page/link nodes side by side. Also, when you have a number of nodes...

Read more about this resource...
 
Well, I just copy and paste this code to extra.css (and all other codes listed in method 2):
Code:
/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */

@media (min-width: @maxResponsiveMediumWidth) {

{xen:helper clearfix, '.nodeList'}

.nodeList .node.level_2 {float: left; width: 50%;}

.nodeList .node.level_2:nth-child(odd) {
clear: left;
}

.nodeList > li .nodeLastPost {
position: static;
width: auto;
padding-right: 20px;
margin-top: 0;
}

.nodeList > li .nodeText {margin-right: 26px;}
.nodeList > li .nodeControls {right: 8px;}

}
Is it ok? Sorry, not sure if I understand right. How to wrap?
 
Last edited:
It is wrapped, see here:

Code:
@media (min-width: @maxResponsiveMediumWidth) {

Make sure that under Style Properties > @maxResponsiveMediumWidth, that has a value (around 610px).
 
It is exactly 610px. And that is the code I've put into extra.css:
Code:
/* START - NON-CATEGORY NODES SIDE BY SIDE */
.nodeList .node.level_2 {float: left; width: 50%;}

.nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}

.nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }
   
{xen:helper clearfix, '.nodeList'}

    .nodeList > li .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }
 
    .nodeList > li .nodeText {margin-right: 26px;}
    .nodeList > li .nodeControls {right: 8px;}

/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */   
@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}
 
    .nodeList .node.level_2 {float: left; width: 50%;}
 
    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }
 
    .nodeList > li .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }
 
    .nodeList > li .nodeText {margin-right: 26px;}
    .nodeList > li .nodeControls {right: 8px;}
 
}


    .nodeList > li:last-child:nth-child(odd) {width: 100%;}
    .nodeList > li:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }

/* END - NON-CATEGORY NODES SIDE BY SIDE */
 
Ah. Notice that your media curly brace does not close. If you notice in the tutorial, try grabbing that exactly or adding a curly brace after that code and it should start working.
 
Hm, now I've added curly brace => } at the end of this code and got this:
Code:
/* START - NON-CATEGORY NODES SIDE BY SIDE */
.nodeList .node.level_2 {float: left; width: 50%;}

.nodeList .node.forum, .nodeList .node.link, .nodeList .node.page {float: left; width: 50%;}

.nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }
   
{xen:helper clearfix, '.nodeList'}

    .nodeList > li .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }
 
    .nodeList > li .nodeText {margin-right: 26px;}
    .nodeList > li .nodeControls {right: 8px;}

/* METHOD 2: SIDE BY SIDE FORUM, PAGE, LINK NODES */   
@media (min-width: @maxResponsiveMediumWidth) {

    {xen:helper clearfix, '.nodeList'}
 
    .nodeList .node.level_2 {float: left; width: 50%;}
 
    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }
 
    .nodeList > li .nodeLastPost {
        position: static;
        width: auto;
        padding-right: 20px;
        margin-top: 0;
    }
 
    .nodeList > li .nodeText {margin-right: 26px;}
    .nodeList > li .nodeControls {right: 8px;}
 
}

    .nodeList > li:last-child:nth-child(odd) {width: 100%;}
    .nodeList > li:last-child:nth-child(odd) .nodeText {
        margin-right: 270px;
    }
}

/* END - NON-CATEGORY NODES SIDE BY SIDE */

But still not fixed!
 
Your code is still wrong, now you have an extra curly brace. Just copy the code from the tutorial :)
 
Anyway, is it possible to have it default view on mobile and columns style only on desktop computer?
 
Hello,
Can one of you fellas help me out with this? gailsault.com/ourcommunity style two column.


I have no idea what I'm doing wrong. I've pasted everything correctly I think. :)

Thank you.

Gabby
 
Very nice indeedy and thanks for sharing :).

One question, how could I convert it to 3 nodes side-by-side (using Method 2)? I've changed the % to 33% but it just leaves a gap where the 3rd column should be.
 
I made just a few minor changes to the code, nothing that should change functionality, but I added an option to show the last odd node like the default XenForo node, just putting it back on one line essentially.

Very nice indeedy and thanks for sharing :).

One question, how could I convert it to 3 nodes side-by-side (using Method 2)? I've changed the % to 33% but it just leaves a gap where the 3rd column should be.

Well this is a bit tricker, but can be done.

Replace this:

Code:
    .nodeList .node.level_2 {float: left; width: 50%;}

    .nodeList .node.level_2:nth-child(odd) {
        clear: left;
    }

With this:

Code:
    .nodeList .node.level_2 {float: left; width: 33.33%;}

    .nodeList .node.level_2:nth-child(3n - 2) {
        clear: left;
    }

The above code only gets you started, it is recommended that you perhaps drop down to 2 nodes and back to 1 the thinner the device width.
 
Last edited:
Thanks for that, works like a charm. And to be honest I don't really know what you're talking about in your last sentence :o.
 
Top Bottom