Apple Zen Support Thread

[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;
   	}
   	}

[misticloudz]

I don't normally STYLE inputs, but I certainly don't have a problem adjusting their padding, LOL.

awesome, jade, thank you so much. i knew that i was making it too hard, but just coudln't figure it out...
thanks again! :-)

[droidwork]

thank you so much for your help

[shane102]

Hi all,

Nice template Jade, I've installed it on my website and it installed quickly and without problems.

That said there have been a couple of things that have changed after installing the template.

#1 All of the links on my website have changed from blue to dark grey and are no longer underlined, thus they are not very easy to see.

#2 I use some DHTML to create text popups on the front page of my site but they don't appear where they should relative to the text that activates them, also if I then hover the mouse over one of the product images(imagehandler2) the text popups no longer function until I refresh the page??

other wise I'm very pleased with the template.(donation will arrive after I begin to earn some from the site)

If anyone could enlighten me as to how to fix the above then

shane http://www.greyonblue.com

I would also like to hear peoples opinions of my site

[jettrue]

Hi all,

Nice template Jade, I've installed it on my website and it installed quickly and without problems.

That said there have been a couple of things that have changed after installing the template.

#1 All of the links on my website have changed from blue to dark grey and are no longer underlined, thus they are not very easy to see.

#2 I use some DHTML to create text popups on the front page of my site but they don't appear where they should relative to the text that activates them, also if I then hover the mouse over one of the product images(imagehandler2) the text popups no longer function until I refresh the page??

other wise I'm very pleased with the template.(donation will arrive after I begin to earn some from the site)

If anyone could enlighten me as to how to fix the above then

shane http://www.greyonblue.com

I would also like to hear peoples opinions of my site

1. Change the links styling in the stylesheet.css:

a:link {
color:#4f4f4f; /*site links color */
text-decoration:none;
}

a:visited {
text-decoration:none;
color:#313131;
}

a:hover {
color:#000000; /* color when links are hovered over */
text-decoration:none;
}

2. I didn't design the dhtml thingie, but it looks like you need to make some adjustments to it. Look at the code that you pasted into your site, and find out where you need to adjust the numbers so it doesn't go so far down the page. As for its interaction with IH2, I have no earthly idear, sorry!

[cache529]

Hi Jade,

Thank you for this contribution. I changed the color of the dropdown menu when unselected to match the color of the dropdownMenuWrapper...I was able to put the line back in the last tab (Shopping Cart), but how do I add a line to the front of the "Home" tab. Thank you for your assistance.

[jettrue]

Hi Jade,

Thank you for this contribution. I changed the color of the dropdown menu when unselected to match the color of the dropdownMenuWrapper...I was able to put the line back in the last tab (Shopping Cart), but how do I add a line to the front of the "Home" tab. Thank you for your assistance.

Forst open up includes/templates/apple_zen/common/tpl_drop_menu.php, and give the home link a class like this:

<a class="leftLine" href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>

And then add this to your stylesheet_header_menu.css:

div#dropMenu li a.leftLine {border-left:1px solid #ffffff}

[RobertV]

Wondering if you can help ...

I just installed Zen Lightbox on a fresh install of Zen Cart 1.3.8a.

I have been designing my site around your awesome Apple Zen template and have encountered my first issue.

The product image is properly displayed in the lightbox when viewing the site with IE7 on a PC. However when viewing the image in Firefox (PC) or Safari (Mac) the Apple Zen top navigation bar stays on top of the image and the lightbox.

Can you help? Did I miss something in the setup? Should I be asking this in the Zen Lightbox support forum?

Thanks for your time and wonderful contribution.

Robert

[jettrue]

Wondering if you can help ...

I just installed Zen Lightbox on a fresh install of Zen Cart 1.3.8a.

I have been designing my site around your awesome Apple Zen template and have encountered my first issue.

The product image is properly displayed in the lightbox when viewing the site with IE7 on a PC. However when viewing the image in Firefox (PC) or Safari (Mac) the Apple Zen top navigation bar stays on top of the image and the lightbox.

Can you help? Did I miss something in the setup? Should I be asking this in the Zen Lightbox support forum?

Thanks for your time and wonderful contribution.

Robert

Do a search in this thread for lightbox, there's a lot of information on that topic in this thread.

[Seamstobesew]

I have this template installed on one of my sites, and when I add an iframe or even text with javascript in the ezpage description it makes the menu header move to the right of the page. I have tried every trick I know to get this to work properly, but I'm just not familiar enough with css to know what is happening when I add the iframe. I tend to use iframes in ezpages to allow for php content and javascripting.

If you have any thoughts on how to correct the problem I would really appreciate any help you could give.

I am using the 2.2 version of apple_zen green template in 1.37.

I've added an image to show you what it's doing. I also seem to have lost the category and sideboxes in this image.


Marian