How can I make the Header Search button be a CSS button?

[makehveli]

Very quickly:

Using ZenCart 1.3.9h
Using heavily modified All Business template
Using custom buttons and changed them from .gif format to .png
(not sure if this is relevant, but I might have screwed up a function while doing so, unlikely but still...)

So...

I would like to use the CSS search button on the header when CSS buttons is turned off globally.

I went into a
/includes/templates/YOUR_TEMPLATE/sideboxes/tpl_search_header.php

and changed the code by commenting out the lines for the altnernative when (IMAGE_USE_CSS_BUTTONS) == 'yes') in the if/else statement

and replaced it with a duplicate lines of when (IMAGE_USE_CSS_BUTTONS) == 'yes')

therefore logically the CSS button would be used in the search header if CSS buttons was turned on or off globally

  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="3" 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);
    //$content .= zen_draw_input_field('keyword', '', 'size="6" class="search-header-box" maxlength="30" style="width: 150px" 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;<input type="image" src="includes/templates/all_business/buttons/english/button_search.gif" value="" class="search-header-button" style="width: 75px" />';
  }

did not work, it would display the .png image button in it's place which is very strange because I hadn't even modified the original code to point to the .png file

before commenting out, I tried (IMAGE_USE_CSS_BUTTONS) == 'no') same result.

[rstevenson]

There's no reason why all of your image buttons should look the same, so perhaps you can just change the image being used for the header search button so that it looks the way you want.

Rob

[makehveli]

I don't understand what you mean

"There's no reason why all of your image buttons should look the same"

they don't all look the same, I never said that.

but maybe you can help me out, ultimately I would like to create a rollover affect on the search button,

now I had done it before when the button was a CSS form type, and I placed a background image on it that would change on hover.

but I don't know how to do it with just image buttons.

[makehveli]

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

This is a thread I posted months ago when I was using CSS buttons globally and some people kindly helped.

Now I want to do that same thing, except I was DO NOT want to use CSS buttons globally, just the search button on the header.

[rstevenson]

I assumed, because you wanted to use CSS buttons for just the search button, that you wanted it to have an appearance quite different from the other buttons. That's all I meant by that.

But my suggection still stands: use a graphic button (with a JS rollover effect.) Seems easier than hacking the code to get CSS buttons to work for just one button.

Rob

[makehveli]

fixed, did nothing with the trigger....

changed the input type from "image" to "form"
added some divs to make it easier to work with in CSS.

    $content .= '<div id="searchbar_box_wrapper">' . zen_draw_input_field('keyword', '', 'size="6" class="search-header-box" maxlength="30" 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 . '\';"') . '</div>' . '<div id="searchbar_button_wrapper"> &nbsp;<input type="submit" value="" class="search-header-button" </> </div>';
  }