Adding a search floater bar to your theme

Adding a Search Floater Bar to your CSS Drupal Theme

Today, I added the search floater to run Drupal. A search floater is the search box you see up in the upper right corner of this website. By default if you enable the Search block in Drupal you can add it to a region. For example it could be added to the left content bar. However, I don't like this very much since it takes up a bunch of room. Instead I wanted the search box to float in the upper right of every page.

Adding this was pretty easy. here is the code I added to the page.tpl.php file

php if ($search_box): ?>

php endif; ?>

I added this in my main header div. If you notice I check to see if $search_box is true. This is true if the site administrator has checked the Search box check box in the Theme configuration page (Adminster -> Site Building -> Themes -> Configure).

If the admin checked this box then we will add a div with the id of search-floater and then we will print the $search_box variable. This variable holds the correct HTML to output when we want to show the search box. Its the same variable that the Search Block uses.

All thats left is to correctly set the CSS styles for our box. Obviously this would be different depending on what theme your using. When I wrote this tutorial I was using a modified version of the Sky Blue theme so I added this to the styles.css file

/* Top Search Form settings */
#search-floater {
padding-bottom: 5px;
position: relative;
float: right;
margin-top: 0px;
width: 205px;
z-index: 2;
}

UPDATE: If you notice, now I have a fully themed search bar. It is all done with CSS - like before. The css is a little more complicated. I won't go into all the details but the trickiest part was getting the search button to look right in both Firefox and IE. After reading this post at the drupal.org forum it was a snap. Here is the code I used to theme the submit button.

#header #search #edit-submit
{
background-color: transparent;
border: none;
background-image:url(images/search_submit.gif);
background-repeat: no-repeat;
vertical-align: middle;
height: 28px;
width: 41px;
text-indent: 100px;
word-spacing: 10em;
text-align: right;
cursor: pointer;
left: -20px;
}