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

Moving visitor_tab to header

Discussion in 'Styling and Customization Questions' started by ibaker, Apr 19, 2013.

  1. ibaker

    ibaker Well-Known Member

    The main menu is prime real estate and with many great addons being created for XF it has become more and more apparent to me that many may need to move the Visitor Tabs of Username, Inbox, Alerts and Log Out off the main menu. There is a how to guide of achieving this putting them into the Moderator bar but to the normal user this also takes up extra vertical space. Also, to me a user should login and logout from the same spot on my site.

    Thanks to Forsaken for guidance in his thread on how to move them to the Moderator Bar HERE
    To move just the Logout and make it the same as the Login, follow the steps HERE

    So the following is how I moved them all to the header making them look the same as the Login/Register tab. I am putting it here as I believe that it may not be perfect and one of the great CSS/Developers here may be able to offer assistance in improving it further...hope it helps someone.

    This is what it looks like on my site:

    Step 1: navigation_visitor_tab template
    Right after:
    <xen:edithint template="navigation.css" />
    <div class="navTabs">
    AND at the very end of the template also add:
    Next, find 2 instances of:
    <span class="arrow"></span> 

    Also in the navigation_visitor_tab template, find this block of code and remove it BUT save it in a text editor like Notepad as the same code will need to be placed in the navigation template (see Step 2)
        <xen:if is="{$tabs.account.selected}">
        <li class="navTab selected PopupClosed">
            <div class="tabLinks">
                <div class="primaryContent menuHeader">
                    <div class="muted">{xen:phrase quick_links}</div>
                <ul class="secondaryContent blockLinksList">
                <xen:hook name="navigation_tabs_account">
                    <li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li>
                    <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                    <li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li>
                    <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
    Step 2: navigation template
    Find this code:
            <!-- no selection -->
            <xen:if is="!{$selectedTab}">
                <li class="navTab selected"><div class="tabLinks"></div></li>
    AND insert the code you removed in Step 1 right after it

    Next, find this code:
        <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>

    Step 3: header template
    Right after:
    <xen:hook name="header">
        <div id="header">
            <xen:if is="{$visitor.user_id}">
                <div class="pageWidth">
                    <span class="user_menu">
                        <xen:include template="navigation_visitor_tab" />
    Step 4: EXTRA.css template
    Add the following css styling code:
    /* USER MENU */
        background-color: @primaryDarker;
        padding: 0 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        box-shadow: 0px 2px 5px @primaryDarker;
    Step 5: Finally, the red alert balloons need to be moved down inline with the Inbox and Alerts links. To do this open Style Properties -> Header and Navigation -> Alert Balloon and in the css box:
    Remove position: absolute; and add display: inline-block;
    Remove right: 2px;
    Remove top: -12px;

    Next, change the Text Size in the properties from 9px to 11px to make the number in the red box stand out more

    That is it

    If you use a style which adds a few pixels to the top of a menu tab, like I do as shown in the image above with the "Forums" tab highlighted, then you will need to perform these extra steps to make the Username menu tab hover the same size as the tab. To do this...
    Step 1:
    Add the following css style code to the EXTRA.css template:
        color: @primaryDark !important;
        background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
        border-radius: 3px;
    .account_selected a
        color: @primaryDark !important;
        text-shadow: 1px 1px 2px white;
    Step 2:
    In the navigation_visitor_tab template find:
    {xen:if $tabs.account.selected, 'selected'}
    AND replace it with:
    {xen:if $tabs.account.selected, 'account_selected'}
    Hope someone else finds this useful and please, if there is a better, more efficient way of doing this, I would be grateful if you could let me know
    Shelley and erich37 like this.
  2. erich37

    erich37 Well-Known Member

    looks great, especially as we also have the "Log in or Sign up" button in the same area.........

    .... and it can also be made better visible to the user if you change the colors a bit. So the colors for the "Account/Inbox/Alerts" are not bound to the color-scheme of the Navbar.

    top idea (y)
    I even think this would make much sense to have in XF as per default..... :) especially when you have a fixed-width-style you need more space in the Navbar for the Resources-Tabs and some other custom Tabs you might want to have.

    Shelley likes this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

  4. ibaker

    ibaker Well-Known Member

    I was going to Brogan but my css knowledge is amateurish at best so rather than make a formal Resource out of it I was hoping more "guru" users could improve it first and then put it in as a Resource...I don't even know yet if it is W3 standard or whether it is the most efficient or any other standards to comply with.
    erich37 likes this.
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Don't worry about it Ian, the RM is there for everyone to use.

    If you posted it I'm sure the other members would comment and make suggestions if required.
  6. erich37

    erich37 Well-Known Member

    is anyone able to build this into an Add-on, so we can get rid of annoying template-edits ?


  7. ibaker

    ibaker Well-Known Member

    Oops, I forgot one little step...I found on my site that I ended up with little red marks next the number of PC and Alerts:

    To get rid of them, in your navigation_visitor_tab template find 2 instances of:
    <span class="arrow"></span> 

    I will update the opening post with this step
    erich37 likes this.
  8. erich37

    erich37 Well-Known Member

    yeah, would be better to have this code listed in the RM so that this idea gets more attention and does not get lost in the convolute of threads.

    Would be nice to have the "red nose" of the "Alert-balloon" pointing to the left....

  9. ibaker

    ibaker Well-Known Member

    Another oops...just found one setting that I missed mentioning when I created this. The red alert balloons need to be moved down inline with the Inbox and Alerts links. To do this open Style Properties -> Header and Navigation -> Alert Balloon and in the css box change:
    position: absolute; TO display: inline-block;
    Remove the right: 2px;
    Remove the top: -12px;

    Whilst you are there change the Text Size from 9px to 11px to make the number in the red box stand out more

    I will update the opening post with this
  10. ibaker

    ibaker Well-Known Member

  11. Betclever

    Betclever Active Member

    Hey there, I have tried on my template "Cacbon from *******" but the tabs are unusable so nothing happens when I put the mouse on the new bar...
    What's wrong?


Share This Page