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!

[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... ???

[niccol]

Well the problem is that in the sidebar there is a text input area and a button. Both of these elements are <input>. So, if we style input in the css for this sidebox then it will effect both the text input and the button. In this case it will give both of them an image as a background.

There are ways to distinguish between then using css (some of which i talked about) but none of them are really solid across the browsers.

It is better to edit the php code so that a unique ID is applied to the text input of the search box. Then you can style it individually and the styles will apply only to it.

To do this you need to make a small edit of a file tpl_search.php (includes/templates/yourtemplate/sideboxes/tpl_search.php).



You are looking for a lump of code that looks like this:

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 50px" />';
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  }

And you want to edit it (adding the red bits) to look like this:

   if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" id="newsearch" style="width: ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" id="newsearch" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br /><input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 50px" />';
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  }

You'll have to scroll left to see the changes. That will add a unique ID to that input - then you can style it from the css file without effecting anything else

#newsearch{
width:120px !important;
height:50px;
border:none;
background-color:yellow;
}

Is the rule that I used to check it worked and then add the background image that you want. Attached is a screenshot of my results - obviously not exactly what you want but it will be once you have added the image and changed the size a bit to match the image.