Modify Submit Button to Image

[industrialpost]

How do you get the CSS and the code in layout.tpl to display an image for the submit button for the top search field? I am trying to get it so that there is no value set for the image but the code keeps inserting "Search" over the top of the image. If I remove the value for the image, "Submit Query" shows up over the image. Any help would be appreciated. Here is the site I am working on: Industrialpost.com.

[seymourjames +]

In layout use this for the button. The value defined for smarty.const.LANG_SEARCH_BUTTON is the text on the button, so if you define it to nothing, nothing will show on the button.

<input class="searchbutton" type="submit" name="Submit" value="{$smarty.const.LANG_SEARCH_BUTTON}" />

Then in the css something like this (style as you want)

input.search { width: 279px; border: none; background: #fff url(../images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }
input.searchbutton {background-color: #7B9E52;}

Then put the desired image input.gif in your images directory.

[industrialpost]

Thanks for the input. However, this doesn't address the problem. I still have text over the image. How do I get rid of the text "Search" over the image? Like I said, if I don't declare any value, the text changes to "Submit Query" which should not show up. Anyone else have a clue about this? Where is this text being defined to show up regardless of any value being defined??? Please help. Industrialpost.com

[Eric Barnes]

Try this. In the input.searchbutton {style.css (line 44) add:
text-indent:-1000px;

[industrialpost]

Thanks! That worked. I am assuming that this is relocating the text off screen. However, I added a few more zeros just to make sure that those users that have massive screens and high resolution set won't see an orphan "Search" hang out on the page somewhere. I was thinking about doing this, but wasn't sure if negative numerical values would work. Thanks again! Sweet!

[Mike-N-Tosh +]

Sometimes thinking negatively has a very positive affect.

[seymourjames +]

Try

input type=image name="search" src="thepathway/image.gif"

instead of "type=submit".

++++

[industrialpost]

Ok, I spoke too soon. The solution worked great for Firefox. IE is a different story. Can anyone shed some light on this? I know, I know... IE is so behind the times! Industrialpost.com

[michael +]

I am using the default template and whenever I want to change a text link to a button I include the following in the anchor;

class="bluebtn" or class="greenbtn"

The following goes in my CCS file;

/* misc */
.buttons { text-align: right; padding: 4px 3px 0 0; }
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: url(../images/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; font-weight: lighter; text-decoration: none; }
.greenbtn { background: url(../images/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; font-weight: lighter; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: url(../images/hoverbtn.gif) no-repeat; color: #fff; font-weight: lighter; }

You should already have the .gif files in your default images folder, just copy them over to your customtemplate/images folder.

Good luck,

[seymourjames +]

Which version of I.E.? You may have to use some conditional css to cover I.E. around your button. Search the forum as there are several threads on that. I thnik what Mike says should work though.