Toplinks Beside Search Bar 0.1

[ArtAttack]

This modification moves the toplinks to the left of the search bar

https://vborg.vbsupport.ru/external/2010/01/54.png


In the header template, find and delete:
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li>{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</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>
<div class="popupbody popuphover">
<p>{vb:rawphrase no_new_messages}</p>
<p><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></p>
</div>
</li>
</vb:if>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</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="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>
</ul>
<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>
</ul>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form 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 default-value" 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>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>
<input type="password" class="textbox default-value" name="vb_login_password" id="navbar_password" size="10" tabindex="102" onfocus="this.style.color='black';" />
<input type="submit" class="loginbutton" value="{vb:rawphrase log_in}" tabindex="104" 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" tabindex="103" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" /> {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>
</vb:if>
</div>


In the navbar template, find
<div id="navbar" class="navbar">


and add below it:
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li>{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</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>
<div class="popupbody popuphover">
<p>{vb:rawphrase no_new_messages}</p>
<p><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></p>
</div>
</li>
</vb:if>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</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="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>
</ul>
<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>
</ul>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form 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 default-value" 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>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>
<input type="password" class="textbox default-value" name="vb_login_password" id="navbar_password" size="10" tabindex="102" onfocus="this.style.color='black';" />

<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" /> {vb:rawphrase remember_me}</label> <input type="submit" class="loginbutton" value="{vb:rawphrase log_in}" tabindex="104" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />

</div>


In vbulletin-chrome.css, find:
.toplinks {
position:absolute;
{vb:stylevar right}:{vb:math {vb:stylevar padding}*2};
top:0;
color:{vb:stylevar toplinks_link_color};
font: {vb:stylevar header_font};
text-align:{vb:stylevar right};
}


Replace with:
.toplinks {
position:absolute;
{vb:stylevar right}:{vb:math {vb:stylevar padding}+180};
color:{vb:stylevar toplinks_link_color};
font: {vb:stylevar header_font};
text-align:{vb:stylevar right};
}


Find:
.toplinks ul.nouser li a{
position: relative;
padding: 6px {vb:stylevar padding} 0 {vb:stylevar padding};
background: {vb:stylevar navbar_tab_background.backgroundColor};
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
height:{vb:math 8px + {vb:math {vb:stylevar font.fontSize}-1}};
font-weight:bold;
display: block;
font-size:{vb:math {vb:stylevar font.fontSize}-1}px;
}


Replace with:
.toplinks ul.nouser li a{
position: relative;
padding: 6px {vb:stylevar padding} 0 {vb:stylevar padding};
height:{vb:math 8px + {vb:math {vb:stylevar font.fontSize}-1}};
font-weight:bold;
display: block;
font-size:{vb:math {vb:stylevar font.fontSize}-1}px;
}


Find:
.toplinks .logindetails {
padding: 0 {vb:stylevar padding};
background: {vb:stylevar navbar_tab_background.backgroundColor};
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar left}-radius: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}:{vb:stylevar border_radius};
-webkit-border-bottom-{vb:stylevar right}-radius:{vb:stylevar border_radius};
height: {vb:stylevar navbar_tab_size.height}px;
}


Replace with:
.toplinks .logindetails {
padding: 0 {vb:stylevar padding};
height: {vb:stylevar navbar_tab_size.height}px;
}


Find:
.notifications {
font-size:{vb:stylevar small_fontSize};
color: {vb:stylevar toplinks_link_color};
padding:8px 2px 6px 0;
-moz-border-radius-bottom{vb:stylevar left}: 5px;
-moz-border-radius-bottom{vb:stylevar right}: 5px;
}


Replace with:
.notifications {
font-size:{vb:stylevar small_fontSize};
color: {vb:stylevar toplinks_link_color};
padding:3px 2px 6px 0px;
-moz-border-radius-bottom{vb:stylevar left}: 5px;
-moz-border-radius-bottom{vb:stylevar right}: 5px;
}


Find:
.toplinks .notifications a.popupctrl {
padding-top: 8px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_background_notify.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) {vb:stylevar right} center no-repeat ;
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}: {vb:stylevar border_radius};
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}


Replace with:
.toplinks .notifications a.popupctrl {
padding-top: 3px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_background_notify.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) {vb:stylevar right} center no-repeat ;
-moz-border-radius-bottom{vb:stylevar left}: {vb:stylevar border_radius};
-moz-border-radius-bottom{vb:stylevar right}: {vb:stylevar border_radius};
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}


Find:
.toplinks .notifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl:hover {
padding-top: 8px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_tab_background.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center;
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}


Replace with:
.toplinks .notifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl:hover {
padding-top: 3px;
padding-bottom: 3px;
padding-{vb:stylevar left}: 4px;
padding-{vb:stylevar right}: 12px;
background: {vb:stylevar navbar_tab_background.backgroundColor} url({vb:stylevar imgdir_misc}/arrow.png) no-repeat {vb:stylevar right} center;
_background-image:url('{vb:stylevar imgdir_misc}/arrow.gif');
}


Find:
.toplinks .notifications a.popupctrl:hover {
padding-top: 8px;
}


Replace with:
.toplinks .notifications a.popupctrl:hover {
padding-top: 3px;
}


Updates
Version 0.1 - Fixed Notifications

[CrosseyedGamer]

how about moving the search bar up to the top links?
then making the navbar fit across 100%.
Possible?

[TheSupportForum]

this is a bit pointless as when people add more navbar tabs it wil be in the way

[CrosseyedGamer]

this is a bit pointless as when people add more navbar tabs it wil be in the way


I agree with that and is why I asked about doing the reverse. Move the search bar up top to the right or left of everything so you free up more room on the navbar itself.

Anyone now how to do that?

[Trumpetrhapsody]

What happens once you log in? Do all the options get put into a drop down menu?

If not it seems like that bar would be very cluttered, additions or not.

[MalluParadise]

The following error occurred when attempting to evaluate this template:
Unclosed Tag
This is likely caused by a malformed conditional statement. It is highly recommended that you fix this error before continuing, but you may continue as-is if you wish.i am getting error likewhen i try to add this step
In the navbar template, find
PHP Code:
<div id="navbar" class="navbar">

[mandingo]

Had to get rid of this. Was a disaster in IE and ended up with too many tabs. Loved the way it looked in FF but ran out of room on smaller resolutions.

[thom]

how about moving the search bar up to the top links?
then making the navbar fit across 100%.
Possible?

this would be great if some one could fix this

[CrosseyedGamer]

It's rather interesting that no one had ever posted a way to move the search box around. I posted on the main site asking for that and got nothing there either. Maybe it just isn't possible.

I don't have the correct know how to make it happen as when I tried, my header got all messed up.

[emath]

any update for vb4.0.4 ?

because now in vb4.0.4 there is also this code in the header (between the toplinks div) :

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

[BRotondi]

Thanks for posting your Mod! Do you know Andreas' TMS (https://vborg.vbsupport.ru/showthread.php?t=152931)? It automates all these changes. (Works nice with 3.8.x, 4.x)

1. Create the needed Template Modifications
2. Export as xml for everyone who already installed TMS
3. Export as Text-Only to achieve the instructions you inserted above.

Regards, Bruno
(TMS German here (http://www.vbulletin-germany.org/showthread.php?t=24&page=999))

[WriteToEnlight]

Does anyone know how to move the toplinks to the left side in the same position as it is defaulted instead of the right side?