second searchbox in navbar

[JoergZ]

S O L V E D

Hello together,

after some time absense from the vB-code (obviusly too long absense ) I am working now a little bit on the vB4.

What I want to do is to place a second search box in the navbar, to do direct from there membersearch. (See attached screenshot, that's how i want it).

I tried a little bit this and that, but nothing really works. Don't get me wrong, I don't ask for a complete coded solution, but maybe someone can "bring me on the way" and give me some hints. (The searchobx itself is working, but the position is not correct)

Thanks for your help.


Best regards

J?rg



Edit

I attached a second screenshot, where you can see, what my best result was. The problem is, I can't get the second searchbox left of the original search-box. Currently I add the code for "my" searchbox here:

Template "navbar"

above

<div id="globalsearch">

Edit 2

O.k., leave me alone with the problem and I will solve it

No, seriously, I nearly made it. After creating additionaly CSS-entries, it's working. The only thing is, that the position is now in a fixed distance to the last menu-button. I would like it more, to have it fixed with a special distance to the right searchbox. But that's a small detail without priority.

If someone is interested, I can post how to make the change.

[milsirhc]

I'm interested!

[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