Converting a CSS styled search box to use in a Drupal theme? - drupal

Question

I'm using Drupal 6, working on converting my static HTML and CSS files into a Drupal theme. So far most has gone well. How would I theme the search form though for a Drupal 6 theme?
What I'm confused on is, do I use the template.php file in conjunction with the
search-theme-form.tpl.php file? Can I import my style.css sheet in the search-theme-form.tpl.php file? or can I actually just paste in my CSS directly?
I've uploaded the search box here so you can see how it behaves and looks. http://nside-elite.techiedesign.net/testsearchform/testsearchform.html
Here is my original CSS:
#searchwrap {
width: 330px;
height: 51px;
margin-right: auto;
position: relative;
margin-left: auto;
top: 150px;
}
#searchboxwrapper {
height: 28px;
float: left;
width: 277px;
}
#searchbuttonwrapper {
width: 53px;
height: 28px;
float: right;
}
.preload {
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 1px;
visibility: hidden;
overflow: hidden;
}
.searchbox {
background-position: top;
background-color: #515151;
background-image: url('Images/searchbox-shadow.png');
border: 2px #333333 solid;
outline: none;
background-repeat: repeat-x;
height: 20px;
margin-right: 3px;
float: right;
margin-top: 1px;
width: 250px;
text-indent: 5px;
font-size: 10pt;
color: #1D1D1D;
font-style: italic;
font-family: Arial;
}
.searchbutton {
background: url('Images/go-button.png');
background-repeat: no-repeat;
cursor: pointer;
width: 53px;
height: 28px;
border: 0px;
}
.searchbutton:hover {
background: url('Images/go-button-gifsmooth.gif');
background-repeat: no-repeat;
border: 0px;
}
.searchbutton:active {
background: url('Images/go-button-pressed.png');
background-repeat:no-repeat;
border: 0px;
}
.searchbox:focus {
border: 2px;
border-color: #6B6B6B;
border-style: solid;
}
And HTML:
<div id="searchboxwrapper">
<input name="Text1" type="text" class="searchbox" value="Search Nside Elite" onfocus="if(this.value == 'Search Nside Elite'){this.value = '';this.style.fontStyle='normal';this.style.color='#BFBFBF';}" onblur="if(this.value == '') {this.value='Search Nside Elite';this.style.fontStyle='italic';this.style.color='#222222'}" />
</div>
<div id="searchbuttonwrapper">
<input name="searchbutton" type="button" value="" title="Search" class="searchbutton" />
</div>
No one at the Drupal forums would give me the time of day. I'd appreciate any help you can offer. I'm not familiar with PHP.
Thanks!

Answer 1

You definitely do use template.php, thats where you prepare the variables for print in the .tpl.php file. In this case you want to add a preprocess function onto the search_theme_form hook. To attach your new preprocess function to the theme hook write a function in template.php like this:
function MYTHEME_preprocess_search_theme_form(&$variables) {
//do stuff
}
You will want to clear cache before any changes show up. This is where you can add things to be printed on the template.
function MYTHEME_preprocess_search_theme_form(&$variables) {
$variables['whatever'] = 'hi there';
}
Later at the template you can call this by writing print $whatever; and it will print the value. Usually though, I don't change the search_theme_form.tpl.php so I don't bother redeclaring it in my theme and use drupal's default.
Here is an example of me adding my own preprocess function to search_theme_form in order to remove the stupid label on the form element as well as have the textfields default value disappear on focus.
function MYTHEME_preprocess_search_theme_form(&$variables) {
unset($variables['form']['search_theme_form']['#title']);
unset($variables['form']['search_theme_form']['#printed']);
$variables['form']['search_theme_form']['#value'] = 'Search';
$variables['form']['search_theme_form']['#attributes'] = array('onfocus' => "if (this.value == 'Search') {this.value = '';}" );
$variables['search']['search_theme_form'] = drupal_render($variables['form']['search_theme_form']);
$variables['search_form'] = implode($variables['search']);
}
I hope this answers some of your questions and points you in the right direction.