How to Move Header onto side of Navbar?

[TheLastSuperman]

Originally Posted by gregmlb

Okay - so this morning I have studied the suggestions from post #5 above ... which would involve moving what I think is the right code to the navbar template, and pre-registering the variables. I believe that if I take this on myself, I'm likely to burn up many more hours trying to get it right ... and also create many more thread posts here asking for help ... and so here are what I believe are my options:

1) Stick with my wonderful/working 3.8.6 forum - this is undesirable because my forum needs a makeover ... plus at some point, I'm sure that 3.8.6 will go end-of-life.

or

2) Cosmetically change the foreground/background colors of the user log on section - so that it is really obvious ... and just keep that located in the upper right-hand side of the browser. This is undesirable because it just doesn't look right - violates the "look and feel" of my overall website (the forum is just one part of my overall website).

or

3) Have someone to do this mod for me - this is undesirable for obvious reasons. Plus philosophically, I have to question why something like this is not built-in to vB4 ... shouldn't it be? Or should all vB4 owners who embed their forum into a larger site be coders? I guess I'm lobbying here for some ease-of-use improvements to vB4.

or

4) Wait for someone much smarter than me (and/or someone with more time on their hands) to take this exact issue on, and then post about how to do it. This is the preferred approach for me - the variable, of course, is time. I was hoping to migrate my forum from 3.8.6 to 4.1.0PL2 by 12/31/2010 ... and there is certainly no guarantee that someone will take this on before then (or even IF someone will take this on, for that matter).

Anyone have any comments about the above?

How about... I felt the same way (frustrated) until I kept on and worked through it... well previous vB3 experience had me up to par but that's the besides the point, the actual point is you need to learn it this way you can have free reign over your site and how to develop it .

Originally Posted by Antidepresiv

I totaly agree with you, since Superman posted those links i tried to do the same, but those posts from Cellarius, about registering variables are just too confusing for a normal user. Also for that matter i have asked a number of ppl to help me, but no1 seems to know how, some of them even don't care about it, with an exception for the user "TheWindows7site", only satisfaction that i have found now, or so to say solution for this is in this thread https://vborg.vbsupport.ru/showthrea...=238152&page=7 and in the post #95 by
Alteran Ancient.. But them again, when you use this, after users log in, the login info again goes on top.. So it's 50% percent of what i would like to have for my forums. Anyway gregmlb, seems like we are left to ourselves to figure this one out. :/ Never thought it would be so hard just to add the old vbulletin login fields. And once again i totaly agree with you, only thing left to say is that i will work on this, and if i solve it, i will post here..

Best Regards,
Antidepresiv

TheWindows7Site is actually a very helpful member I've noticed he knows quite a bit about styling and css so we're lucky to have him on here posting .

Remember this is simple a discussion on how to move the login box, we certainly don't want to open up a can of worms about how vB should and should not be besides my list is bigger LOL so you two work on this, take your time and I guarantee you will get it!

Edit: I took a few minutes to run through this and you can easily move it to the navbar the only snag will be the css meaning you'll have to do some adjustments to make it look right after moving it just a heads up . *The only thing that will botch this all to hello and back is as Greg noted in one of his previous posts in regards to a style... if the user is on a smaller screen they will see the text all scrunched up and it will look awkward.

You could easily for now modify the .toplinks css definition (Search in templates) and where it says top: 0; simply change that to top: 40px; or something along those lines to easily move the header up and down.

[Antidepresiv]

Ok Superman, i managed to move the entire fields below navbar with Lynne's help, so here is that code that displays the fields after a user logs in..

.toplinks {top: 355px; right: 51px; z-index: 10;}
        width:"40%";
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};

Now, can you help me put the info in two rows, they are currently displaying like,

Welcone, Antidepresiv Notifications, My profile Settings Logout

and i would like it to be,

Welcome, Antidepresiv.
You last visited: Yesterday at 06:55 PM
Private Messages: Unread 0, Total 0.

Is this possible, with this piece of code above, or do i have to change smtin else..

Cmon Clark, i know you can save the day

Best Regards,
Antidepresiv

[TheLastSuperman]

Originally Posted by Antidepresiv

Ok Superman, i managed to move the entire fields below navbar with Lynne's help, so here is that code that displays the fields after a user logs in..

