Resource icon

Moving Visitor Tabs to the Moderator Bar

Forsaken

Well-known member
Forsaken submitted a new resource:

Moving Visitor Tabs to the Moderator Bar (version 1.0) - Tutorial in how to add the visitor tabs to the moderator bar.

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" />
navigation_tab

Replace the following:
Code:
<xen:if is="{$tabs.account.selected}">
<li class="navTab selected PopupClosed">
<div class="tabLinks">
<div class="primaryContent menuHeader">
<h3>{$tabs.account.title}</h3>...

Read more about this resource...
 
Will this keep it at the top of the screen while scrolling ?

Like here: http://xenforo.com/community/threads/mod-admin-bar-top-left-corner.7960/
If you follow this tutorial: http://xenforo.com/community/threads/floating-navigation-bar.19295/ but replace Cezz's code with this, it'll float down the page with you.

Code:
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
($(window).scrollTop() > 1) ?
$('#moderatorBar').stop().animate({'opacity':'0.7'},400).css({'position':'fixed','top':'0px','z-index':'60', 'width': '100%'}):
$('#moderatorBar').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px', 'width': '100%'});
});
$('#moderatorBar').hover(
function(){ if ($(window).scrollTop() > 0) $(this).stop().animate({'opacity':'1'},400);},
function(){ if ($(window).scrollTop() > 0) $(this).stop().animate({'opacity':'0.7'},400);}
);
});
 </script>
 
I created a default xenforo skin and it still isn't showing alerts.

Floris userbar is able to put the links up top without CSS edits. http://xenfans.com/threads/xenfans-user-bar-login-bar-template-tweak.409/

Could that be done like that with your version too?
It isn't possible to do this without edits, as it requires you changing the conditional of PAGE_CONTAINER, and moving around code between moderator_bar, navigation and navigation_visitor_tabs; if you don't do the edits it will not work correctly and will show bugs (eg not removing the code navigation_visitor_tabs will result in the menu displaying on account pages).

Go through and check the steps again, as it should work if you follow the directions.
 
It isn't possible to do this without edits, as it requires you changing the conditional of PAGE_CONTAINER, and moving around code between moderator_bar, navigation and navigation_visitor_tabs; if you don't do the edits it will not work correctly and will show bugs (eg not removing the code navigation_visitor_tabs will result in the menu displaying on account pages).

Go through and check the steps again, as it should work if you follow the directions.
I followed them all, created two themes to try it out and it's not working on my xf 1.1.1 site.
 
Okay I can confirm that the alerts works on my xf 1.1.2 site but not on my xf 1.1.1 site for some reason. Doesn't matter cause I don't use the xf 1.1.1 site anyway. How do I make the alerts show up as red?
 
I tried this but the red always shows.

Code:
#moderatorBar .visitorTabs .navLink .itemCount
{
line-height: 16px;
background: #DF0101;
}
 
Add this so your alert display and you keep the zero for showing.

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:hover
{
}
#moderatorBar .visitorTabs .navLink .itemCount
{
    font-weight: bold;
    font-size: 11px;
    color: white;
    background-color: #e03030;
    line-height: 16px;
    text-align: center;
}
 
#moderatorBar .visitorTabs .navLink .itemCount.Zero
{
    display: none;
}
 
Forsaken's template edit does not look good with the floating navigation bar because sometimes it cuts off a piece of your header.
 
I added this above <xen:if is="{$visitor.is_admin}"> in moderator_bar:

Code:
<a href="account/" class="moderationQueue modLink"><span class="itemLabel">Settings</span>
</a>
<a href="account/preferences" class="moderationQueue modLink"><span class="itemLabel">Preferences</span>
</a>
<a href="account/following" class="moderationQueue modLink"><span class="itemLabel">Friends</span>
</a>
 
Forsaken's template edit does not look good with the floating navigation bar because sometimes it cuts off a piece of your header.
You need to edit the height to fit your design, this was made specifically for another site that had a larger than normal moderator bar.
 
Top Bottom