Wow, it's been a long time since I posted anything in this blog. This is a clear indication of how busy I've been recently helped other people to resolve their online trading issues, and also moving house, which has kept me busy away from my computer for a while too.

OK then, looking at the hits from search engine results on this blog, I get some new ideas for customisation tips and tricks. Here's the first one - how to add a search box to the header of your site (or anywhere else for that matter).

This is actually quite a simple thing to pull off - simply we need a text box for the search criteria, a button to launch the search, and to point the action of the thing at the right script file.

So, having located the place in the code where you want to place the search box (in header.php for instance, if you want it in the header), put in the following code:

<form action="advanced_search_result.php" method="GET">
<input type="text" name="keywords">
<input type="submit" value="Search!">
</form>

This should now do the job, but probably won't look very pretty. You can add some styling to this new element more easily if you first enclose it in a div element:

<div id="search_box">
<form action="advanced_search_result.php" method="GET">
<input type="text" name="keywords">
<input type="submit" value="Search!">
</form>
</div>

Now, let's get busy with some styling. Add the following to your stylesheet.css:

#search_box {
}

#search_box input {
}

These will affect the styling of the enclosing div and the inputs (text box and submit button) respectively. So you could so something like:

#search_box {
background: #ccc;
border: 1px solid #000;
}

#search_box input {
border: 2px solid #aaa;
}

to put lines around your box/button and have the whole thing put inside a coloured/bordered box.

Clearly, there's a lot more you can do with this, including using an image instead of a button, or colouring the button itself separately from the text input box, but I'm intending to cover CSS styling in depth in this article.

To see such a search box in action, have a look at a CRE Loaded site I put together recently: http://www.sriremotetoys.co.uk/ (not yet live at the time of writing). You should also be able to get at the stylesheet for this project, but for the lazy amongst you, here are the relevant bits:

#header_search {
margin-top: 15px;
text-align: right;
padding-right: 20px;
font-family: tahoma, verdana, arial;
font-size: 12px;
color: #21EEFA;
font-weight: bold;
}

#header_search input {
border: 1px solid #21EEFA;
}

In this case, most of the CSS effort was focussed on getting the search box to appear in the right place within the header area.