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

  1. Forsaken

    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.

    Read more about this resource...
     
    Bram, bluemartian, yavuz and 3 others like this.
  2. Forsaken

    Forsaken Well-Known Member

    Forgot to add the code for PAGE_CONTAINER, which has been added now.
     
    The8thLegion likes this.
  3. gordy

    gordy Well-Known Member

  4. Forsaken

    Forsaken Well-Known Member

    The8thLegion likes this.
  5. Forsaken

    Forsaken Well-Known Member

    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>
    
     
    The8thLegion and gordy like this.
  6. DRE

    DRE Well-Known Member

    Is this sorta like XenFans User Bar? Screenshot please?
     
  7. DRE

    DRE Well-Known Member

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

    DRE Well-Known Member

    Spoke too soon. Alerts don't work.
     
  9. Forsaken

    Forsaken Well-Known Member

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

    DRE Well-Known Member

  11. Forsaken

    Forsaken Well-Known Member

    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.
     
  12. DRE

    DRE Well-Known Member

    I followed them all, created two themes to try it out and it's not working on my xf 1.1.1 site.
     
  13. DRE

    DRE Well-Known Member

    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?
     
  14. Forsaken

    Forsaken Well-Known Member

    Modify the CSS provided.
     
  15. DRE

    DRE Well-Known Member

    I tried this but the red always shows.

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

    DRE Well-Known Member

    test bar.jpg
     
  17. DRE

    DRE Well-Known Member

    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;
    }
     
    nttruong likes this.
  18. DRE

    DRE Well-Known Member

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

    DRE Well-Known Member

    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>
    
     
    nttruong likes this.
  20. Forsaken

    Forsaken Well-Known Member

    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.
     

Share This Page