XF 1.1 2 Column Category's?

[Slidefuse]

Hello,
I have one more small question...
I really like this look, that this site did: (Example: http://s21.postimg.org/s3aoirqtz/chrome_2013_10_26_16_43_04_60.png )
But I can't seem to find the real answer ANY ware... So I have came here to ask for help.

All help is welcome,
Thanks for your time.

 

[Jeremy]

What site is that?

 

[Autonamus]

What site is that?

http://www.skial.com/

 

[Jeremy]

They have modified their forum display to work with tables and not lists as the default software does. If you ask the owner, they may be able to share it.

 

[Slidefuse]

They have modified their forum display to work with tables and not lists as the default software does. If you ask the owner, they may be able to share it.

The owner is not the one to "share" stuff.
Any other ideas?

 

[Autonamus]

The owner is not the one to "share" stuff.
Any other ideas?

A lot of Inspect element and trial and error?

 

[Jeremy]

Its a matter of rewriting the node_* templates to utilize tables & rows. I don't have the necessary edits off hand tho.

 

[Slidefuse]

Its a matter of rewriting the node_* templates to utilize tables & rows. I don't have the necessary edits off hand tho.

Me, and coding don't go well together... lol
I would really like some help, but I don't think it will be easy to get. :\

 

[Matthew Hawley]

Month's ago I asked him and he said

Why should I?

LOL.

 

[Slidefuse]

Month's ago I asked him and he said



LOL.

That's my point, lol.
That's why I have come here for help

 

[mistypants]

The fastest way would be:

.sectionMain { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; }

However, this doesn't respect the category divs. It's an ugly & imperfect solution, though it may work out based on how many nodes you have (although, even thinking about that, responsive might create problems which would need to be addressed...). If you really want it to be like the site you've linked, you're going to have to do a bit of coding.

Quick screenshot of the code I posted:

 

[Iversia]

This will sort your categories into two, three, or four columns depending on the width of your browser window. Similar to how the original site does it, only without the JavaScript creating tables. CSS media queries, babes.

I based the max/min widths on what I thought looked good with the default XenForo style, so you'll likely have to adjust sizes based upon your style.

/* Two columns */
@media (min-width: 1280px) and (max-width: 1700px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 50%;}
    .nodeList .category.level_1:nth-child(odd) {
        clear: left;
    }
}

/* Three columns */
@media (min-width: 1700px) and (max-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 33%;}
    .nodeList .category.level_1:nth-child(4n) {
        clear: left;
    }
}

/* Four columns */
@media (min-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 25%;}
    .nodeList .category.level_1:nth-child(5n) {
        clear: left;
    }
}

 

[vfustar]

This will sort your categories into two, three, or four columns depending on the width of your browser window. Similar to how the original site does it, only without the JavaScript creating tables. CSS media queries, babes.

I based the max/min widths on what I thought looked good with the default XenForo style, so you'll likely have to adjust sizes based upon your style.

/* Two columns */
@media (min-width: 1280px) and (max-width: 1700px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 50%;}
    .nodeList .category.level_1:nth-child(odd) {
        clear: left;
    }
}

/* Three columns */
@media (min-width: 1700px) and (max-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 33%;}
    .nodeList .category.level_1:nth-child(4n) {
        clear: left;
    }
}

/* Four columns */
@media (min-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 25%;}
    .nodeList .category.level_1:nth-child(5n) {
        clear: left;
    }
}

Perfect!!!!

 

[Slidefuse]

This will sort your categories into two, three, or four columns depending on the width of your browser window. Similar to how the original site does it, only without the JavaScript creating tables. CSS media queries, babes.

I based the max/min widths on what I thought looked good with the default XenForo style, so you'll likely have to adjust sizes based upon your style.

/* Two columns */
@media (min-width: 1280px) and (max-width: 1700px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 50%;}
    .nodeList .category.level_1:nth-child(odd) {
        clear: left;
    }
}

/* Three columns */
@media (min-width: 1700px) and (max-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 33%;}
    .nodeList .category.level_1:nth-child(4n) {
        clear: left;
    }
}

/* Four columns */
@media (min-width: 2200px) {
    {xen:helper clearfix, '.nodeList'}
    .nodeList .category.level_1 {float: left; width: 25%;}
    .nodeList .category.level_1:nth-child(5n) {
        clear: left;
    }
}

Thank you so much!
Lol