Customizing header search box

[Sherry Two]

I'm trying to customize the search header box, like changing the color of the default text or adding an image button (magnyfing glass) instead of the input submit button

I'm working on the tpl_search_header.php file of my template but can't manage.
Any suggestions?

thanks

[Sherry Two]

In the tpl_search_header.php I made the necesary changes, due to a bug, so if I don't use Css Buttons, ie Css Buttons 'no', i can see the image that i want and it shows perfectly.

  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_LUPA_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 . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_LUPA_SEARCH,HEADER_SEARCH_BUTTON);
  }

Now I wanna turn the Css Buttons to 'yes', so I can use css buttons, but I want to use an image here in the search header box.

The problem is that when Css Buttons is on to 'yes' I can't see the image. But if it is exactly the same code line for 'yes' or 'else', why can't i see the image when i have Css Buttons on to 'yes'?
Is the system blocking access to images or something when Css Buttons is turned to 'yes'?

[gjh42]

The suggested changes you refer to make the "if" and "else" lines different, but you show them the same. I don't know how the CSS buttons work, but you can't complain about the function when you have incorrectly modified the code.

Original:

  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 . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  } 

Suggested change for tpl_search.php:

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px"') . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '" class="smallText">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" 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 .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '" class="smallText">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } 

You have BUTTON_IMAGE_LUPA_SEARCH instead of BUTTON_IMAGE_SEARCH; are you certain that is correct, and followed through in defines or wherever it needs to be?

[Sherry Two]

BUTTON_IMAGE_LUPA_SEARCH is the name of my image and is defined correctly, it works well when CSS Buttons is turned off. So that's not the problem.

You're right, and I quote myself:

But if it is exactly the same code line for 'yes' or 'else', why can't i see the image when i have Css Buttons on to 'yes'?
Is the system blocking access to images or something when Css Buttons is turned to 'yes'?

The two lines are the same, but as the CSS Buttons is ON the first one should be the one that matters (if I'm not mistaken).

[gjh42]

This doesn't solve your problem, but at least it reveals the cause.
From /includes/functions/html_output.php:

  function zen_image_submit($image, $alt = '', $parameters = '', $sec_class = '') {
    global $template, $current_page_base, $zco_notifier;
    if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes' && strlen($alt)<30) return zenCssButton($image, $alt, 'submit', $sec_class /*, $parameters = ''*/ ); 

So if CSS buttons is on and $alt is less than 30 characters, the CSS button should be used no matter what. I expect it would be worthwhile investigating the $alt value, as if you could make that long without causing other problems the CSS button would not be used.

P.S. - This is from the core file; I don't have the CSS button mod so don't know what might be different there.

[semaphore]

Anyone figure out why we need the atl tag > 30?

I feel like I must be missing something here.

Thanx.

[gjh42]

I would guess that since the CSS button uses the given text, this is to prevent ungainly long buttons by using the image button in those cases.