Customizing the Drupal 6 LiteJazz Theme - Searchbox Reposition

I would like to reposition the site's searchbox so that it is above and separated from the masthead. The following exercise shows how to achieve this with Drupal 6. Before you start, please check:

  • You have enabled the search module
  • You have disabled the search facility in the Beezee theme

Please ensure you have completed those steps before continuing.

Ready? Cool! Ok, first we need to create a new region above the masthead. To do this, edit the beezee.info file and replace the regions definitions with the regions listed below.

regions[sidebar_left] = Left Sidebar
regions[sidebar_right] = Right Sidebar
regions[content_top] = Content Top
regions[content_bottom] = Content Bottom
regions[search_bar] = Search Bar
regions[header] = Header
regions[suckerfish] = Suckerfish Menu
regions[user1] = User 1
regions[user2] = User 2
regions[user3] = User 3
regions[user4] = User 4
regions[user5] = User 5
regions[user6] = User 6
regions[footer_region] = Footer

Now we need to edit the theme's page.tpl.php file. Open this in your favourite editor and add the reference to our new region. You will need to scroll down until you locate the div id after the body section. Add the search-bar div id code including the closing /div and the php print statement.
  <div id="page">
    <div id="search-region">
      <div id="search-bar">
        <?php print $search_bar; ?>
      </div>
    </div>

Now we need to edit the style.css file to include the search-bar and search-region tag.
#search-region {
  background-color:black;
  overflow:hidden;
  width:100%;
}

#search-bar {
  position: relative;
  float: right;
}

You may now be thinking the job is done. Regrettably not - you will see (or barely see) the text "search this site" has practically merged into the black background of the search-bar. That's bad news because the colour is set by the 'form-item' element, and that will be used elsewhere on most sites so cannot be changed.

Nothing else for it, we'll have to modify the search box itself and change that dratted form-item reference. However, that in itself isn't too difficult. First, copy the search block template file from the search module directory to the theme directory, changing the hyphens to underscores at the same time, so:

$ cp modules/search/search-block-form.tpl.php sites/all/themes/beezee/search_block_form.tpl.php

Now your theme will use this template to output the search box. If you look inside the template file, you will see a simple 'print $search_form;' PHP statement. So we need to edit the contents of this string ready for output. Replace the actual CSS and PHP code (not the comments text) with the following:
<div class="container-inline">
  <?php print str_replace('form-item', 'search-form-item', $search_form); ?>
</div>

You will see a reference to search-form-item in the above. That tag needs to be added to the CSS code. So edit the style.css, locate the .form-item tag and underneath that add:
.search-form-item label {
  font-size: 1em;
  color: #fff;
}

Finally we are done - or we will be once the cache is rebuilt. This can be found by navigating to admin/settings/performance and clicking the 'clear cached data' button. A little trickier to think of a solution than I thought it would be, but quite easy to implement and you should have no difficulty replicating my steps.