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

Managing Nav Tabs?

Discussion in 'Styling and Customization Questions' started by Wing, Apr 16, 2013.

  1. Wing

    Wing Active Member

    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.
     
  2. EQnoble

    EQnoble Well-Known Member

    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.
     
    Shelley and Jake Bunce like this.
  3. Wing

    Wing Active Member


    Looks just like something I would need :)
    What about managing the current stock Xenforo tabs? And reordering?
     
  4. EQnoble

    EQnoble Well-Known Member

    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
     
    Lycaon and Jake Bunce like this.
  5. Morgain

    Morgain Well-Known Member

    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.
     
  6. EQnoble

    EQnoble Well-Known Member

    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.
     
    Morgain likes this.
  7. Morgain

    Morgain Well-Known Member

    EQ nice one. I also keep an rtf document copy of all templates I alter on file on my computer.
     
  8. Lycaon

    Lycaon Well-Known Member

    If you click save all changes and not save and exit, you can also Ctrl+Z undo changes.
     
    otto and Morgain like this.
  9. EQnoble

    EQnoble Well-Known Member

    I would not use rtf for reasons I wont even get into but what I would suggest is getting notepad++ and saving your template backups as template_name.html and you will get all of the highlighting as well.
     
    Lycaon and Morgain like this.
  10. Wing

    Wing Active Member

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

    Wing Active Member

    What about reordering tabs from mods? They seem to be custom hooked up there... and I really need to de clutter my nav bar :( www.optiksgaming.com
     
  12. Marcel

    Marcel Active Member

    I think you then need to change the execution order of the listener which hooks into the tabs
     
    Nick Veneris likes this.
  13. Marcel

    Marcel Active Member

    Aaaand I googled how to do this, and end up answering my own question with my own answer from a year ago! :D
     
  14. Sutekh

    Sutekh Member

    Is there an easier way to move current tabs? like I want to move the about us page to the end of the navigation bar
     

Share This Page