.toplinks {top: 355px; right: 51px; z-index: 10;}
        width:"40%";
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};

Now, can you help me put the info in two rows, they are currently displaying like,

Welcone, Antidepresiv Notifications, My profile Settings Logout

and i would like it to be,

Welcome, Antidepresiv.
You last visited: Yesterday at 06:55 PM
Private Messages: Unread 0, Total 0.

Is this possible, with this piece of code above, or do i have to change smtin else..

Cmon Clark, i know you can save the day

Best Regards,
Antidepresiv

Well I can always save the day however as I told Greg in PM, I love how many others help here it's great but all I ever see is here use this and paste it here . No one learns they simply copy/paste then come back in 3 months with a similar question because they only pasted something instead of learning and as you can tell sometimes I make it easy and sometimes I make you learn .

So long story short... you could more than likely remove the <ul wrapper from the toplinks just be sure the toplinks class is still defined, place them on their own lines using <br />'s and call it a day, it should still be in the position Lynne helped you with although you may want to adjust top value more or less .

[gregmlb]

Okay ? this is definitely a good discussion, and is heading in a positive direction. I tried using Antidepresiv's toplinks code in additional.css, but with tweaks for my forum:

.toplinks {top: 225px; right: 185px; z-index: 10;}
        width:"40%";
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};

Here is what I notice before the user logs in ?



and after the user logs in ?



and



So I don't know that this particular solution is robust enough for me to move forward with, unfortunately.

It appears that the best solution would be for someone to implement the "cut out of header, paste into navbar with a plugin to register the variables for the toplinks and login to work in the navbar" solution ? and to post it all here. [I assume that could also solve the issue of the "Remember Me?" box ? shown in my first screenshot above by also moving that box to the right of the "login" button.]

I understand what TheLastSuperman said,

"I felt the same way (frustrated) until I kept on and worked through it... well previous vB3 experience had me up to par but that's the besides the point, the actual point is you need to learn it this way you can have free reign over your site and how to develop it"

and I fully understand that ? but at the risk of being politically incorrect, I will quote the former CEO of BP, Tony Hayward, who said, "I want my life back" ? ;o) This migration from 3.8.6 is sucking the life out of me (not to mention my vacation days). No ? I don?t want any cheese to go with my wine/whine. ha ha

It is all good. It would appear that if I really want to do this migration anytime soon ? I'll need to pursue my Option 2 (discussed several posts above):

**************
2) Cosmetically change the foreground/background colors of the user log on section - so that it is really obvious ... and just keep that located in the upper right-hand side of the browser. This is undesirable because it just doesn't look right - violates the "look and feel" of my overall website (the forum is just one part of my overall website).
**************

This should have the additional benefit of making future vB upgrades easier (as there would be less tweaks to have to potentially deal with).

I shall ponder the above ? any other comments?

[TheLastSuperman]

Originally Posted by gregmlb

Okay – this is definitely a good discussion, and is heading in a positive direction. I shall ponder the above – any other comments?

Don't give up so easy... shoot part of the code is in the bottom link in post #5 follow that and you'll see how I easily moved it in a matter of seconds earlier today on my test site. This can be done I believe you two are simply feeling intimidated or feel like it's something above your heads when it's not .

If you don't have it by later tonight my time I'll post it, that does not mean however to not try and go off to do something else... that's what I'm about to do .

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

Basics - How to relocate Login to Navbar

Edit your header template, cut this code (or similar depending on version):

	<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
					</ul>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
            {vb:raw template_hook.header_userinfo}
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
				<li>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails" class="logindetails">
					<div>
						<div>
					<input type="text" class="textbox" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
					<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
					<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
					<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>
			<script type="text/javascript">
			YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
			YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
			YAHOO.util.Dom.setStyle('navbar_username', "color", "#828282");
			vB_XHTML_Ready.subscribe(function()
			{
			//
				YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
				YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
				YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
				YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
			});
			
			function navbar_username_focus(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
				{
				//
					textbox.value='';
					textbox.style.color='black';
				}
			}

			function navbar_username_blur(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '')
				{
				//
					textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
					textbox.style.color='#828282';
				}
			}
			
			function navbar_password_hint(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
				YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
				YAHOO.util.Dom.get('navbar_password').focus();
			}

			function navbar_password(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				if (textbox.value == '')
				{
					YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
					YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
				}
			}
			</script>
				</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
		</vb:if>
	</div>

