Bud's Tech Shed

Artisteer makes no provision for placing the search box anyplace other than the sidebar. I searched through all the themes I had collected and found a technique that worked quite well. I just needed to add a new DIV with the search code, some CSS for style/placement and I was ready to roll.

It doesn’t matter if our nav bar is above or below the header. The only down side is we’ll be losing about 25% of the width of the nav bar for the search box.

Find this chunk of code in your header.php file. Yours may not look identical, the code seems to vary slightly by version.

<div class="nav">
    <ul class="artmenu">
        <?php art_menu_items(); ?>
    </ul>
    <div class="l"></div>
    <div class="r"><div>
        </div>
    </div>
</div>

In my case I needed to place the additional code in the class=”l” section. Anyway what you need to do is add this bit of code into the above code block…

<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->

So that we have this…

<div class="nav">
<div style="width:78%;float:left;">
	<ul class="artmenu">
		<?php art_menu_items(); ?>
	</ul>
</div>
    <div class="l">
<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->
    </div>
    <div class="r"></div>

</div>

We also make add a DIV around the “artmenu” with some css to shorten it up so that it doesn’t cover the search box. See lines 2 and 6 above.

All that’s left is to give it some style to match our theme. Just drop the following code in your style.css file…

/* Search */
.nav-search	{
float:right;
width:auto;
margin-top:6px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

.nav-searchbox	{
background:#FFF !important;
color:#000000;
font-weight: normal;
padding:2px 0px 2px 2px;
margin:0 2px 0 10px;
border:1px solid #6B6B6B;
display:inline;
width:140px;
}

#searchbutton	{
font-weight:normal;
background: #7B9B7E !important;
color:#000;
margin:0;
padding:1px 2px 1px 2px;
border:1px solid #000000;
display:inline;
width:auto;
cursor:pointer;
}

That’s about it. You should now have a search box in your nav bar. You’ll need to modify the background and border colors in the CSS to match your theme.

If your not using it already I highly recommend running Firefox with the Firebug add-on. You can inspect every element on the page and you can even temporarily modify the CSS to see how it will affect your layout before you make changes. I’d be lost without it.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranking, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.