Resource icon

Moving Visitor Tabs to the Moderator Bar

Overview Reviews (7) Discussion
Andrej said:
@Zackerykr Your theme has already the visitor tabs in the moderator bar.

View attachment 49013

I am not sure what you are trying to do.
Click to expand...
How did you get the player picture on the userbar? Like this:

42277bd0a824c83b961881edd367b3e8.png


%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2013-06-16-%D0%B2-8-38-13-png.49013





Mine just shows the name like this:

9dd27feae1d3c9f320bc83ed925ce68a.png
 
For the current version of XenForo -- 1.4.3. Some steps may be the same as the original resource, but I'll repost everything just in case.

Template: moderator_bar
Replace the following:
Code: 
<xen:hook name="moderator_bar" />

With:
Code: 
<xen:if is="{$visitor.user_id}">
  <xen:include template="navigation_visitor_tab" />
</xen:if>

<xen:hook name="moderator_bar" />


Template: navigation_visitor_tab
Comment out the following:

Code: 
  <xen:if is="{$tabs.account.selected}">
   <li class="navTab selected">
     <div class="tabLinks">
       <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>
         <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
         <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
       </xen:hook>
       </ul>
     </div>
   </li>
   </xen:if>

Like so:
Code: 
<xen:comment>
  <xen:if is="{$tabs.account.selected}">
   <li class="navTab selected">
     <div class="tabLinks">
       <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>
         <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
         <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
       </xen:hook>
       </ul>
     </div>
   </li>
   </xen:if>
<xen:comment>


Template: navigation
Replace the following:
Code: 
<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>

With:
Code: 
  <xen:if is="{$tabs.account.selected}">
   <li class="navTab selected">
     <div class="tabLinks">
       <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>
         <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if>
         <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
       </xen:hook>
       </ul>
     </div>
   </li>
   </xen:if>
  
   <xen:comment>
    <xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
   </xen:comment>


Template: PAGE_CONTAINER
Replace the following:
Code: 
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
   <xen:include template="moderator_bar" />
  <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
   <xen:include template="login_bar" />
</xen:if>

With:
Code: 
<xen:comment>
  <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
   <xen:include template="moderator_bar" />
  <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
   <xen:include template="login_bar" />
  </xen:if>
</xen:comment>

<xen:if is="{$visitor.user_id}">
   <xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
   <xen:include template="login_bar" />
</xen:if>

Template: extra.css
Paste into template and then modify to suit your needs:
Code: 
#moderatorBar .adminLink {
   float:left;
}

#moderatorBar .visitorTabs {
   float: right;
}

#moderatorBar .visitorTabs li {
   float:left;
}

#moderatorBar .visitorTabs .navLink {
   line-height: 16px;
}

#moderatorBar .visitorTabs .navLink:hover {}

#moderatorBar .visitorTabs .navLink .itemCount {
   line-height: 16px;
}

#moderatorBar .visitorTabs .navLink .itemCount:hover {}

EDIT: Oh, and based off of @Scarface's post, here's a bit of CSS you can add to extra.css to remove the large gap in the subnav:

Code: 
/* Brings the content up due to lack of subnav in conversation templates */
#content.conversation_list,
#content.conversation_list_yours,
#content.conversation_list_starred {
   position: relative;
   margin-top: -47px;
   z-index: 5;
}

Note that I used a negative margin instead of top: -47px because we need the footer to come up with the rest of the content (otherwise there will be a gap down there instead). The z-index is to make sure our content can be interacted with. Change the margin to suit your needs, as my theme is fairly custom and requires a larger number.
 
Last edited:
I have followed all of your steps but I have a problem cause I don't have "alert" and "inbox" on the right side on the moderator bar.
However, when I go to alert or inbox just near my avatar "on the moderator bar", messages appears but no icon or word.
Please find few print screens with the issue.

The first one is on the homepage and the second one under a sub-forum.

In fact, Inbox and Alerts are hided to resume my problem...

Current version is 1.43, any idea?
 

Attachments

  • Capture d’écran 2015-01-28 à 13.51.07.webp
    Capture d’écran 2015-01-28 à 13.51.07.webp
    2.4 KB · Views: 15
  • Capture d’écran 2015-01-28 à 13.47.29.webp
    Capture d’écran 2015-01-28 à 13.47.29.webp
    3.3 KB · Views: 19
Is there a particular way I can stop this modification removing the sub-menus for Inbox and Profile Page, etc?
 
Tecca said:
For the current version of XenForo -- 1.4.3. Some steps may be the same as the original resource, but I'll repost everything just in case.
Click to expand...

I've fixed it using your edits, however I also added:

Code: 
/* Brings the content up due to lack of subnav in conversation templates */
#content.conversation_view,
#content.conversation_view_yours,
#content.conversation_view_starred {
   position: relative;
   margin-top: -14px;
   z-index: 5;
}
 
Tecca said:
Rich (BB code): 
<xen:comment> <xen:if is="{$tabs.account.selected}"> <li class="navTab selected"> <div class="tabLinks"> <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> <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li></xen:if> <li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li> </xen:hook> </ul> </div> </li> </xen:if> </xen:comment>
Click to expand...
Missing / here : <xen:comment>

-> </xen:comment>
 
Fix for conversations:
  • In navigation_visitor_tab template, add red code:
Rich (BB code): 
<xen:comment>
    <xen:if is="{$tabs.inbox.selected}">
    <li class="navTab selected">
        <div class="tabLinks">
            <ul class="secondaryContent blockLinksList">
                <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                <li><a href="{xen:link conversations/starred}">{xen:phrase starred_conversations}</a></li>
                <li><a href="{xen:link conversations/yours}">{xen:phrase conversations_you_started}</a></li>
            </ul>
        </div>
    </li>
    </xen:if>
    </xen:comment>
  • In navigation template, find:
