Editing the style of the search box

[Dunk]

I opened a topic about this almost a year ago but time restraints meant I never resolved it. So here goes again...

I want to add some css styles to the search box located in the sidebox to try and emulate Apple's OSX style search box which has rounded ends, you can see an example of what I want to recreate in Zen here.

The search bar above requires 3 stylesheets, 2 of which I'm calling from html_header.php and the third is called through a script named applesearch.js (applesearch.js just adds some functionality/cross browser compatibility, in case you're wondering) which I'm also calling from html_header.php as follows...

	<link rel="stylesheet" type="text/css" href="http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/css/default.css" id="default"  />
	<link rel="stylesheet" type="text/css" href="http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/css/dummy.css" id="dummy_css"  />

	<script type="text/javascript" src="http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/js/applesearch.js"></script>

The CSS is as follows...

applesearch.css (called from within applesearch.js)

#searchform {
	background: url('http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/images/srch_l.gif') 0 0 no-repeat;
	padding-left: 19px;
	margin:0px 19px 0 0px;
	float:left;
	}
#searchform .sbox_r {
	background: #fff url('http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/images/srch_r.gif') 0 0 no-repeat;
	float: left;
	width: 19px;
	height: 19px;
	}
#searchform .sbox_r_f2 {
	background: #fff url('http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/images/srch_r.gif') 0 0px no-repeat;
	float: left;
	width: 19px;
	height: 19px;
	}
#searchform input {
	background: #fff url('http://www.tradersupplies.co.uk/includes/templates/template_tradersupplies/images/srch_bg.gif') 0 0 repeat-x;
	float: left;
	border: 0;
	height: 19px; 
	width: 132px;
	padding: 3px;
	font: 11px/13px arial;
	color: #000;
	margin:0px 0px 0 0px;
	}

default.css

	#wrapper {
		font-size: 1.2em;
		margin: 0 auto;
		text-align: left;
		width: 490px;
		}
	
	#content {
		clear: both;
		}

/* Search Form //----------------------------------------------------------*/

	#searchform {
		margin: 0;
		padding: 0;
		}
	#searchform fieldset {
		margin: 0;
		padding: 0;
		border: 0;
		}
	#searchform label { 
		color: #999; 
		display: none; 
		}
	#searchform input { 
		width: 180px; 
		color: #222; 
		}
	#searchform #submitquery { 
		display: none; 
		}

/* Misc Classes //----------------------------------------------------------*/

	.clear { 
		clear: both; 
		margin: 0; 
		padding: 0; 
		}

The last stylesheet, dummy.css, is actually empty but it doesn't affect anything so I won't bother explaining why here.

All the css is used to style the following form...

		<form id="searchform" action="NOWHEREYET.php">
		 <fieldset>
		  <label for="query">Product name</label>
		  <input type="text" name="query" id="query" value="" />
		  <input type="submit" name="submitquery" id="submitquery" value="Go" /> 
		 </fieldset>
		</form>

Sorry, I know this is pretty obvious stuff, I just want to make sure y'all understand where I'm coming from.

So my question is, how do I integrate all this into the zen search box?

I guess I need to start with tpl_search.php? This seems to control the sidebox search box.
The first problem I see is that the <form> tag which I need to apply the "id" attribute to in order to apply the style to the form has been replaced by the zen_draw_form() function which I'm guessing zen uses to set up the whole form. But without that <form> tag how can I apply the style to the form?

Wow... this is turning into a long post, but if anyone has any idea how I can approach this it'd be much appreciated, there must be a way!

[mprough]

This is the Cherry Zen template from Sage http://www.wilsoncellular.us/

The search box has the same look you are looking for... Its far less complicated than you think.. I would download the template and see how it works.

~Melanie

[Dunk]

Thanks for the info Melanie, I'll take a look in the morning!