Customizing The Search Box?

[Ambitions]

In the header of my site i have the search field, i would like to customize it in the following way:

Change the base colour
Change the border colour
Replace the button with my own
Re-size width

How would i go about doing this?

(My website http://www.clickpurchase.co.uk) incase neccessary.

[haredo]

Take a look at this thread:

http://www.zen-cart.com/forum/showthread.php?t=68179

Another helpful tip in google search this way:

site:www.zen-cart.com customize search button

To change the width and wording in the Search box:

Search Box
A. Change Box Size in Search Box
1. includes/ templates/ override folder/ sideboxes/ tpl_search_header.php
1. line 17
2. width= 100 to 135
3. line 19
4. width = 100 to 135
5. ftp the file

B. Change Wording in Search Box
1. includes/ languages/ english/ header.php
1. Line 28
2. ftp to: includes/ languages/ english/ your template/ header.php

[BigAl49]

Does anyone have the code and or image to change the Search Button to a Magnifying Glass that they would be willing to share??

I hope the answer is -

But I will understand if it is -

Thanks for thinking about it.

BigAl

[haredo]

This might help:

http://www.google.com/images?q=magni...N&hl=en&tab=wi

[haredo]

This should fix you up on how to change the button to an image:

http://www.zen-cart.com/forum/showthread.php?t=75168

[BigAl49]

Thanks, I'll give it a try tomorrow and let you know how it goes.

Al

[haredo]

This will help you:

includes/ templates/ your_template/ sideboxes/ tpl_search_header.php

From here: } else {

Replace with this:

} else {
$content .=
'<table border="0" cellpadding="0" cellspacing="0">
<tr>
'.'<td valign="middle">';
$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') .'</td>'.'<td>'. '&nbsp;<input type="image" src="./images/button_search.gif" value="" />' .'</td>'.'</tr></table>';
}

$content .= "</form>";
?>

Now it is time to create an image (EX: 20px X 20px) and upload the magnifiying glass image
includes/ templates/ your_template/ buttons/ english/ button_search.gif
And you are finished refresh your home page..

Now will globally change every search button, so if you want to only customize the header and not the sidebox at the same time.

1. change this:
2. src="./images/button_search.gif" to this:
3. src="./images/button_header_search.gif"
4. and create a new button with this name also upload to your_template/ buttons/ english

[BigAl49]

Just got around to having the time to play with that.

Now the image space has a red x

Any ideas what could be causing it?

I put the code in tpl_search_header.php
Uploaded the image and now nothing.

Any possibility the code has any mistakes, or is it me again???

[haredo]

Please post the code back to me you used..
What is the name of the image you uploaded????

[BigAl49]

Here is the code.

if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
} else {
$content .=
'<table border="0" cellpadding="0" cellspacing="0">
<tr>
'.'<td valign="middle">';
$content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') .'</td>'.'<td>'. '&nbsp;<input type="image" src="./images/button_mag.gif" value="" />' .'</td>'.'</tr></table>';
}

$content .= "</form>";
?>

I named it button_mag.gif.

Thanks again for the help.