Moving the Search Box into the Header of your new osCommerce Template
Step 1: Create a new file named header_search.php containing the following code:
<?php
?>
Save this into the folder /includes/boxes/
Step 2: Open up /includes/boxes/search.php and copy the following lines of code:
$info_box_contents = array();
$info_box_contents[] = array('text' =>
BOX_HEADING_SEARCH);
new SideinfoBoxHeading($info_box_contents,
false, false);
$info_box_contents = array();
$info_box_contents[] = array('form' =>
tep_draw_form('quick_find', tep_href_link
(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',
false), 'get'),'align' => 'center','text' =>
tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-
30) . 'px"') . ' ' . tep_hide_session_id
() . tep_image_submit('button_quick_find.gif',
BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .
'<br><a href="' . tep_href_link
(FILENAME_ADVANCED_SEARCH) . '"><b>' .
BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');
Step 3: Paste the code you copied in step 2 into the file you created in step 1, directly before the ?>
Step 4: Code changes to the new file (header_search.php)
Find:
$info_box_contents = array();
$info_box_contents[] = array('text' =>
BOX_HEADING_SEARCH);
Replace with:
echo '<strong>' . BOX_HEADING_SEARCH .
'</strong><br>';
Find:
new SideinfoBoxHeading($info_box_contents,
false, false);
Remove it!
Find:
$info_box_contents = array();
Remove it!
Find:
$info_box_contents[] = array('form' =>
tep_draw_form('quick_find', tep_href_link
(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',
false), 'get'),'align' => 'center','text' =>
tep_draw_input_field('keywords', '', 'size="10"
maxlength="30" style="width: ' . (BOX_WIDTH-
30) . 'px"') . ' ' . tep_hide_session_id
() . tep_image_submit('button_quick_find.gif',
BOX_HEADING_SEARCH) . '<br>' . BOX_SEARCH_TEXT .
'<br><a href="' . tep_href_link
(FILENAME_ADVANCED_SEARCH) . '"><b>' .
BOX_SEARCH_ADVANCED_SEARCH . '</b></a>');
Change it to:
echo tep_draw_form('quick_find', tep_href_link
(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL',
false), 'get');
echo tep_draw_input_field('keywords', '',
'size="10" maxlength="30" style="width: ' .
(BOX_WIDTH-30) . 'px"') . ' ' .
tep_hide_session_id() . tep_image_submit
('button_quick_find.gif', BOX_HEADING_SEARCH);
echo '</form>';
Find:
new SideinfoBox($info_box_contents);
Remove it!
Step 5: Open up includes/header.php and find this line of code:
<td class="searchboxarea"> </td>
Change it to:
<td class="searchboxarea" align="right"><?php
require(DIR_WS_BOXES . 'header_search.php'); ?
></td>
Step 6: Open up stylesheet.css and find the following code:
.searchboxarea {
background-image: url(images/logo_2.jpg);
width: 455px;
height: 79px;
}
Change it to:
.searchboxarea {
background-image: url('/images/logo_2.jpg');
width: 455px;
height: 79px;
vertical-align: top;
padding-right: 5px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
}
Overview:
What we have done is recode the Search Box to suit our design and placed it into the Header Area of our new osCommerce template. Now we don't need the Search Box in the Left Hand Side Column, so open up /includes/column_left.php and remove the following code:
require(DIR_WS_BOXES . 'search.php');
You'll also notice that we still have that awful Magnifying Glass Icon. Let's replace that for starters! Create yourself a nice Search icon, name it button_quick_find.gif and upload it to:
includes/languages/english/images/buttons/
You'll need to also save this as the same name into each of your other languages (German, Spanish etc) if you use multiple languages.
The Header Area of our new osCommerce Template is now fully completed, and your store should now look somewhat like this:
