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

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!

Donnyboy Donnyboy · Accepted Answer · 2011-03-14T08:36:58

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.

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

1 Answers