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

XF 1.1 2 Column Category's?

Jeremy

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

Jeremy

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

mistypants

Well-known member
#11
The fastest way would be:
Code:
.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:
Screenshot (123).png
 

Iversia

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

Code:
/* 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;
    }
}
 
#13
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.

Code:
/* 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!!!!
 
#14
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.

Code:
/* 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 :D