1. 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?

Discussion in 'Styling and Customization Questions' started by Slidefuse, Oct 26, 2013.

  1. Slidefuse

    Slidefuse Member

  2. Jeremy

    Jeremy Well-Known Member

    What site is that?
  3. Autonamus

    Autonamus Active Member

  4. Jeremy

    Jeremy Well-Known Member

    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.
  5. Slidefuse

    Slidefuse Member

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

    Autonamus Active Member

    A lot of Inspect element and trial and error?
  7. Jeremy

    Jeremy Well-Known Member

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

    Slidefuse Member

    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. :\
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

    Month's ago I asked him and he said

  10. Slidefuse

    Slidefuse Member

    That's my point, lol.
    That's why I have come here for help :p
  11. mistypants

    mistypants Well-Known Member

    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:
    Screenshot (123).png
    vfustar likes this.
  12. Iversia

    Iversia Well-Known Member

    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;
  13. vfustar

    vfustar Member

  14. Slidefuse

    Slidefuse Member

    Thank you so much!
    Lol :D
    LInh LInh likes this.

Share This Page