Changing the style of the search box?

[Dunk]

First post here so hello...

Installed ZC today and spent a bit of time fiddling, I have a question...

The client I'm working for wants to put rounded end caps on their search bars, I've achieved this no problem (you can find an example top left of this page... http://www.market-stalls.co.uk/store/ ...ignore the atrocious design below the header for the moment, I'm after functionality right now )

The problem is this... I've no idea what action to assign to the form tag of my redesigned search box (or how I'd go about doing it in PHP) so that when the user hits enter they're taken to the product search results. I've looked through tpl_search_header.php and am still none the wiser, anyone have any idea? or some kind of pointer?

Thanks and Merry Christmas!
D

[kobra]

Apply your background image & styling to the default search in the header item.

.navMainSearch which already has function assign to it.

To turn it on - admin > tools > layout boxes controller > sideboxes/search_header.php > set to on then in the stylesheet set the styling

[Dunk]

Apply your background image & styling to the default search in the header item.

.navMainSearch which already has function assign to it.

To turn it on - admin > tools > layout boxes controller > sideboxes/search_header.php > set to on then in the stylesheet set the styling

I'm not sure if I understand 100%

When you say the header item, do you mean 'tpl_header.php'? Where do I add the styling for the search box? Should this be from <div id="navMainSearch"> in 'tpl_header.php'?

Thanks for your help!

[Dunk]

ok, perhaps just ignore my last post... I'm just confused. Could you explain again? sorry!

[gjh42]

It looks like you coded another search box. You don't need to do that; you just need to turn on the one that comes with Zen Cart:

admin > tools > layout boxes controller > sideboxes/search_header.php > set to on.

Then you can style that one with the styling techniques you already have.
Yes, #navMainSearch is the place to start.

[Dunk]

Yeah, I coded my own searchbox like you said thinking I could use the code as a reference to copy onto ZC's own searchbox. I think the best way to describe what I'm trying to do is to show you...

This is the HTML I'm using for my own search box... (found top right of market-stalls.co.uk/store)

<form id="searchform" action="NOTSURE.php">
 <fieldset>
  <label for="query">Search</label>
  <input type="text" name="query" id="query" value="" style="height:13px; font-family:Lucida Sans Unicode, Lucida Sans, Lucida Grande, Tahoma, Arial, Helvetica, sans-serif;" />
  <input type="submit" name="submitquery" id="submitquery" value="Go" /> 
 </fieldset>
</form>

(I'm also linking to several additional stylesheets and a piece of javascript in html_header.php which provide functionality)


This is what I see when I open tpl_search_header.php, which I assume is the file I'm meant to be editing to add my own styles to the searchbox?

  $content = "";
  $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');
  $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
  $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" 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 . '\';"') . ' ' . zen_image_submit (BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" 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 . '\';"') . '&nbsp;<input type="submit" value="' . HEADER_SEARCH_BUTTON . '" style="width: 45px" />';
  }

  $content .= "</form>"; 

I can make out the HTML code within the PHP but I'm not sure how I could integrate my own code successfully (I'm not proficient in PHP as you may have guessed) ...I've given it several stabs without success, any help would be much appreciated.

Thanks!

[gjh42]

You probably don't need to add anything to the PHP file, unless it is to change input field parameters like size and maxlength. The zen_draw_form() function takes care of the whole process of setting up a form.

You will do the styling for the search box in your stylesheet, applied to #navMainSearch {}. I haven't styled a searchbox yet so can't tell you exactly what to do to it, but it should be all there. If you want expansion or other special styling, you might need to add another wrapper div in /includes/templates/your_template/common/tpl_header.php.
The line that outputs the search is

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

around line 64, just before

<br class="clearBoth" />
</div>
<!--eof-navigation display--> 

[Dunk]

Thanks Glenn... much appreciated, I'll take a look when I get a minute later today!

[Dunk]

You will do the styling for the search box in your stylesheet, applied to #navMainSearch {}. I haven't styled a searchbox yet so can't tell you exactly what to do to it, but it should be all there. If you want expansion or other special styling, you might need to add another wrapper div in /includes/templates/your_template/common/tpl_header.php.

Hmm, I can't see how this would work, if you look at my own searchbox code you'll see that there are a lot of elements within the form tag such as <fieldset> and <label> as well as css styling applied to the <form> tag itself... since the <form> tag is contained within tpl_search_header.php the only way I see that I can replicate my code is by editing the PHP of tpl_search_header.php itself... if anyone has any idea where I should begin (no real knowledge of PHP!) it'd be much appreciated.
Sure #navMainSearch styles the div that contains the searchbox but that's not enough I don't think.

Thanks for your help though!

[gjh42]

You can apply CSS to any HTML element (fieldset, form, label,etc.) as well as class & id tags, and doing so does not require touching any PHP file. It is all done in the stylesheet.
Browsers that function according to current CSS standards will allow just about anything that has a defined existence to be styled; unfortunately, IE6 does not support some of the critical properties that enable this, so sometimes styling must be hobbled to fit the lowest common denominator.

Let us know just what elements you want to style in what ways, and we can probably guide you.