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

[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!

[DarkJ]

Nik, sorry it took me so long - I uploaded the test site just yesterday (been into other aspects of its dev). You can view the matter in question here: http://www.kapachki.com/test7/

Basically, I've explained what I am struggling with in above posts - if you can help and tell me what exactly to do with the code (and what to correct in my css), I'll be immensely obliged. One of the sites I pointed to is no longer having the round search bar, but http://byehigh.com has exactly the same button.

Thanx in advance, Ivo

[niccol]

OK, first you need to add a rule that is:

#searchContent input{
border:none;
background: url(path to your image);
}

I don't know the path to your image so you need to insert it.

Then you will see that this effects both the inputs in search. So, you need to discriminate between them. You can do this with some clever css or you can add a id to the text input box which I think is the better way to go.

To do that you need to edit tpl_search.php in includes/templates/yourtemplate/sideboxes/. If you want help with that edit let me know. If you want to do it that way.

If you want to try the css way then try:

#searchContent input[type=text]{
border:none;
background: url(path to image);
}

I think that has some browser compatibility issues with, you guessed it, internet explorer. Possibly only IE6 and earlier but I am not sure.

Best route is to do the edit of the php file.

[DarkJ]

Quote: "Then you will see that this effects both the inputs in search. So, you need to discriminate between them. You can do this with some clever css or you can add a id to the text input box which I think is the better way to go."

Nik, if it is easier to change both search bars to round-edged ones (using the gif) with css only (or with not much hassle, as I am not into php or css), I would settle for that immediately... I thought it was all just a matter of adding or replacing some code in the main css... guessed wrong But when I only add the new css code to the css file it overlaps the new gif-based search bar over the original one so both are visible (as in the attached jpg in previous posts). I guess I need to edit smth in the css as to hide the default hard-edged search bars/forms, perhars to break down the "form, select, input" into separate lines and see what's responsible for the form... ???