misticloudz:
hi jade, i'm still loving the apple zen, but having a few small problems (well just one right now, i've figured most of the others out to some extent)...:frusty:
i'm trying to change the search header at the top, and i know that you're not too keen on adjusting inputs, but i'm just wondering if you have some insight into why i cannot get the search button and the input box to line up vertically. I just want them to line up that way, i'm not worried about width wise unless they're SUPER far apart.
here is my css code for the #navmainsearch section:
#navMainSearch {
/area around search box and button including whole navmain area/
margin:0 auto ;
text-align:right;
padding:0px 0px 0px 0px;
}
#navMainSearch input {
/seems to move the search button/
margin:0px ;
background-color:#A1C541;
text-align:right;
padding:0px 0px;
}
#navMainSearch input[type=text] {
margin: 0px 0 0 0;
}
#navMainSearch input.topSearch{
margin: 0 0 0px 0px;
padding: 0px 0 0 0;
}
>
> i have this at code starting at line 19 of my tpl_search_header.php file:
> ```php
$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 . '\';"') . ' <input type="image" img src="images/button_search.gif"' . HEADER_SEARCH_BUTTON . '" style="width: 70px" />';
``` to give it a button image instead of the standard search button.
>
> basically the only reason i'm doing this is because i want the navmain area to be the same height as the dropdown menu link height, so it balances evenly on top and bottom of the header image... and the standard search thingie was just too tall and i'm too much of a noob to figure out how to make my own imaged search thingie like you have in cherry zen...
>
> if anybody else has any suggestions, i'd love to hear them too!
> thanks so much!
You're making this *way* to complicated, and your code above isn't correct. I don't normally STYLE inputs, but I certainly don't have a problem adjusting their padding, LOL. First, put back the original tpl_search_header.php:
<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_search_header.php 4142 2006-08-15 04:32:54Z drbyte $
*/
$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" class="topSearch" style="width: 16%" 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" class="topSearch" style="width: 16%" 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);
}
$content .= "</form>";
?>
Then upload your new search button as: includes/templates/apple_zen/buttons/english/button_search.gif
Replace the following sections of css with this:
#navMainSearch {
margin:0 auto;
text-align:right;
padding:0 5px;
}
#navMainSearch input {
margin:0 auto;
text-align:right;
padding:1px 5px;
background-color:#A1C541;
}
#navMainSearch input[type=text] {
margin: 2px 0 0 1em;
}
#navMainSearch input.topSearch{
margin: 0 0 5px 2px;
padding: 0 0 0 0;
vertical-align: bottom;
}
}
