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>

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>

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

Originally Posted by 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>

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>

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

Originally Posted by TheLastSuperman

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.
Thanks though!

--------------- Added [DATE]1285683014[/DATE] at [TIME]1285683014[/TIME] ---------------

Originally Posted by 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.

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:



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

Any idea how I can get this to work right?

Thanks to everyone for the help!
Jeff

[Lynne]

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

[NashChristian]

Originally Posted by Lynne

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

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

Originally Posted by 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 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.



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:

1. The line is THICKER and more prominent (it looks more like a HAIRLINE in the Logged-In version at the top).
2. The line COLOR is blue... I can't figure out how they are styling the color.
3. 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!
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]

Originally Posted by 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).

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:



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