0

I can't figure out how to make a search button on the view's exposed (as a block) search filter to be styled similarly as in Drupal standard search form, with a 'lens' icon. The examples for hook_form_alter() I found using:

$form['submit']['#type'] = 'image_button';
$form['submit']['#src'] = base_path() . path_to_theme() . '/images/search-button.png';

-don't seem to work correctly, as image on the button just doubles (png file includes both 'active' and 'inactive' images of lens). Could there be a straightforward way for the search button 'lens' styling, not including CSS/templates modifications?

Improve this question
5
  • If you try autocomplete for your exposed filter field, autocomplete throbber will take place. But expose filter should be in your field list if you want to use that..
    – RajeevK
    Nov 13, 2013 at 7:40
  • It seems this already was asked and answered on Stack Overflow - could you tell us why generic way is not for you?
    – Mołot
    Nov 13, 2013 at 12:25
  • you can simply do it by using css. No need to make it more complicated by using hook_form_alter().
    – Cool
    Nov 13, 2013 at 12:54
  • Thanks Rajeev, hadn't thought about autocomplete throbber, this may be handy in my case, maybe avoiding a search button altogether, although it's not a common practice.
    – al_mc
    Nov 13, 2013 at 15:20
  • Molot and Arun, I thought there may be a "Drupal's way" of making a search button easily configurable in PHP code. Drupal itself is using such search button at "localhost/search" out-of-the-box, so I thought it might be a matter of settings manageable in PHP or using CSS classes. I didn't want to change CSS directly if there is a configurable way to do that.
    – al_mc
    Nov 13, 2013 at 15:24

1 Answer 1

Reset to default
1

The code you posted is good. The only "problem" is that your lens image is "sprites" image - designed to be shown only partially, depending on the state of your button. There is no standard for this, so Drupal does not support this. You ave two options there:

  1. Cut your image, leave only the part you need.

  2. Use CSS to implement sprite style your image was created for.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.