Moving Visitor Tabs to the Moderator Bar

[Forsaken]

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:

<xen:hook name="moderator_bar" />

With:

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

<xen:hook name="moderator_bar" />

navigation_tab

Replace the following:

<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]

Forgot to add the code for PAGE_CONTAINER, which has been added now.

 

[gordy]

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/

 

[Forsaken]

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/

It should work if you use that guide, though I can't be 100% sure and don't have time to test it.

 

[Forsaken]

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.

<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>

 

[DRE]

Is this sorta like XenFans User Bar? Screenshot please?

 

[DRE]

Oh God this is awesome. Single best template edit ON THE WHOLE XENFORO SITE!

 

[DRE]

Spoke too soon. Alerts don't work.

 

[Forsaken]

Added a few screenshots of styles using it (Not the default), to show that it will work with most styles.

 

[DRE]

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?

 

[Forsaken]

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]

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]

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?

 

[Forsaken]

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?

Modify the CSS provided.

 

[DRE]

I tried this but the red always shows.

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

 

[DRE]

test

 

[DRE]

Add this so your alert display and you keep the zero for showing.

#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]

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

 

[DRE]

I added this above <xen:if is="{$visitor.is_admin}"> in moderator_bar:

<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]

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.