Side By Side Nodes [Deleted]

Dad. · Oct 16, 2013

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 · Oct 16, 2013

Sorry, should I put this code to EXTRA.CSS?

EDIT: yes

Dad. · Oct 16, 2013

Yes, added that to the tutorial, should have clarified.

Thanks!

BassMan · Oct 16, 2013

Btw, but on mobile view that method 2 doesn't look good.

Dad. · Oct 16, 2013

mladiucitelj said:
Btw, but on mobile view that method 2 doesn't look good.

Make sure you are wrapping the code in the media tag. Nothing in this tutorial should have any impact on mobile views under 610px (by default).

BassMan · Oct 16, 2013

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?

Dad. · Oct 16, 2013

It is wrapped, see here:

Code:

@media (min-width: @maxResponsiveMediumWidth) {

Make sure that under Style Properties > @maxResponsiveMediumWidth, that has a value (around 610px).

BassMan · Oct 16, 2013

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 */

Dad. · Oct 16, 2013

Do you have a link or screen?

BassMan · Oct 16, 2013

Check convo. And take a look over mobile phone.

Dad. · Oct 16, 2013

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 · Oct 16, 2013

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!

Dad. · Oct 16, 2013

Your code is still wrong, now you have an extra curly brace. Just copy the code from the tutorial

BassMan · Oct 16, 2013

I did. All codes are copied from tutorial. Checked twice!

BassMan · Oct 16, 2013

Anyway, is it possible to have it default view on mobile and columns style only on desktop computer?

DRE · Oct 17, 2013

You're amazing.

Gabby · Oct 17, 2013

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 · Oct 17, 2013

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.

Dad. · Oct 17, 2013

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.

CFodder said:
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.

CFodder · Oct 18, 2013

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

.

Side By Side Nodes [Deleted]

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Similar threads

We value your privacy