Code: 
<!-- no selection -->
        <xen:if is="!{$selectedTab}">
            <li class="navTab selected"><div class="tabLinks"></div></li>
        </xen:if>
       
    </ul>
  • Add after:
Code: 
<xen:if is="{$tabs.inbox.selected}">
    <li class="navTab selected">
        <div class="tabLinks">
            <ul class="secondaryContent blockLinksList">
                <li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
                <li><a href="{xen:link conversations/starred}">{xen:phrase starred_conversations}</a></li>
                <li><a href="{xen:link conversations/yours}">{xen:phrase conversations_you_started}</a></li>
            </ul>
        </div>
    </li>
    </xen:if>
 
Suggestion, add this:
Code: 
#moderatorBar .visitorTabs .navLink .itemCount.Zero, #moderatorBar .visitorTabs .account .navLink .itemCount {
display: none;
}
 
MagnusB said:
Is it possible to prevent the style="display:none;" to be added to the span when hovering over the menu? I tried looking it up in the javascript file, but to me that is written up with the Enigma machine, I just can't for the life of my make any sense of scripts :(

If not I am going to hide it if zero, cause it is annoying that it keeps changing the layout when hovering over it.

EDIT:
Never mind, I think I like it better when it is hidden if Zero, easy way to hide it then is by adding:
Code: 
#moderatorBar .visitorTabs .navLink .Zero {
   display: none;
}
To extra.css.
Click to expand...

Thanks :) Exactly what I need
 
Hello! Great guide.
I have 2 questions though...
How can I get this shorter admin bar instead of the whole length bar?
ibaker_idea-jpg.44856


and also how to get the subnav space filled when in the alerts page?
Capture.webp
 
Last edited:
I have a great solution and it works on xf 1.5.5

Step 1: PAGE_CONTAINER template

Find:
Code: 
<xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
    <xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
    <xen:include template="login_bar" />
</xen:if>
Replace with:
Code: 
<xen:comment>
  <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
   <xen:include template="moderator_bar" />
  <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
   <xen:include template="login_bar" />
  </xen:if>
</xen:comment>

<xen:if is="{$visitor.user_id}">
   <xen:include template="moderator_bar" />
<xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
   <xen:include template="login_bar" />
</xen:if>

Step2: in moderator_bar template

Find:
Code: 
<xen:hook name="moderator_bar" />

Replace with:
Code: 
<xen:if is="{$visitor.user_id}">
<xen:include template="navigation_visitor_tab" />
</xen:if>
<xen:hook name="moderator_bar" />

Step 3: in EXTRA.css add the following
Code: 
#moderatorBar .adminLink { float:left !important; }
#moderatorBar .visitorTabs { float: right; }
#moderatorBar .visitorTabs li { float: left; }
#moderatorBar .visitorTabs .navLink { line-height: 16px; }
#moderatorBar .visitorTabs .navLink:hover { background: @primaryDark !important; border-radius: 2px !important; border: none !important; }
#moderatorBar .visitorTabs .navLink .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen { background: @primaryDark !important; }
#moderatorBar .visitorTabs .navLink:hover .Popup .PopupControl.PopupOpen, .Popup.PopupContainerControl.PopupOpen { text-shadow: none !important; }
#moderatorBar .visitorTabs .navLink .Popup .PopupControl:hover, .Popup.PopupContainerControl:hover { background: none !important; }
#moderatorBar .visitorTabs .navLink .itemCount { line-height: 16px; }
#moderatorBar .visitorTabs .navLink .itemCount:hover { }
#moderatorBar .visitorTabs .navLink .itemCount.Zero {display: none;}
#moderatorBar .visitorTabs li .blockLinksList {display: none;}
.navTabs .visitorTabs .navLink
{display: none;}
#moderatorBar .visitorTabs .navLink .itemCount
{background: #e03030;
padding-left: 6px;
padding-right: 6px;
text-align: center;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
text-shadow: none;}

This gets rid of the annoying subnav space! Also the buttons are proper without going through all the css ********.
It does display the item counts like normal, no issues thatI am aware of.
If you want the item counts like the moderator count, just exclude this code in the extra.css
Code: 
#moderatorBar .visitorTabs .navLink .itemCount
{background: #e03030;
padding-left: 6px;
padding-right: 6px;
text-align: center;
font-weight: bold;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
text-shadow: none;}

The only issue that I know of but cannot figure out is when their is an alert count, I get one over the user tab also. kinda annoying having 2 alerts.
so if anybody can figure this out from here, please feel free to post it here!

24zvtbl.png

2qutbgp.png

2nm0iyr.png
 
Suggestion:

Replace:
Code: 
.navTabs .visitorTabs .navLink
{display: none;}
By
Code: 
.navTabs .visitorTabs
{display: none;}

Thix fix the responsive mode.
 
You must log in or register to reply here.

Similar threads

tommy2014
  • Question Question
XF 1.5 Moving Visitor Tab To Block Link List (below navigation)
Replies
0
Views
652
tommy2014
tommy2014
Diana
  • Question Question
moving visitor tabs to navbar in page node
Replies
7
Views
1K
Diana
Diana
ibaker
  • Question Question
Moving visitor_tab to header
Replies
10
Views
2K
Betclever
Betclever
J
  • Question Question
Adding To The Moderator Bar?
Replies
14
Views
3K
Marc
Marc
Top Bottom