second searchbox in navbar

[JoergZ]

Originally Posted by milsirhc

I'm interested!

O.k., here we go.

In template "navbar"

find

<div id="globalsearch">

add above

 <div id="globalsearchmbr">
  <form action="memberlist.php?do=process" method="post" id="navbar_member_search">
   <input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
   <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
   <input type="hidden" name="do" value="getall" />
   <span class="textboxcontainer"><span><input type="text" value="" name="ausername" class="textbox" /></span></span>
   <span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search.png" name="submit" onclick="document.getElementById('navbar_member_search').submit;" /></span></span>
  </form>
  <ul class="navbar_advanced_search">
   <li><a href="memberlist.php?{vb:raw session.sessionurl}do=search">{vb:rawphrase advanced_search}</a></li>
  </ul>
 </div>

In template "vbulletin-chrome.css"

find

#globalsearch {

add above

#globalsearchmbr {
 position:absolute;
 width:180px;
 left:550px;
 {vb:stylevar right}: {vb:math {vb:stylevar padding}*2};
 bottom: 0;
 float: {vb:stylevar right};
 clear: {vb:stylevar left};
 text-align:{vb:stylevar right};
 line-height: 1.0em;
 display:block;
}
 
#globalsearchmbr .textboxcontainer {
 height: {vb:stylevar navbar_tab_size.height}px;
 border-{vb:stylevar left}:{vb:stylevar navbar_tab_border};
 display:inline-block;
 float: {vb:stylevar left};
 text-align:center;
}
#globalsearchmbr .textboxcontainer span {
 border-top: {vb:stylevar navbar_tab_bevel};
 border-{vb:stylevar left}: {vb:stylevar navbar_tab_bevel};
 display: inline-block;
 height: {vb:math {vb:stylevar navbar_tab_size.height}-4}px;
 padding-{vb:stylevar left}: 2px;
 padding-{vb:stylevar right}: 2px;
 padding-top: 3px;
 margin-bottom: 1px;
 width: 147px;
        _width:140px; /* ie6 hack */
}
#globalsearchmbr input.textbox {
 width: 120px;
}
#toplinks form input.loginbutton {
 font-size: {vb:math {vb:stylevar font.fontSize}-2}px;
 padding: 0 {vb:math {vb:stylevar padding}/2};
 background-color:  {vb:stylevar toplinks_input_login_backgroundColor};
 border:solid 1px {vb:stylevar heavy_border.borderColor};
}
#globalsearchmbr .buttoncontainer {
 height: {vb:stylevar navbar_tab_size.height}px;
 border-{vb:stylevar left}:{vb:stylevar navbar_tab_border};
 display:inline-block;
 border-{vb:stylevar right}:{vb:stylevar navbar_tab_border};
 width: 25px;
 overflow: hidden;
 float: {vb:stylevar right};
}
#globalsearchmbr .buttoncontainer span{
 border-top: {vb:stylevar navbar_tab_bevel};
 border-{vb:stylevar left}: {vb:stylevar navbar_tab_bevel};
 height: {vb:math {vb:stylevar navbar_tab_size.height}-3}px;
 padding-{vb:stylevar left}: 4px;
 padding-top: {vb:math {vb:math {vb:stylevar navbar_tab_size.height}-21}/2}px;
 display:inline-block;
}
#globalsearchmbr .searchbutton {
 border: 0;
 padding: 0;
 width: 22px;
 margin-top: -2px;
 margin-{vb:stylevar left}: -2px;
}

To change the position of the new box change more left or right, change the parameter width here:

#globalsearchmbr {
 position:absolute;
 width:180px;

Known issues:

• New searchbox is fixed to the left menu-buttons, not to the right searchbox. That has the effect, when you resize your browser-window and make it very small, there is a point that the original searchbox and the new searchbox are overlayed.
• In the CMS the white input-box for member-search is bigger (some pixels higher) than in the forum. But that's probably a beta-problem of vb4 and will disappear when we come closer to vb4 gold

Suggestions how to fix the box relative to the right searchbox are welcome


J?rg