So the only thing left in the header template should be something similar to this:

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>

Now edit the navbar template and find:

		</vb:if>
		{vb:raw template_hook.navtab_end}
	</ul>

Paste your cut code from the header DIRECTLY below the </ul>:

	<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<ul class="popupbody popuphover">
						<li>{vb:rawphrase no_new_messages}</li>
						<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
					</ul>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
            {vb:raw template_hook.header_userinfo}
			<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
		<vb:else />
			<ul class="nouser">
			<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
			</vb:if>
				<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
				<li>
			<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
			<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
				<fieldset id="logindetails" class="logindetails">
					<div>
						<div>
					<input type="text" class="textbox" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
					<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
					<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
					<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
						</div>
					</div>
				</fieldset>
				<div id="remember" class="remember">
					<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
				</div>

				<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
				<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
				<input type="hidden" name="do" value="login" />
				<input type="hidden" name="vb_login_md5password" />
				<input type="hidden" name="vb_login_md5password_utf" />
			</form>
			<script type="text/javascript">
			YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
			YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
			YAHOO.util.Dom.setStyle('navbar_username', "color", "#828282");
			vB_XHTML_Ready.subscribe(function()
			{
			//
				YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
				YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
				YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
				YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
			});
			
			function navbar_username_focus(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
				{
				//
					textbox.value='';
					textbox.style.color='black';
				}
			}

			function navbar_username_blur(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				if (textbox.value == '')
				{
				//
					textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
					textbox.style.color='#828282';
				}
			}
			
			function navbar_password_hint(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
				YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
				YAHOO.util.Dom.get('navbar_password').focus();
			}

			function navbar_password(e)
			{
			//
				var textbox = YAHOO.util.Event.getTarget(e);
				
				if (textbox.value == '')
				{
					YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
					YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
				}
			}
			</script>
				</li>
				<vb:if condition="$vboptions['enablefacebookconnect']">
					{vb:raw facebook_header}
				</vb:if>
			</ul>
		</vb:if>
	</div>

Now after saving the header and navbar template with your removal and addition in place simple create a new plugin:

AdminCP > Plugins & Products > Add new plugin

Product = vBulletin
Hook Location = process_templates_complete
Title = Login relocated to Navbar
Execution order = 5
Plugin PHP Code:

PHP Code:

vB_Template::preRegister('navbar', array('notification_menubits' => $notification_menubits)); 


Plugin is active = Yes

Now view your site, it should be there however this was a "Basic How 2 Guide" now you'll notice right off the bat it's to the right a bit too much and depending on your screen resolution and/or max width on your site it could flow under the search so you must adjust CSS and more to make it look right for your site and Lynne supplied one of you plus it's posted above some tricks to adjust the toplinks css .

[gregmlb]

Wow - thank you so much for doing this, TheLastSuperman!!!

I have made the changes, and been playing around with the CSS for toplinks ? specifically margin-left and margin-right. Margin-right (for me) being set at 185px does the trick. As far as margin-left goes, if I leave it in ? then when the window narrows, it causes the login/welcome user section to fall below (and bleed over into the New Posts/Private Messages/FAQ/etc. part of the navbar ? which is bad). If instead I remove the margin-left altogether, there is still some overlapping of text ? but it is more tolerable IMO. Either way ? there is a tragic flaw though ? which I'm not sure there is a solution to. Here is what I have now that is most tolerable. First here is the toplink section in additional.css ...

.
.
.
.toplinks {margin-right: 185px; z-index: 10;}
         width:"40%";
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};

and (with your outstanding mods), here is what I see:

This looks GREAT ...



However, the flaw I cannot seem to get around happens when the browser is narrowed ...



and AFTER Login, here is what I see (first the good) ...



and then the flaw when the browser is narrowed ...



Again, I know I can use "margin-left" to control how far left it goes ... but then when the browser narrows, it hops down and covers up the links right below it. So there is a flaw either way. Unless there is something (or some CSS property) that I'm not considering ... any ideas?

