Apple Zen Support Thread

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

$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="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!

[bajajsakti]

http://pettags4less.com/css_validation.gif

Why error?

[molywerks]

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.

misti, it appears you wiped out the class when you edited your width. my tpl_search_header_file has this bit of code:

    $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);

with the crucial difference being class="topSearch".

[breezyr]

How do I make the bar on the top of the page white instead of green, been trying to figure out which file that is in.

Thanks

[jettrue]

http://pettags4less.com/css_validation.gif

Why error?

You can ignore that error.

[jettrue]

How do I make the bar on the top of the page white instead of green, been trying to figure out which file that is in.

Thanks

You don't need to find the file with the header bar, you just need to open up includes/templates/apple_zen/css/stylesheet.css. That background color is controlled by #navMainWrapper

[jettrue]

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)...
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:

$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="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 . '\';"') . '&nbsp;' . 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 . '\';"') . '&nbsp;' . 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;
   	}
   	}

[breezyr]

You don't need to find the file with the header bar, you just need to open up includes/templates/apple_zen/css/stylesheet.css. That background color is controlled by #navMainWrapper

Thanks for your help, I appreciate it!

[droidwork]

Hi, i wish to add mini ad banners to the side grey box area. how can i do it?

[jettrue]

Hi, i wish to add mini ad banners to the side grey box area. how can i do it?

Use the built in zen cart banner manager, under "Tools", "Banner Manager". Turn on a banner sidebox under "Tools", "layout boxes controller".