Mini Mods - Navbar Search Form/Input Box with Advanced Options Dropdown

This is a quick template mod that roughly emulates the search box here at vB.org, without the forum select dropdown.

I saw a few mods somewhat like it but none with the input box, and like many people here once vB.org released the new skin, I had to have the search box. So after a bit of coding and hacking around, here's the way I did it.

Time to Install: 2 Minutes
Difficulty: Easy
Template Mods: 1
Demo: http://www.sevenstring.org
Login: guest/guest (unregistered search is disabled)

AdminCP -> Style Manager -> Edit Templates -> navbar

Find:

<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
		</if>
	</td>

Add directly after:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

Optional: Remove the old search link from your navbar.

Simply comment out the search text, like so. I'm sure there's a better way to accomplish this, but that's how I pull it off on my site. Any input appreciated.

<!-- $vbphrase[search] -->

Screenshot on default style:



And on my own:


Update 1.01

I've changed this to be a bit more useful, as it will now submit the query itself to search.php. I had it setup differently, but I think more people would prefer it this way. If you've already installed, just replace the template code.

Update for 3.7 RC4 or Gold for security token

Add the colored code:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" 

class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

[eNforce]

Thanks, working on my board.

Question though!

Instructions for removing the old Search link from the navbar? Every time I try it removes the drop down arrow from your hack.

Hm, I haven't looked into that because I prefer to keep the old link as well. I'll take a peek at it tomorrow and see what I can come up with, if someone else doesn't get it first.

Edit:

Actually, though probably not the cleanest way to do it, just comment out the existing search text.

<!-- $vbphrase[search] -->

It'll remove the text, and there will just be a blank, zero sized table cell in it's place.

[The Bish]

Excellent! Installed and waiting for a way to rid myself completely of the Search link while maintaining the arrow.

[soletrader]

The dropdown doesnt work

In which browser? I've tested it in IE, FF, Maxthon and Opera.

Updated this to submit the full query (see first post).

[DiSpy]

The search box works just fine... but the dropdown arrow isn't working.

One change i'd like to suggest tho...

Instead of:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="http://www.sevenstring.org/forum/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:100px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

I used:

<!-- Search Box -->
<td valign="middle" class="alt1"> <div style="white-space:nowrap">
<form action="$vboptions[bburl]/search.php" method="post">
<input type="hidden" name="s" value="" />
<input type="hidden" name="do" value="process" />
<input type="hidden" name="showposts" value="0" />
<input type="hidden" name="quicksearch" value="1" />
<input type="text" style="width:95px;" class="bginput" name="query"/>
<input style="font: bold 10px Arial" type="submit" class="button" value="Search" /></form>
<a style="text-decoration:none" href="search.php" accesskey="4" rel="nofollow" id="navbar_search" class=""></a>&nbsp;
</div></td>
<!-- /Search Box -->

[The Bish]

What does this change in code do?

[DiSpy]

In case you ever move your forums, or whatever... it uses a variable to get the url of the search page instead of hard coding... just better coding, that's all.

<form action="$vboptions[bburl]/search.php" method="post">