How to Change the HELP Link in the Header into a Drop-Down Menu for Non-Users???

[NashChristian]

Hello.

I've decided that it makes more sense to keep all the global controls in the header, instead of having most burried in Forum sub-menus (I don't know why vB STILL does this!). As a result, I've added a "Tools" drop-down menu. This is working perfectly for the members who are logged-in, however, I'm having problems with the 'Unregistered / Not Logged In' version.

Here is the code I'm using along with screen shots:

Members Logged-In:


<li class="popupmenu nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">
<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">Frequently Asked Questions (FAQ)</a></li>
<li><a href="content.php?r=171">Website Overview Video</a></li>
<li><a href="forumdisplay.php?f=69">About NashvilleChristian.com</a></li>
<vb:if condition="$vboptions['forumleaders']">
<li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase view_site_leaders}</a></li>
</vb:if>
<vb:if condition="$show['memberslist']">
<li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li>
</vb:if>
<li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online}?</a></li>
<li><a href="showthread.php?t=98">Image Guidelines</a></li>
<li><a href="forumdisplay.php?f=67">Suggestions &amp; Feedback</a></li>
<li><a href="forumdisplay.php?f=94">Report Bugs Here</a></li>
<li><a href="sendmessage.php?{vb:raw session.sessionurl}">Contact Administrator</a></li>
</ul>
</li>



https://vborg.vbsupport.ru/external/2010/09/12.jpg



Unregistered / Not Logged In:


<li class="popupmenu">
<a class="popupctrl" rel="help" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">
<li><a href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">Frequently Asked Questions (FAQ)</a></li>
<li><a href="content.php?r=171">Website Overview Video</a></li>
<li><a href="forumdisplay.php?f=69">About NashvilleChristian.com</a></li>
<li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase view_site_leaders}</a></li>
<li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li>
<li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online} Now?</a></li>
<li><a href="showthread.php?t=98">Image Guidelines</a></li>
<li><a href="forumdisplay.php?f=67">Suggestions &amp; Feedback</a></li>
<li><a href="forumdisplay.php?f=94">Report Bugs Here</a></li>
<li><a href="sendmessage.php?{vb:raw session.sessionurl}">Contact Administrator</a></li>
</ul>
</li>



https://vborg.vbsupport.ru/external/2010/09/12.jpg


On the Unregistered / Not Logged In version: how do I add an arrow beside the word 'Tools', as an indicator that it is a drop-down menu, and how do I make the drop-down menu itself look right: change the background color to white, the text to black, the hover background to yellow, etc... ? I don't want to hard-code this either, because I have several styles, some of which are dark, and it needs to be able to adjust the text and background color accordingly.

I know that I used 'rel="help"' on the 'a' tag, which was necessary to style the word "Tools" to match the style of "Register". I want this to look the same as the top menu, with the only exception being the style of the word "Tools", so that it will match the other header links.

Any help would be greatly appreciated!

Thanks!
:D Jeff

[Lynne]

The arrow is added by CSS. My guess would be that your class structure for the unregistered users is such that the arrow doesn't get added by the class like it does for registered users. But, that is only something I'd be able to tell by using firebug.

[TheLastSuperman]

Hello.

I've decided that it makes more sense to keep all the global controls in the header, instead of having most burried in Forum sub-menus (I don't know why vB STILL does this!). As a result, I've added a "Tools" drop-down menu. This is working perfectly for the members who are logged-in, however, I'm having problems with the 'Unregistered / Not Logged In' version.

Here is the code I'm using along with screen shots:

Members Logged-In:


<li class="popupmenu nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">
<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">Frequently Asked Questions (FAQ)</a></li>
<li><a href="content.php?r=171">Website Overview Video</a></li>
<li><a href="forumdisplay.php?f=69">About NashvilleChristian.com</a></li>
<vb:if condition="$vboptions['forumleaders']">
<li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase view_site_leaders}</a></li>
</vb:if>
<vb:if condition="$show['memberslist']">
<li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li>
</vb:if>
<li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online}?</a></li>
<li><a href="showthread.php?t=98">Image Guidelines</a></li>
<li><a href="forumdisplay.php?f=67">Suggestions &amp; Feedback</a></li>
<li><a href="forumdisplay.php?f=94">Report Bugs Here</a></li>
<li><a href="sendmessage.php?{vb:raw session.sessionurl}">Contact Administrator</a></li>
</ul>
</li>



http://nashvillechristian.com/images/support/vb_global_tools_member.jpg



Unregistered / Not Logged In:


<li class="popupmenu">
<a class="popupctrl" rel="help" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">
<li><a href="faq.php{vb:raw session.sessionurl_q}" accesskey="5">Frequently Asked Questions (FAQ)</a></li>
<li><a href="content.php?r=171">Website Overview Video</a></li>
<li><a href="forumdisplay.php?f=69">About NashvilleChristian.com</a></li>
<li><a href="showgroups.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase view_site_leaders}</a></li>
<li><a href="memberlist.php{vb:raw session.sessionurl_q}">{vb:rawphrase members_list}</a></li>
<li><a href="online.php{vb:raw session.sessionurl_q}">{vb:rawphrase whos_online} Now?</a></li>
<li><a href="showthread.php?t=98">Image Guidelines</a></li>
<li><a href="forumdisplay.php?f=67">Suggestions &amp; Feedback</a></li>
<li><a href="forumdisplay.php?f=94">Report Bugs Here</a></li>
<li><a href="sendmessage.php?{vb:raw session.sessionurl}">Contact Administrator</a></li>
</ul>
</li>



http://nashvillechristian.com/images/support/vb_global_tools_non-member.jpg


On the Unregistered / Not Logged In version: how do I add an arrow beside the word 'Tools', as an indicator that it is a drop-down menu, and how do I make the drop-down menu itself look right: change the background color to white, the text to black, the hover background to yellow, etc... ? I don't want to hard-code this either, because I have several styles, some of which are dark, and it needs to be able to adjust the text and background color accordingly.

I know that I used 'rel="help"' on the 'a' tag, which was necessary to style the word "Tools" to match the style of "Register". I want this to look the same as the top menu, with the only exception being the style of the word "Tools", so that it will match the other header links.

Any help would be greatly appreciated!

Thanks!
:D Jeff

See the difference?

<li class="popupmenu nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">

VS

<li class="popupmenu">
<a class="popupctrl" rel="help" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">

Try popupmenu nonotifications class in the non-logged in users code and see if that helps, only difference I see...

[NashChristian]

See the difference?

<li class="popupmenu nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">

VS

<li class="popupmenu">
<a class="popupctrl" rel="help" href="usercp.php{vb:raw session.sessionurl_q}">Tools</a>
<ul class="popupbody popuphover">

Try popupmenu nonotifications class in the non-logged in users code and see if that helps, only difference I see...

Thanks for the feedback, but I actually tried that first... the problem is that the header links for the non-logged in users is styled differently. (There are blue knock-outs and the fonts are styled a little differently for the non-logged in users.)

I need to keep it styled the same as the Register button beside it, however with a drop-down menu. The drop-down menu itself does NOT need to maintain this style, but I want it to look the same as for the logged-in users.

Hope that made sense.
:D Thanks though!

--------------- Added 1285683014 at 1285683014 ---------------

The arrow is added by CSS. My guess would be that your class structure for the unregistered users is such that the arrow doesn't get added by the class like it does for registered users. But, that is only something I'd be able to tell by using firebug.

Hello Lynne,

Ok... I've been working with Firebug, though it's my first time using it... I got it to look quite a bit better, but I'm still having a few issues I can't figure out how to fix.

Screen-Shot:

http://nashvillechristian.com/images/support/vb_global_tools_non-member_2.jpg

I added in the following CSS:

.toplinks ul.nouser li.popup a {
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
background:none repeat scroll 0 0 #FFFFFF;
clear:none;
color:#000000;
float:none;
line-height:26px;
margin-left:0;
padding:0 5px;
text-align:left;
}


I haven't chased after the arrow yet, so I'll work on that on my own first, but I can't for the life of me figure out how to activate roll-over effects on this (where the background changes to yellow on hover like my logged-in version), there also doesn't seem to be any separators between the individual link blocks, and there is a weird gray block on the right hand side, I outlined in red above.

WEBSITE DEMO (http://nashvillechristian.com)

Any idea how I can get this to work right?

Thanks to everyone for the help!
:D Jeff

[Lynne]

For the hovering, you need a ".toplinks ul.nouser li.popup a:hover" defined.

[NashChristian]

For the hovering, you need a ".toplinks ul.nouser li.popup a:hover" defined.

Sweet! The highlighting on hover is working now... any idea what is going on with that gray block on the right side of the menu?

Thanks again!
Jeff

--------------- Added 1285687466 at 1285687466 ---------------

Ok... I figured that out, it was inheriting a margin for some reason... fixed that!

Last two things: The arrow which I'm still going to look for here...

AND, how do I get the thin horizontal rule between the separate <a> tag blocks in the drop-down menu? (Like on my logged-in version.)

Thanks again!
:) Jeff

[Lynne]

You need to add the arrow image as a background for your css:
url("/images/misc/arrow.png") no-repeat scroll right center transparent;
(May need some padding also, but I'm sure you'll see after you add it what needs to be done)

Use firebug to look at the other dropdowns and you'll see what adds the lines. It's a top-border on the <li>, I think.

[NashChristian]

You need to add the arrow image as a background for your css:
url("/images/misc/arrow.png") no-repeat scroll right center transparent;
(May need some padding also, but I'm sure you'll see after you add it what needs to be done)

Use firebug to look at the other drop-downs and you'll see what adds the lines. It's a top-border on the <li>, I think.

Beautiful! Thanks Lynne!

I've got it ALL working now except for ONE thing - that crazy divider line between <li> items in the drop-down.

http://nashvillechristian.com/images/support/vb_global_tools_non-member_3.jpg

I can't tell how vB is styling this by looking at Firebug this time. I tried top and bottom borders, alternately, but both presented problems. Shown in the image above is a 1px bottom border. I'm noticing three problems with it:


The line is THICKER and more prominent (it looks more like a HAIRLINE in the Logged-In version at the top).
The line COLOR is blue... I can't figure out how they are styling the color.
There is an EXTRA border below the last list item, which isn't the case with the Logged-In version.

I used this code:
border-bottom:1px solid {vb:stylevar navbar_tab_background.backgroundColor};

I know that this is what is making the line blue, I just don't know how the Logged-In version is styled so I can duplicate that look for my Logged-Out version.

Any idea HOW in the heck they are styling this horizontal divider line?

Thanks again for all the help!
:D Jeff

[Lynne]

vB uses a top border and they use first-child to not show it on the top one (I think that's the selector).

[NashChristian]

vB uses a top border and they use first-child to not show it on the top one (I think that's the selector).

Thanks Lynne, that worked!

I still can't figure out how vB is styling the line... I can for the NavTabs, but I can't for the header links. The only styling I'm aware of for the global header links with a drop-down menu is for the <li class="popupmenu nonotifications"> which works fine for the Logged-In users without tweaking, but doesn't work for the Logged-Out users.

I've been testing this in Firefox with the Firebug plugin, and had been logged into my AdminCP in IE while testing, so I just now saw how this looks in IE when Logged-Out, and there is an extremely noticeable problem in IE8:

https://vborg.vbsupport.ru/external/2010/10/42.jpg

For some reason IE is displaying a large gray block below each list item. I have specified no padding and no margin. This isn't displaying in the other browsers, and this doesn't display in IE when Logged-In either. I don't know what is causing this to display in IE when Logged-Out. I'm not even sure how to proceed with debugging it, since it is only visible in IE. I tried using the IE developer tools, but that didn't seem very intuitive.

Here is the code I'm currently using:
.toplinks ul.nouser a.popupctrl, .toplinks ul.nouser a.popupctrl:hover, .toplinks ul.nouser a.popupctrl:active {
background: {vb:stylevar navbar_tab_background.backgroundColor} url("images/misc/arrow.png") no-repeat scroll right center;
padding-right: 15px;
padding-left: 4px;
}

.toplinks ul.nouser li.popup a {
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
background:none repeat scroll 0 0 #FFFFFF;
border-top: 1px outset;
clear:none;
color:#000000;
float:none;
line-height:26px;
height:26px;
font-size:11px;
margin:0;
padding:0 5px;
text-align:left;
}

.toplinks ul.nouser li.popup:first-child a {
border-top:0;
}

.toplinks ul.nouser li.popup a:hover {
background:{vb:stylevar imodhilite_backgroundColor};
color: {vb:stylevar navbar_selected_popup_body_a_Color};
text-decoration: underline;
}

I realized that you can't compare the Logged-In versus the Logged-Out versions without registering a user name, so I setup a temporary test account so you can Log-In:

WEBSITE (http://nashvillechristian.com)
Username: Test
Password: 123456

Please take a look at it and let me know what you think is going on here.

Thanks for all the help!
:D Jeff

[Lynne]

If you have firebug, then compare each part of the dropdown up top to a dropdown that is how you want it. First, compare the very inner tags - the <a> tags. Then the <li> tags. Then the <ul> tags... making sure they have the same properties.

[NashChristian]

If you have firebug, then compare each part of the dropdown up top to a dropdown that is how you want it. First, compare the very inner tags - the <a> tags. Then the <li> tags. Then the <ul> tags... making sure they have the same properties.

But my Firebug is in Firefox, and this seems to be a non-standards compliant issue with IE. Is there a way to test this with IE?

[Lynne]

Do the other dropdowns work in IE? If so, then as I said, change your CSS for your dropdown to be the same as the working dropdown.

[NashChristian]

Do the other dropdowns work in IE? If so, then as I said, change your CSS for your dropdown to be the same as the working dropdown.

Yes, the Logged-In drop-downs work fine in IE. It has to be an inheritance issue on some attribute that shows up in IE but doesn't in Firefox. Since I'm not sure where it is inheriting it from, and since it doesn't show up and Firefox and I can't use the element inspector in Firebug to locate it, I'm not sure how to debug it.

[Lynne]

You can use firebug to make sure your CSS is *exactly* the same for the different dropdowns and then see how it is in IE. I can look on your site right now at the two and they are different. You may want to also look in the vbulletin-ie.css file to see if there is anything in there being used for the dropdowns.

[NashChristian]

You can use firebug to make sure your CSS is *exactly* the same for the different dropdowns and then see how it is in IE. I can look on your site right now at the two and they are different. You may want to also look in the vbulletin-ie.css file to see if there is anything in there being used for the dropdowns.

Ok, thanks. Is there an easy way to compare the two pages (logged-in and logged-out) in Firebug? Right now I'm trying to copy line by line the active css on each page from Firebug, put it into a text doc, then after I do that with both pages compare the two files with a file comparrison program. Since Firebug crosses through the inactive lines in the CSS, when you copy and paste them it still copies them as active, and I have to manually go line by line and delete those lines before comparing. Surely there must be an easier way. Any suggestions?

Thanks again for the help.
Jeff

[Lynne]

Why logged in versus logged out? I am comparing the dropdown in the top with the dropdown in the navtabs area. It's the same CSS that should be used with just a change in class name.

[NashChristian]

I didn't do it that way... the navtab is coded totally differently, with the template and plugin... I started with the functionality that was already there, which was the notifications drop-down menu when logged-in. So that was what I started with, then I had to figure out how to make it work for the logged-out users, since it wasn't styled for that. The navtab displays a heavier drop-down, with a border all the way around I believe. The notifications drop-down is visually a lighter version.

[Lynne]

Perhaps login to vb.com and use firebug on there and compare it to your dropdown on your site.

[NashChristian]

I don't follow you... what would looking at vB.com in Firebug help?

The global TOOLS drop-down menu is what I'm comparing between the versions, (logged-in and logged-out). That's all I'm working on here.

It displays perfectly on the logged-in version of my site, I'm just having problems replicating that display for users who aren't logged-in.

[Lynne]

Didn't you get the CSS from an existing dropdown or did you make up all the CSS yourself? I thought you got it from an existing dropdown and thought you should compare that.

Else, there are similar tools to firebug for other platforms, so look into using that to compare things.

[NashChristian]

Didn't you get the CSS from an existing dropdown or did you make up all the CSS yourself? I thought you got it from an existing dropdown and thought you should compare that.

Else, there are similar tools to firebug for other platforms, so look into using that to compare things.

Yes, I got the CSS from the Notifications drop-down menu in the header. It worked perfectly for "logged-in" users. I didn't have to change anything there. I've just been struggling to duplicate it for the "logged-out" users.

To style the drop-down for logged-in users, all I had to do was add the 'nonotifications' class to my parent list tag:

<li class="popupmenu nonotifications">

[NashChristian]

Thanks Lynne, that worked!

I still can't figure out how vB is styling the line... I can for the NavTabs, but I can't for the header links. The only styling I'm aware of for the global header links with a drop-down menu is for the <li class="popupmenu nonotifications"> which works fine for the Logged-In users without tweaking, but doesn't work for the Logged-Out users.

I've been testing this in Firefox with the Firebug plugin, and had been logged into my AdminCP in IE while testing, so I just now saw how this looks in IE when Logged-Out, and there is an extremely noticeable problem in IE8:

http://nashvillechristian.com/images/support/vb_global_tools_non-member_5.jpg

For some reason IE is displaying a large gray block below each list item. I have specified no padding and no margin. This isn't displaying in the other browsers, and this doesn't display in IE when Logged-In either. I don't know what is causing this to display in IE when Logged-Out. I'm not even sure how to proceed with debugging it, since it is only visible in IE. I tried using the IE developer tools, but that didn't seem very intuitive.

Here is the code I'm currently using:
.toplinks ul.nouser a.popupctrl, .toplinks ul.nouser a.popupctrl:hover, .toplinks ul.nouser a.popupctrl:active {
background: {vb:stylevar navbar_tab_background.backgroundColor} url("images/misc/arrow.png") no-repeat scroll right center;
padding-right: 15px;
padding-left: 4px;
}

.toplinks ul.nouser li.popup a {
-moz-border-radius-bottomleft:0;
-moz-border-radius-bottomright:0;
background:none repeat scroll 0 0 #FFFFFF;
border-top: 1px outset;
clear:none;
color:#000000;
float:none;
line-height:26px;
height:26px;
font-size:11px;
margin:0;
padding:0 5px;
text-align:left;
}

.toplinks ul.nouser li.popup:first-child a {
border-top:0;
}

.toplinks ul.nouser li.popup a:hover {
background:{vb:stylevar imodhilite_backgroundColor};
color: {vb:stylevar navbar_selected_popup_body_a_Color};
text-decoration: underline;
}

I realized that you can't compare the Logged-In versus the Logged-Out versions without registering a user name, so I setup a temporary test account so you can Log-In:

WEBSITE (http://nashvillechristian.com)
Username: Test
Password: 123456

Please take a look at it and let me know what you think is going on here.

Thanks for all the help!
:D Jeff

I spent a FULL day working on this today and STILL can't figure it out!

I've tried Firebug for IE (http://firebugger.com/), and it doesn't even allow you to select the element with the gray block. I've tried using a negative bottom margin:

.toplinks ul.nouser li.popupmenu ul.popupbody li.popup a{
margin-bottom: -13px;
}

Which ALMOST works in IE... it pulls out the gray block, however, it sucks up the bottom border of the list so that it's actually behind the list itself. The other problem with this method is it screws up the display in every other browser. I've tried adding the code to the replacement-vbulletin-ie.css or the vbulletin-ie.css, so it will only run the code if the browser is IE, however I can't get that to work for some reason.

I don't get it!
At this point, I don't care if this is styled exactly the same as the other navbar drop-down menus (with a 1px border all the way around), but I can't even get that to work correctly. Apparently the css is designed for those only to work in the navbar, not the header.

I'm about to pull my hair out. Does anyone have a suggestion about how to get this to work and display correctly???
:confused: Thanks...

[Lynne]

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

[NashChristian]

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

So HOW do I fix this only in IE without affecting the other browser displays?

I tried hard-coding: style="margin:0; padding:0;" On the parent <ul> in addition to each line of the <li> but it didn't make any difference at all. This seems to only be an issue in IE, but I don't know how to fix it.

Thanks for the help :confused:

--------------- Added 1286041505 at 1286041505 ---------------

The gray box isn't an actual separate element - it is the background color of the <li> which is inherited from the <ul> (in .popupbody). The background for your <a> tag is white (.toplinks ul.nouser li.popup a, .toplinks ul.nouser li.popup a:visited) only it isn't 'large' enough to cover the whole <li> which is why you see the gray. Or, the <li> has some left-over padding/margin and is forcing the gray to show up.

I could KISS YOU! THANK YOU LYNNE!

I found this little snippet in my 'vbulletin-chrome' template:

.toplinks ul.isuser .popupbody li {
display:block;
float: none;
clear: none;
padding:0;
margin:0;
}

I changed it to this:

.toplinks ul.isuser .popupbody li, .toplinks ul.nouser .popupbody li {
display:block;
float: none;
clear: none;
padding:0;
margin:0;
}

It worked like a CHARM!

DANG! That was hard to find!

Thanks for all your help Lynne!

Now I can get back to what I wanted to work on 3 days ago!
:D Jeff

[Lynne]

Glad you finally got it to work. :)