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

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

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