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

Moving Visitor Tabs to the Moderator Bar

Tutorial in how to add the visitor tabs to the moderator bar.

Forsaken

Well-known member
#1
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...
 

Forsaken

Well-known member
#5
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>
 

Forsaken

Well-known member
#11
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.
 

DRE

Well-known member
#12
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.
 

DRE

Well-known member
#13
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?
 

DRE

Well-known member
#15
I tried this but the red always shows.

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

DRE

Well-known member
#17
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;
}
 

DRE

Well-known member
#18
Forsaken's template edit does not look good with the floating navigation bar because sometimes it cuts off a piece of your header.
 

DRE

Well-known member
#19
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>