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

Managing Nav Tabs?

Wing

Active member
#1
What is the best way to tackle the management of these tabs?
Is there a good mod out there to add/delete/re-order the tabs conveniently. Is there already the options in the ACP? Or am I just being lazy... and this takes custom code work to accomplish?

Thanks.
 

EQnoble

Well-known member
#2
What is the best way to tackle the management of these tabs?
Is there a good mod out there to add/delete/re-order the tabs conveniently. Is there already the options in the ACP? Or am I just being lazy... and this takes custom code work to accomplish?

Thanks.
You want... http://xenforo.com/community/resources/nodes-as-tabs.9/... it really saves a headache if you are not a coder and saves time if you are.
 

EQnoble

Well-known member
#4
Currently for that, I believe you would need to do some template editing (if there is another solution someone else can chime in here).

To change the order of navigation tabs you can simply move the blocks which create them around and realize the order that you want.

Edit Template: navigation


In the template you will notice <!--comments--> noting which block is which...for instance...

If you wanted <!--forums--> to appear at the end of the navtabs list no matter what...

you could simply copy the <!--forums--> block and paste it in after the rest of the blocks. (realistically you would be cutting and pasting)

This being the 'Forum' block...you would move this
Code:
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
           
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
               
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}" rel="nofollow">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>
to the end of the template after the <!-- extra tabs: end --> block

with forums removed from the beginning of the template you will end up having the end of your template looking like this....

Code:
        <!-- extra tabs: end -->
        <xen:if is="{$extraTabs.end}">
        <xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
            <xen:if is="{$extraTab.linksTemplate}">
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
         
                <a href="{$extraTab.href}" class="navLink">{$extraTab.title}<xen:if is="{$extraTab.counter}"><strong class="itemCount"><span class="Total">{$extraTab.counter}</span><span class="arrow"></span></strong></xen:if></a>
                <a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
             
                <div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} {$extraTabId}TabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$extraTab.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    {xen:raw $extraTab.linksTemplate}
                </div>
            </li>
            <xen:else />
                <li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
                    <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    <xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
                </li>
            </xen:if>
        </xen:foreach>
        </xen:if>
     
 
        <!-- forums -->
        <xen:if is="{$tabs.forums}">
            <li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
         
                <a href="{$tabs.forums.href}" class="navLink">{$tabs.forums.title}</a>
                <a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
             
                <div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} forumsTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.forums.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_forums">
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_forums_read}</a></li></xen:if>
                        <xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
                        <xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
                        <li><a href="{xen:link 'find-new/threads'}" rel="nofollow">{xen:phrase whats_new}</a></li>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>
 
     
        <!-- no selection -->
        <xen:if is="!{$selectedTab}">
            <li class="navTab selected"><div class="tabLinks"></div></li>
        </xen:if>
     
    </ul>
 
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
</div>
Ends up with this....
forums.png




If you only want to remove a tab and only for visual reasons you can simply select a tab with css and display none...for instance with the help tab...if you wanted to simply not show it and didn't want to mess around with templates much...you could paste this in EXTRA.css
Code:
.navTab.help {
    display: none;
}
Would end up with this now...
nohelp.png
 

Morgain

Well-known member
#5
If you are cautious about copying and pasting code as I am - don't use Cut. Copy the block into the new position first. If all is well you'll see it appear on the frontend after refresh in both positions. Then delete the old one.

I also add MOVED to the comment. Makes it easy to find.
 

EQnoble

Well-known member
#6
Or

(Ctrl+A) while active in the contents of a template....
(Ctrl+C) copy contents of said template...
(Ctrl+V) paste the contents from that template into a new document in your code editor.... (I use notepad++)

If you mess things up horribly you can just paste back in the entire template you copied in the first place...this allows you to keep it moving when you are getting it right and instantly bring it back to where you started when you mess it up.
 

Wing

Active member
#10
Thankyou for the info everyone.
I will be trying these code steps this evening, and get back to you with what success I achieve.