How can I change the default rectangular advanced search form? Examples provided

[DarkJ]

Appreciation and the good words can never be enough for the wealth of help and info one can get just by reading the forum topics, guys!!! For the past several weeks I have managed to almost build my site complete just by reading the forum, and now have to ask for a help as of course I stumbled upon a customization issue that as a non-programmer, I cannot resolve.

I have read as well ALL references re: modifying the Advanced Search Form and button in the sidebox, but as simple as it may seem I cannot find a solution for this:

What is the exact coding to change the default html rectangular Advanced Search field form in the sidebox to smth else using transparent gif, as in these sites:

http://butiche.com/

http://www.impressionslast.com

When I copy their css code and upload put the transparent image, it shows ok but the default html code stays too, so I do not knot what needs to be removed as well in the css and/or the tpl_search.php.

My site is not uploaded yet but I think you will know what I talk abou when you see the examples. Really hope that someone responds! Much appreciated in advance!

DarkJ

[niccol]

Both sites are using an image as the background for the search box.

You need to create the image that you are going to use in a graphics program first and then store it on the server. (Let's say you call it search_background.gif and put it in the images folder)

Then the css code will look something like:

input#searchTop {
	background: url("../images/search_background.gif") top left no-repeat;
}

where "../images/search_background.gif" is the path to your new image that you have uploaded.

[DarkJ]

Yep, thanks - but I have tried just that when arrived exactly at what I need help for.

When I copy the css code and upload my transparent image, it shows OVER the default search bar (the default rectangular shape search input form stays on page), so I think smth ought to be changed/removed in the tpl_search.php or in the css in addition.

I've attached a prt screen for you to see how these both appear one on top of other...

Any help is MUCH MUCH appreciated... It seems so trivial but...

[niccol]

Well, you need to style the input so that is does not show.

Apply a style like {border:none; background-color:white;} to that specific element.

Then you need to apply padding so that the letters line up in the right place. If you give us a URL we can be more specific.

[DarkJ]

Dear Niccol,

Thank you very much for the attention, I appreciate your help. I understand that help is best when inspecting a live site - that's why in the next week I will do my best to up what I have for the moment - and hopefully reserve the privilege to ask you for help and directions again then.

Thanks again,

Ivo

[niccol]

No problem. I look forward to it!