• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Side By Side Nodes

Side By Side Nodes

Mike Creuzer

Well-known member
#1
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...
 

BassMan

Well-known member
#6
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:

Mike Creuzer

Well-known member
#7
It is wrapped, see here:

Code:
@media (min-width: @maxResponsiveMediumWidth) {
Make sure that under Style Properties > @maxResponsiveMediumWidth, that has a value (around 610px).
 

BassMan

Well-known member
#8
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 */
 

Mike Creuzer

Well-known member
#11
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.
 

BassMan

Well-known member
#12
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!
 

Gabby

Well-known member
#17
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
 

CFodder

Well-known member
#18
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.
 

Mike Creuzer

Well-known member
#19
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: