![]() |
How to Change the HELP Link in the Header into a Drop-Down Menu for Non-Users???
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: Code:
<li class="popupmenu nonotifications"> https://vborg.vbsupport.ru/external/2010/09/12.jpg Unregistered / Not Logged In: Code:
<li class="popupmenu"> 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 |
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.
|
Quote:
Code:
<li class="popupmenu nonotifications"> Code:
<li class="popupmenu"> |
Quote:
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 [DATE]1285683014[/DATE] at [TIME]1285683014[/TIME] --------------- Quote:
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...n-member_2.jpg I added in the following CSS: Code:
.toplinks ul.nouser li.popup a { 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 Any idea how I can get this to work right? Thanks to everyone for the help! :D Jeff |
For the hovering, you need a ".toplinks ul.nouser li.popup a:hover" defined.
|
Quote:
Thanks again! Jeff --------------- Added [DATE]1285687466[/DATE] at [TIME]1285687466[/TIME] --------------- 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 |
You need to add the arrow image as a background for your css:
HTML Code:
url("/images/misc/arrow.png") no-repeat scroll right center transparent; 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. |
Quote:
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...n-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:
Code:
border-bottom:1px solid {vb:stylevar navbar_tab_background.backgroundColor}; Any idea HOW in the heck they are styling this horizontal divider line? Thanks again for all the help! :D Jeff |
vB uses a top border and they use first-child to not show it on the top one (I think that's the selector).
|
Quote:
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: Code:
.toplinks ul.nouser a.popupctrl, .toplinks ul.nouser a.popupctrl:hover, .toplinks ul.nouser a.popupctrl:active { WEBSITE 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 |
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.
|
Quote:
|
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.
|
Quote:
|
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.
|
Quote:
Thanks again for the help. Jeff |
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.
|
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.
|
Perhaps login to vb.com and use firebug on there and compare it to your dropdown on your site.
|
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. |
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. |
Quote:
To style the drop-down for logged-in users, all I had to do was add the 'nonotifications' class to my parent list tag: Code:
<li class="popupmenu nonotifications"> |
Quote:
I've tried Firebug for IE, and it doesn't even allow you to select the element with the gray block. I've tried using a negative bottom margin: Code:
.toplinks ul.nouser li.popupmenu ul.popupbody li.popup a{ 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... |
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.
|
Quote:
I tried hard-coding: Code:
style="margin:0; padding:0;" Thanks for the help :confused: --------------- Added [DATE]1286041505[/DATE] at [TIME]1286041505[/TIME] --------------- Quote:
I found this little snippet in my 'vbulletin-chrome' template: Code:
.toplinks ul.isuser .popupbody li { Code:
.toplinks ul.isuser .popupbody li, .toplinks ul.nouser .popupbody li { 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 |
Glad you finally got it to work. :)
|
All times are GMT. The time now is 02:51 AM. |
Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
![]() |
|
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|