Custom Sub-Forum Menu's

[Russ]

As requested here

Custom Sub-Forum Menu's​

First off if you've made any changes to node_forum_level_2 please back it up now ​

​

All edits are in: node_forum_level_2

We're going to hide the normal sub-forum menu right now
1.) 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>

Replace with:

            <xen:if is="{$forum.node_id} != '2'">
                <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>
            </xen:if>

2 being the node-id you wish to hide the normal sub-forum menu in.

Then add above the previous edit:

                <xen:if is="{$forum.node_id} == '2'">
                    <div class="Popup subForumsPopup">
                        <a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">B:</span> 2</a>

                        <div class="Menu JsOnly subForumsMenu">
                            <div class="primaryContent menuHeader">
                                <h3>B: Section</h3>
                                <div class="muted">{xen:phrase sub_forums}</div>
                            </div>
                            <ol class="secondaryContent blockLinksList">
<li><h4 class="nodeTitle"><a class="menuRow" href="index.php?forums/test/">Class 1</a></h4></li>
<li><h4 class="nodeTitle"><a class="menuRow" href="index.php?forums/test/">Class 2</a></h4></li>
                            </ol>
                        </div>
                    </div>
                </xen:if>

This will basically create a custom drop down menu for Node 2, and then exclude the normal drop down menu for sub-forums on Node 2 as well. This will allow you to choose custom sub-forum options in the forum category.

Example:

 

[Russ]

How to hide the normal sub-forum dropdown in multiple nodes?

Find:

            <xen:if is="{$forum.node_id} != '2'">

Replace with:

            <xen:if is="{$forum.node_id} != '2' AND {$forum.node_id} != '3'">

You can add more nodes using: AND {$forum.node_id} != '3' as necessary.

How to add more than one custom menu?


Simply duplicate the 3rd set of code in the first page

 

[JVCode]

Wow, that's damn near perfect to what I had in mind!

I am eternally grateful for this help! it has helped me out alot!

 

[Russ]

FIXED STYLE ADJUSTMENT FOR NUMEROUS POP UPS

Move all of your custom menus above this snippit:

        <div class="nodeLastPost secondaryContent">
            <xen:if is="{$forum.lastPost.date}">

That will include it in the node but start it on a new line, then add this into your extra.css:

.node_2 .subForumsPopup {
padding: 5px;
width: 20%;
text-align: right;
}
.subForumPopupFix {
padding-left: 5px;
}

Fix the node_# to the appropriate one you need

Final step wrap all of your custom menus in this:

<div class="subForumPopupFix">
menus here
</div>

 

[Russ]

It's getting there, all we need now is to align them
View attachment 15508

Did you wrap all of the menus in that div I gave you?

 

[Russ]

It's getting there, all we need now is to align them
View attachment 15508

Hold on, I got a fix give me just a bit I know what I did wrong, I need more sleep

 

[JVCode]

I know I'm being a right pain in the grass, but can I get the number of sub-forums removed for this part? so it's just the sub-forum name without how many forums are listed within?

 

[Russ]

I know I'm being a right pain in the grass, but can I get the number of sub-forums removed for this part? so it's just the sub-forum name without how many forums are listed within?

Not at all, for that just remove the 2 and the : before the span in the line

                        <a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">B:</span> 2</a

getting the other code ready

 

[Russ]

It's getting there, all we need now is to align them
View attachment 15508

Ok updated my post:

in extra.css update the .node_2 .subForumsPopup {
with the width and text-align, tell me how that goes, you can adjust the width depending on the size of everything.

.node_2 .subForumsPopup {
padding: 5px;
width: 20%;
 text-align: right;
}

 

[Russ]

They don't seem to like being aligned on the left hand side, otherwise it's perfect.

View attachment 15511

can you pm me a link to your board?

 

[Russ]

The

<div class="subForumPopupFix"> menus here </div>

Almost looks like it's only placed around the first 5, positive the div is around ALL the menu's? Reason I ask is there's no padding on the leftside on the bottom columns

PM me a copy of your node_forum_2, I can take a look.

 

[Russ]

Yep, just checked and I have the following wrapped around each menu <div class="subForumPopupFix"> my custom menu </div>

Example:

My bad... I meant wrap one single code around all the menus, I'm not sure if that would effect it though... HMM

 

[JVCode]

Just wrapped the whole code in those tags and the outcome is exactly the same as the image posted above.

 

[Russ]

Just wrapped the whole code in those tags and the outcome is exactly the same as the image posted above.

PM'd you, only in chrome it's doing it:
Place this above all the custom menus

<div style="clear:both;"></div>

 

[JVCode]

Have this working beautifully now just how I envisioned it, and has saved me shed lots of vertical scrolling space on the home page. Many thanks Russ.