Resource icon

Moving Visitor Tabs to the Moderator Bar

Overview Reviews (7) Discussion
kenng said:
I still have the "itemCounts" shown if i load my Page for the first Time. After hovering about them the itemCounts are gone. How can i get rid of them from the first Time?
Click to expand...
I'm reading this as though you're not wanting the itemCount at all, just modify the following code (You'll only need to add display:none;). If you're wanting something else, you're going to have to explain it a bit better.

Code: 
#moderatorBar .visitorTabs .navLink .itemCount 
{
display:none;
}
 
Forsaken said:
I'm reading this as though you're not wanting the itemCount at all, just modify the following code (You'll only need to add display:none;). If you're wanting something else, you're going to have to explain it a bit better.
Click to expand...
Is it possible to prevent the style="display:none;" to be added to the span when hovering over the menu? I tried looking it up in the javascript file, but to me that is written up with the Enigma machine, I just can't for the life of my make any sense of scripts :(

If not I am going to hide it if zero, cause it is annoying that it keeps changing the layout when hovering over it.

EDIT:
Never mind, I think I like it better when it is hidden if Zero, easy way to hide it then is by adding:
Code: 
#moderatorBar .visitorTabs .navLink .Zero {
   display: none;
}
To extra.css.
 
I was wondering what this step does do:

navigation_visitor_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>
<div class="muted">{xen:phrase quick_links}</div>
</div>
<ul class="secondaryContent blockLinksList">
<xen:hook name="navigation_tabs_account">
<li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li>
<li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
<li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li>
<li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
<!--<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>-->
</xen:hook>
  </ul>
</div>
</li>
</xen:if>

With:

Code: 
<xen:comment>
<xen:if is="{$tabs.account.selected}">
<li class="navTab selected PopupClosed">
<div class="tabLinks">
<div class="primaryContent menuHeader">
<h3>{$tabs.account.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
<ul class="secondaryContent blockLinksList">
<xen:hook name="navigation_tabs_account">
<li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li>
<li><a href="{xen:link conversations}">{xen:phrase conversations}</a></li>
<li><a href="{xen:link account/news-feed}">{xen:phrase your_news_feed}</a></li>
<li><a href="{xen:link account/likes}">{xen:phrase likes_youve_received}</a></li>
<!--<li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li>-->
</xen:hook>
  </ul>
</div>
</li>
</xen:if>
</xen:comment>
 
That was not what I asked. I asked what does this step do (by step I mean the completion of commenting that code out) e.g removes some functionality or stuff. I asked because I didn't notice any difference regardless if it's commented out or not.
 
It comments that code out, so it is not executed, instead of removing it to prevent it from being displayed...
 
Again, I wasn't asking what xen:comment does, I know that it comments out code. I was asking what the code does that was commented out because I didn't notice any difference.
 
It's commented out so that you have the code in case you choose to undo edits. The reason it is commented out is because in the next step you move it to a new template, and would have duplicate code.

It is moved to the navigation template to make it display properly as the navTabs are moved to yet another template.
 
I did this but now my moderator bar is in like 3 lines? Looks nothing like the screenshots, i want admin on the left, user stuff on the right how do i get that?

Also how can i get it to use the same colours the original bar had?
 
I have done this on a local test install and followed the details as per the description. Worked great but had to do some minor adjustments to the css to make it work properly so here is my css in the EXTRA.css template:
Code: 
/* USER LINKS IN MOD BAR */
#moderatorBar .adminLink
{
float:left !important;
}
 
#moderatorBar .visitorTabs
{
float: right;
}
 
#moderatorBar .visitorTabs li
{
float:left;
}
 
#moderatorBar .visitorTabs .navLink
{
line-height: 16px;
}
 
#moderatorBar .visitorTabs .navLink:focus
{
color: @primaryDark;
}
 
#moderatorBar .visitorTabs .navLink:hover
{
color: @primaryDark;
background: @primaryLight url('@imagePath/xenforo/gradients/tab-unselected-25px-light.png') repeat-x top;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
text-shadow: 1px 1px 2px white;
}
 
#moderatorBar .navTabs .navLink .itemCount .arrow
{
color: #ffffff;
}
 
#moderatorBar .visitorTabs .navLink .itemCount
{
background-color: #e03030;
font-weight: bold;
}
 
#moderatorBar .visitorTabs .navLink .itemCount:hover
{
}
 
#moderatorBar .visitorTabs .navLink .itemCount.Zero {
display: none !important;
}

I only have 2 issues with it now:
1. The arrow next to the username needs to be a lighter colour. Any suggestions on how to make the arrow that is used just in this instance say white in colour?
1.webp

2. When hovering the mouse over the user links, the text colour changes to a dark one...GREAT...but as soon as the mouse moves off the user link, the text colour changes even if the drop down is still being displayed...any ideas on how to keep the text colour dark whilst the drop down is being displayed?
2.webp 3.webp

Thanks Forsaken, a great help for those needing more real estate on their menu bar.

Given that there ends up free real estate for users in the mod bar I am thinking of possibly creating say 3 custom user fields so users can define their own quick links to have displayed between the Alerts and Log Out links. The custom user fields would have say 10 character link name and quick link address. The only question I have about this is how much of an overhead would this have with the mod bar having to pull up those custom user fields every time it is displayed i.e. every page change on the site...any comments on this?
 
there is missing alert red bubble when there is new alert and yes an annoying when hover the itemcount disappear.
 
Luxus said:
Use XF framework. For some reason the implementation by xf framework works better than this.
Click to expand...
XF Framework is based off of this guide.

This hasn't been updated in a while, but in general it should work how people would want. That said it will require modifying on a per style basis just like every edit.
 
You must log in or register to reply here.

Similar threads

tommy2014
  • Question Question
XF 1.5 Moving Visitor Tab To Block Link List (below navigation)
Replies
0
Views
651
tommy2014
tommy2014
Diana
  • Question Question
moving visitor tabs to navbar in page node
Replies
7
Views
1K
Diana
Diana
ibaker
  • Question Question
Moving visitor_tab to header
Replies
10
Views
2K
Betclever
Betclever
J
  • Question Question
Adding To The Moderator Bar?
Replies
14
Views
3K
Marc
Marc
Top Bottom