Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Remove Search Button and add text to input field

Remove Search Button and add text to input field

Locked

Views: 3,787

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
7 Oct 2008, 8:58 PM
#1
sjk1000 avatar

sjk1000

New Zenner

Join Date:
Sep 2008
Posts:
100
Plugin Contributions:
0

Remove Search Button and add text to input field

Hi all
I'd like to remove the search button and have the word Search as default in the input field that will be overwritten when a user types.

I've had a dig around in the search_header.phps but at my current experience there's too much going on in there and i'm drowning in code i don't reconise yet : )
Any ideas?
Thanks, Steve

8 Oct 2008, 8:46 AM
#2
sjk1000 avatar

sjk1000

New Zenner

Join Date:
Sep 2008
Posts:
100
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

Any suggestions anyone?
: )

9 Oct 2008, 12:12 AM
#3
sjk1000 avatar

sjk1000

New Zenner

Join Date:
Sep 2008
Posts:
100
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

plenty of people reading this. Any suggestions?

9 Oct 2008, 12:53 AM
#4
khopek avatar

khopek

Totally Zenned

Join Date:
Aug 2006
Location:
portlandish, oregon
Posts:
795
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

You mean kind of like I did on my site? If so I may just be able to help you...

Eclectica Clothing - Where Art Meets Fashion

9 Oct 2008, 6:09 AM
#5
sjk1000 avatar

sjk1000

New Zenner

Join Date:
Sep 2008
Posts:
100
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

cool site khopek. Yes, how'd u do that?

9 Oct 2008, 7:34 PM
#6
khopek avatar

khopek

Totally Zenned

Join Date:
Aug 2006
Location:
portlandish, oregon
Posts:
795
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

To change the text:

in /includes/languages/english/YOURTEMPLATE/header.php and find

define('HEADER_SEARCH_DEFAULT_TEXT', 'Input search term and press Enter');

My search bar says 'Input search term and press Enter'...Yours will say something else
Change that text to whatever you want.

Then to remove the button in

/includes/templates/YOURTEMPLATE/sideboxes/tpl_search_header.php

find

. ' <input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />'

and delete it. Be sure to leave the ';' (semicolon) and '}' (curly bracket) at the end of this line in tact or you'll get an error.

Original tpl_search_header.php

<?php /** * Side Box Template * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $ */ $content = ""; $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT); $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id(); 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 . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON); } else { $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 . '\';"') . ' <input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />'; } $content .= "</form>"; ?>

If you want to adjust height, width, or anything else regarding the search bar, you HAVE to do it in this file. You'll see where it says style=" width: 100px;". You can change that to what you want and add other stlye properties to it, such as height, etc...

If you want a background image, like I have, that has to be done in the stylesheet. Mine looks like this:

.navMainSearch input, .navMainSearch input:focus {
background-color: transparent;
background-image:url(../images/searchBg.gif);
background-repeat: no-repeat;
background-position: top right;
border: none;
text-align: right;
}

Hope that helps!

9 Oct 2008, 11:01 PM
#7
sjk1000 avatar

sjk1000

New Zenner

Join Date:
Sep 2008
Posts:
100
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

Fantastic! That worked ... and my next question would have been about the background image.
Well anticipated lol
Thanks for that lot Khopek

To make this thread complete, because of my admin settings, I had to remove both occurrences of the line. ie from before and after the else as highlighted below.
: ), Steve

<?php /** * Side Box Template * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $ */ $content = ""; $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'); $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT); $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id(); 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 . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON); } else { $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 . '\';"') . ' <input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />'; } $content .= "</form>"; ?>
9 Oct 2008, 11:19 PM
#8
khopek avatar

khopek

Totally Zenned

Join Date:
Aug 2006
Location:
portlandish, oregon
Posts:
795
Plugin Contributions:
0

Re: Remove Search Button and add text to input field

Also...and I found this out after changing some of my layout...I had to change my stylesheet for the background image to ID's instead of CLASSES.

so instead of

.navMainSearch input, .navMainSearch input:focus

i had to change it to

#navMainSearch input, #navMainSearch input:focus

Not sure why that changed on me, but just in case I thought I'd let you know.