• 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

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>