SubCategories in Columns

[CyberAP]

1. Open template: node_forum_level_2
   Find

   <xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="Popup subForumsPopup">
            <a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $forum.childCount}</a>
    
            <div class="Menu JsOnly subForumsMenu">
                <div class="primaryContent menuHeader">
                    <h3>{$forum.title}</h3>
                    <div class="muted">{xen:phrase sub_forums}</div>
                </div>
                <ol class="secondaryContent blockLinksList">
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>

2. Replace with:
   

   <xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
            <div class="subForumsMenu">
                <ol class="secondaryContent blockLinksList">
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>

3. Open template node_category_level_2
   Find there:
   
   

   <xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="Popup subForumsPopup">
            <a href="{xen:link categories, $category}" rel="Menu" class="concealed" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $category.childCount}</a>
    
            <div class="Menu JsOnly subForumsMenu">
                <div class="primaryContent menuHeader">
                    <h3>{$category.title}</h3>
                    <div class="muted">{xen:phrase sub_forums}</div>
                </div>
                <ol class="secondaryContent blockLinksList">
                    <xen:foreach loop="$renderedChildren" value="$child">
                        {xen:raw $child}
                    </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>

4. Replace with:
   
   

   <xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
    
            <div class="subForumsMenu">
                <ol class="secondaryContent blockLinksList">
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
                </ol>
            </div>
        </div>
    </xen:if>

5. Open template node_forum_level_n
   Replace all content with:
   

   <li class="node forum level-n node_{$forum.node_id}">
        <span class="dot"><span></span></span>
        <div {xen:if $forum.hasNew, 'class="unread"'}>
            <h4 class="nodeTitle"><a href="{xen:link forums, $forum}" class="menuRow">{$forum.title}</a></h4>
        </div>
        <xen:if is="{$renderedChildren}">
            <ol>
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
            </ol>
        </xen:if>
    </li>

6. Open node_category_level_n
   Replace all content with:
   

   <li class="node category level-n node_{$category.node_id}">
        <span class="dot"><span></span></span>
        <div {xen:if $category.hasNew, 'class="unread"'}>
            <h4 class="nodeTitle"><a href="{xen:link categories, $category}" class="menuRow">{$category.title}</a></h4>
        </div>
        <xen:if is="{$renderedChildren}">
            <ol>
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
            </ol>
        </xen:if>
    </li>

7. Open template EXTRA.css.
   Add there:
   
   

   .subForumsPopup,
   .subForumsPopup .blockLinksList,
   .subForumsPopup ol,
   .subForumsMenu ol li ol li
   {
       width: 100%;
   }
   
   .subForumsPopup .blockLinksList
   {
       float: left;
   }
   
   .subForumsPopup .dot
   {
       position: relative;
       float: left; /* firefox fix */
   }
   .subForumsPopup .dot span
   {
       height: 0px;
       left: 6px;
       top: 10px !important;
       position: absolute;
       width: 0px;
       border: 2px solid @primaryLight;
       border-radius: 6px;
   }
   
   .subForumsMenu ol li
   {
       width: 25%;
       float: left;
   }
   
   .subForumsMenu .node .nodeTitle a
   {
       padding-left: 16px;
   }
   
   .subForumsMenu .node .node.level-n
   {
       display: none;
   }

Screenshot:



 

[Peggy]

Aw c'mon CAP. This is too much of a major modification to not be able to see it before we use it.
Screenie puleeaase?

 

[Allan]

Screen please

 

[DieselMinded]

is this still a pop up or will it show the sub forums on forum home ?

 

[giorgino]

Screeeeeennnnnn

 

[CyberAP]

Alrighty, look at first post.

 

[DieselMinded]

how about some mini new/old posts icons

 

[CyberAP]

I don't really know how to determine if the node is read/unread. But I know how to insert a small dot.

 

[yavuz]

I've tried it with flexile, metalic and the feault theme but can't get it properly working.

 

[CyberAP]

That's strange. Unfortunately I can't help you at this moment but will try to on the next week.

 

[CFodder]

Can't seem to get the sub-forums to display in 2 columns, suspect it may be a template I've edited but I've reverted all the ones I thought it might be. Any help would be appreciated.



Cheers.

 

[Jaxel]

How is this any different from this?
http://xenforo.com/community/threads/tutorial-sub-forum-grid-listing.10978/

Heh... http://www.8wayrun.com/forum/

 

[CyberAP]

2 columns.

 

[Markos]

Great! I hope to see a tutorial for have forums (with subforums associated) in columns.

 

[Jaxel]

2 columns.

And mine isn't?

.subForumsGrid .node { width: 20%; float: left; }

20% = 5 columns... change it to 25% for 4, 33% for 3, or even 50% for 2 columns.

 

[CyberAP]

Instructions have been updated.