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

[niccol]

Oh and you are probably going to want to add some padding to keep the text away from the edges of the image.

#newsearch{
width:80px !important;
height:20px;
border:none;
background-color:yellow;
padding:20px;}

[DarkJ]

Nik! Thank you so very much!!! I don't know if I was a slow learner but that was like a revelation... Suddenly it made sense to me how things should've worked. Left in such a rush back home from work to test it - and it clicked right away... Man, you're a true help!!! I think the search bar is ok now, and you can check the paddings I applied to line things up, but to me it is as good as perfect...

http://www.kapachki.com/test7

I copied the tpl_search.php from the default dir to my template sidboxes dir and edited as you suggested. Here's what I put in the css afterwards:

#newsearch{
width:110px !important;
border:none;
background: transparent url("../images/rounded-search-input.gif") top left no-repeat;
margin:0
}

input#newsearch {
border:0 none;
font-size:11px;
padding:5px 5px 10px 20px;
}

I guess changes in the top search bar would follow similar pattern... just edit the other tpl_search_header.php and then do the css?

Thank you so much again, sir - much obliged! This indeed is the greatest forum, and I love the Zen Community!

Ivo

[niccol]

Well done! Looks fine to me. Check it in as many browsers as you can. Also a handy tip is 'browsershots' which you can find with a quick search online.

Yes, the other search box will probably need the same treatment. First add an ID to it. Then style that ID.

It is a good technique for a lot of Zen Cart. Mostly Zen has the IDs and classes that you need to style everything (it is a good e-commerce solution) but occasionally you come across extra things that you would like. In that case just put them in yourself!

Glad you had one of those happy moments that make up for all the frustration!