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

How to put extra column in quick_navigation_menu template?

Discussion in 'Styling and Customization Questions' started by Barbossa, Apr 27, 2012.

  1. Barbossa

    Barbossa Active Member

    How to put another column between General Links & Forum Lists? I want to put some extra links there.

    Untitled-1.gif
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    Here's what to do.

    1) Find template quick_navigation_menu
    2) You will find that the template contains two divs that start like this:
    Code:
    <div class="jumpMenuColumn">
    3) You will want to insert a new one in between the two existing ones. Here's one I've made for you:
    Code:
    <xen:title>{xen:phrase quick_navigation_menu}</xen:title>
     
    <xen:require css="quick_navigation_menu.css" />
     
    <div class="section">
    <div id="jumpMenu">
    <div class="jumpMenuColumn">
    <h3 class="primaryContent">{xen:phrase general_links}</h3>
    <div class="secondaryContent">
    <div class="blockLinksList">
    <ul>
    <xen:if is="{$homeLink}"><li><a href="{$homeLink}">{xen:phrase home}</a></li></xen:if>
    <li><a href="{xen:link index}">{xen:phrase forums}</a></li>
    <li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
    </ul>
    <ul>
    <xen:if is="{$visitor.user_id}">
    <li><a href="{xen:link members, $visitor}">{xen:phrase your_profile}</a></li>
    <li><a href="{xen:link account}">{xen:phrase your_account}</a></li>
    <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
    <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
    <xen:else />
    <li><a href="{xen:link login}">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase log_in_or_sign_up}, {xen:phrase log_in}}</a></li>
    </xen:if>
    </ul>
    <ul>
    <li><a href="{xen:link help}">{xen:phrase help}</a></li>
    </ul>
    </div>
    </div>
    </div>
    <div class="jumpMenuColumn">
    <h3 class="primaryContent">New Column Heading</h3>
    <div class="secondaryContent nodeList">
    <ol class="blockLinksList">
    <li><a href=http://www.valvetime.net>ValveTime.net</a></li>
    <li><a href=http://www.valvetime.net>ValveTime.net</a></li>
    <li><a href=http://www.valvetime.net>ValveTime.net</a></li>
    </ol>
    </div>
    </div>
    <div class="jumpMenuColumn">
    <h3 class="primaryContent">{xen:phrase forum_list}</h3>
    <div class="secondaryContent nodeList">
    <ol class="blockLinksList">
    <xen:foreach loop="$nodes" value="$node">
    <li class="d{$node.depth} {xen:if "{$selected} == 'node-{$node.node_id}'", 'OverlayScroller'}">
    <a href="{xen:link {$nodeTypes.{$node.node_type_id}.public_route_prefix}, $node}"
    class="{xen:if '{$node.node_type_id} == "Category"', 'OverlayCloser'} {xen:if "{$selected} == 'node-{$node.node_id}'", 'selected'}">
    <span class="_depth{$node.depth} depthPad">{$node.title}</span>
    </a>
    </li>
    </xen:foreach>
    </ol>
    </div>
    </div>
    </div>
    <div class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">{xen:phrase close}</a></div>
    </div>
    4) These divs are currently fixed at 325px wide so unfortunately if you add a 3rd, it doesn't look right and drops one of the divs down below the others. So to squeeze another one in. The two divs together takes up 650px. If we divide that by 3 we get around 216px. So we now need to add some .CSS
    5) Add the following to EXTRA.css OR amend the relevant value in quick_navigation_menu.css (if you amend the current value there is no need to add !important.)
    Code:
    .xenOverlay #jumpMenu .jumpMenuColumn
    {
    width: 217px!important;
    }
    Good luck :)
     
    Barbossa likes this.
  3. Chris D

    Chris D XenForo Developer Staff Member

    overlay.PNG

    This is how it should look based on my code above.
     
    Barbossa likes this.
  4. Bugfix

    Bugfix Member

    Is there a way of changing this with an addon? I want to avoid changing xf-original-files!
    Unfortunately, I do not find any template hooks within quick_navigation_menu...
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Template editing isn't a big issue as they can be merged if the master template changes in a later release.

    Otherwise create a template modification.
     
    Bugfix likes this.
  6. Bugfix

    Bugfix Member

    template modification. damn. you live and learn.... :cool:
     

Share This Page