How would I go about adding an image for the submit button?

Comments

danielb’s picture

danielb commented
Status: Active » Fixed

The easiest way is with some CSS

#block-autocomplete_node_finder-0 input.form-submit {
  float: left;
  margin-top: 18px;
  margin-left: 3px;
  text-indent: -10000px; /* hide text */
  overflow: hidden; /* hide text */
  line-height: 0px; /* hide text */
  display: block;
  width: 120px; /* width of bg image */
  height: 80px; /* height of bg image */
  background: blue url(images/my_button_image.gif) no-repeat left top; 
}

more css suggestions in http://drupal.org/node/313807

You could also put a proper image button in with a theme function if you know what you're doing, but I can't really help much with theming. Try some of these links
http://drupal.org/node/62647
http://drupal.org/node/144758
http://www.tomconstant.com/2008/01/09/adding-image-submit-buttons-in-dru...
http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross...
http://www.ampsoft.net/webdesign-l/image-button.html

shadow_jh’s picture

shadow_jh commented

I ended up using some php in my page.tpl.php to publish a modified block. Do you think anything would be wrong with this approach?

print str_replace("type=\"submit\"", "type=\"image\" src=\"".$base_path."themes/zen/zen/images/company-search-button.jpg\"", $company_search);

shadow_jh’s picture

shadow_jh commented

I ended up using some php in my page.tpl.php to publish a modified block. Do you think anything would be wrong with this approach?

print str_replace("type=\"submit\"", "type=\"image\" src=\"".$base_path."themes/zen/zen/images/company-search-button.jpg\"", $company_search);

danielb’s picture

danielb commented

I guess it's not the best way, might affect other forms, but if that's the only block in the region then you are probably fine.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

sytru’s picture

sytru commented

Thanks for this hint. Works perfectly for me.