[TheLastSuperman]

Originally Posted by gregmlb

Wow - thank you so much for doing this, TheLastSuperman!!!

I have made the changes, and been playing around with the CSS for toplinks ? specifically margin-left and margin-right. Margin-right (for me) being set at 185px does the trick. As far as margin-left goes, if I leave it in ? then when the window narrows, it causes the login/welcome user section to fall below (and bleed over into the New Posts/Private Messages/FAQ/etc. part of the navbar ? which is bad). If instead I remove the margin-left altogether, there is still some overlapping of text ? but it is more tolerable IMO. Either way ? there is a tragic flaw though ? which I'm not sure there is a solution to. Here is what I have now that is most tolerable. First here is the toplink section in additional.css ...

.
.
.
.toplinks {margin-right: 185px; z-index: 10;}
         width:"40%";
	color:{vb:stylevar toplinks_link_color};
	font: {vb:stylevar header_font};
	text-align:{vb:stylevar right};

and (with your outstanding mods), here is what I see:

This looks GREAT ...



However, the flaw I cannot seem to get around happens when the browser is narrowed ...



and AFTER Login, here is what I see (first the good) ...



and then the flaw when the browser is narrowed ...



Again, I know I can use "margin-left" to control how far left it goes ... but then when the browser narrows, it hops down and covers up the links right below it. So there is a flaw either way. Unless there is something (or some CSS property) that I'm not considering ... any ideas?

Hmm that's what I was afraid of and mentioned in another post about fluid/fixed width...

The only way to bypass this would be to make the style a fixed width... OR remove that What's new and place in in the sub-menu so that removes one more tab then it should just fit barely! As for the remember me well remove it from it's div and place at the end of the global search then it's inline... I do remember the entire search area being in a "wrapper" per say with a certain width so you may need to use firebug to track down the exact css you will need to change if you have major issues come back and post.

That's the only thing that usually "bites" you in regards to style and that's screen resolution and the size you want your site... most prefer a fluid i.e. stretchable style and some others prefer a fixed width, I myself love a fixed width as it's easier to style in regards to css and more .

[Antidepresiv]

Greg my suggestion for all this would be folowing.

For the fields, before a user logs in use the hack from this thread https://vborg.vbsupport.ru/showthread.php?t=238152 , just read up the whole post, otherwise it wont work, make sure you read page 7 and post #95!!!

And for the "after login" problem i would suggest that you get rid of My Profile and Settings, they are useless anyway, when you click on you'r name you go on your profile, and you can tweek settings from navbar links, i think "My profile" and "Settings" was only added for visual immprovement of login fields..

And SuperDude, thank you for you'r help with the <ul>

Best Regards,
AntiDepresiv

[JimTR]

Hi All

I have followed the advice here and ended up with something very close



There are just a couple of things I cannot get my head around
The way of moving the header menu options to the navbar sub menu, as you can see I have a working notifications tab there but if I do the same with the other options they appear between the arcade & quick links tabs for some reason, I am using sections such as

{vb:raw template_hook.navbar_after_community}

to add the required code.

The way of moving the advanced search link to the left of the search box

The way of moving the last login notification to the navbar
e.g
after navbar tabs the following is displayed on the navbar

hello username <P>		{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}} <P>

ok I missed a couple of variable names out but I hope you get the idea

Regards Jim

[gakz]

bump... this thread helped out.. and is amazing.

I ended up removing the information for advanced search (ive never once used advance search my entire life) as well as moved the search box to where the advance search box was.

Moved this code:

PHP Code:

<vb:if condition="$vboptions['enablesearches']">
    <div id="globalsearch" class="globalsearch">
        <form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
            <vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
            <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
            <input type="hidden" name="do" value="process" />
            <span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
            <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="(is_browser('ie') AND !is_browser('ie', 7) AND !is_browser('ie', 8))">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
        </form>
        <ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
        </ul>
    </div>
    </vb:if> 


to after my last template_hook, mine is:

PHP Code:

{vb:raw template_hook.navbar_after_calendar} 


but yours may be a different template_hook


removed this Advanced search:

PHP Code:

<ul class="navbar_advanced_search">
            <li><a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a></li>
        </ul>