Apple Zen Support Thread

Hello again

I have almost finished my personalizations. But, have found a couple more sticking points.

I have adjusted the drop down menu so that the buttons are evenly spread across the Drop Menu, and each drop-down list is the same width as the parent. But, now there seems to be a space between the parent and child, enough to close the menu unless I am super quick. I used to know this stuff from years ago when the flyout menu contribution was still quite new, but I can't remember what to look for and none of my fiddling is fixing the problem.

https://www.fleshmetal.com.au/137

body {  
	behavior: url(includes/csshover.htc);
	}
	

/*grey*/ 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}

	
#dropMenuWrapper {
	width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:70em;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
	}
	
div#dropMenu ul.level1 {
	width:70em; 
	margin:0 auto; 
	text-align:center;
	background:#4F4F4F;
	height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0.3em .6em 0.3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center;} 
div#dropMenu>ul a {width:11.05em;}
div#dropMenu ul ul {position: absolute; width: 11.7em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:11em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 11.7em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

Thanks :)

ghostcorps:

Hello again

I have almost finished my personalizations. But, have found a couple more sticking points.

I have adjusted the drop down menu so that the buttons are evenly spread across the Drop Menu, and each drop-down list is the same width as the parent. But, now there seems to be a space between the parent and child, enough to close the menu unless I am super quick. I used to know this stuff from years ago when the flyout menu contribution was still quite new, but I can't remember what to look for and none of my fiddling is fixing the problem.

https://www.fleshmetal.com.au/137

Thanks :)

You're not thinking about the problem enough. :laugh:

Ok, first of all, your menu is a little too wide, in IE (at least IE7) the shopping cart drops down.

The reason your having issues is your widths don't match:

div#dropMenu ul ul {position: absolute; width: 11.7em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:11em;}

change the second one to match the first one.

Then you need to make your padding match:

div#dropMenu li a {display: block; padding: .6em 0.3em .6em 0.3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center;} 
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */

In the shopping cart side box, the Total price is aligned to the right... but it's ALL the way to the side of the box. I wanted to add some padding to it and I thought that if I modified the "stylesheet.css" at line 697...

.cartBoxTotal {
text-align:right;
font-weight:bold;
}

... to add something like "padding-right:2em;" that this would solve the problem. But it didn't seem to work. I played with several numbers and nothing moved it.

Am I tweaking in the right spot or no?

bradymc:

In the shopping cart side box, the Total price is aligned to the right... but it's ALL the way to the side of the box. I wanted to add some padding to it and I thought that if I modified the "stylesheet.css" at line 697...

.cartBoxTotal {
text-align:right;
font-weight:bold;
}

... to add something like "padding-right:2em;" that this would solve the problem. But it didn't seem to work. I played with several numbers and nothing moved it.

Am I tweaking in the right spot or no?

It's not working because cartboxtotal's padding is defined in a second spot:

#ezPageBoxList li, .cartBoxTotal {
margin:0;
padding:0.2em 0;
}

remove cartBoxTotal from there, and it'll work where you want it to.

jettrue:

You're not thinking about the problem enough. :laugh:

lol someone had to say it eventually.

Thanks

To be honest I thought I had matched all the widths.. evidently I hadn't given it enough attention ;p

Also, what happens in ie7? in ie6 the menu bunches to the left! :( Which isn't really too bad... but being a perfectionist also, It'd be nice to have a consistant experience :)

ghostcorps:

Also, what happens in ie7? in ie6 the menu bunches to the left! :( Which isn't really too bad... but being a perfectionist also, It'd be nice to have a consistant experience :)

I think with the way you want to do this, you will run into that issue, which is why I did it the way I did. :wacko:

If you do these two tags like below, I think you won't run into the IE issues:

div#dropMenu li a {display: block; padding: .6em 3em .6em 3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; }
div#dropMenu>ul a {width: auto;}

Of course, then the drop down's aren't the same size as the menu item above them...and all of the drop downs aren't exactly the same size... but on the other hand, things look more evenly spaced this way (there's the same amount of space BETWEEN each item).

Can I just suggest, that I think it would look more refined without the fine grey box around your logo header.... but that's just my opinion. :D

jettrue:

I think with the way you want to do this, you will run into that issue, which is why I did it the way I did. :wacko:

I'm starting to see things your way :)

div#dropMenu li a {display: block; padding: .6em 3em .6em 3em;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; } 
div#dropMenu>ul a {width: auto;}

This makes the menu in ie space evenly, but no matter how small i make the widths, it always throws off the shopping cart to the next line in FF. Personally, I would rather it work to spec in FF and bunch on ie. But I have left it for now for you to look at.

Can I just suggest, that I think it would look more refined without the fine grey box around your logo header.... but that's just my opinion. :D

Yeh, the border was bugging me too, I just wanted to bring the logo out of the background a bit. Can I, perhaps take the shadow all the way round?

ghostcorps:

This makes the menu in ie space evenly, but no matter how small i make the widths, it always throws off the shopping cart to the next line in FF. Personally, I would rather it work to spec in FF and bunch on ie. But I have left it for now for you to look at.

Yeh, the border was bugging me too, I just wanted to bring the logo out of the background a bit. Can I, perhaps take the shadow all the way round?

Really? Cause it's not wrapping to the next line for me in FF. What version of FF are you using?

I think you could probably make the shadows be on the left and right all the way up to the logo, but can you even see it with your background?

I am trying to put my EZ-Pages into the drop down navigation, so far without a success. I am assuming this must be done manually, correct? I am trying to use the current "Contact Us" and tried the following:

Sunabac:

I am trying to put my EZ-Pages into the drop down navigation, so far without a success. I am assuming this must be done manually, correct? I am trying to use the current "Contact Us" and tried the following:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_EZPAGES, 'id=1&chapter=10) ?>'">Our Company</a> <ul class="level2"> <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li> </ul> </li> Since it does not work, could I be given directions please??

The only issue is that your single quote is in the wrong place. It should be directly after: 'id=1&chapter=10

jettrue:

Really? Cause it's not wrapping to the next line for me in FF. What version of FF are you using?

I am using FF2.

Sorry, what I meant was: With your solution below, it spaces properly with ie, but not with FF. Which is how I left it for you to look at. But, I am going to put it back the way it was (working in FF and bunching in ie), it doesn't look too tragic and I have more pressing matters. Besides, I dont use ie unless I'm testing how ie handles the page lol

jettrue:

I think you could probably make the shadows be on the left and right all the way up to the logo, but can you even see it with your background?

Its very subtle, except where it just stops before the drop down menu, which makes it look unfinished. I guess I could make the menu bar stretch out like you had it originally, but If I can; I'd like to to leave that as a final option. Thing is, whenever I try to add any kind of border to the dropmenuwrapper it shifts a px or 2 to the right :(

Here's an interesting twist though. Sometimes the shadow shows, sometimes it doesn't. That has been the case since I added the template (even before fiddling with it), but doesn't really faze me. However, if the shadow shows it makes the logo.gif resize by a px or 2 and gives it jagged lines. If the shadow does not show, the the logo.gif is fine. However the main banner is never touched. I think there are gremlins in the tubes.

jettrue:

The only issue is that your single quote is in the wrong place. It should be directly after: 'id=1&chapter=10
Oh.. this is fixed now and I get the drop down menu, however everything else is gone.. I just get the "stripes" and the drop down menu on the top, nothing else! Do I need to make another change(s)?? If yes, where??:unsure:

Sunabac:

Oh.. this is fixed now and I get the drop down menu, however everything else is gone.. I just get the "stripes" and the drop down menu on the top, nothing else! Do I need to make another change(s)?? If yes, where??:unsure:

Check your syntax again. It sounds like you still don't have that section correct. Did you remove that second single quote? It was in the wrong place.

jettrue:

Check your syntax again. It sounds like you still don't have that section correct. Did you remove that second single quote? It was in the wrong place.
I keep looking and looking.. have my glasses on...
This is what I have in tpl_drop_menu.php

<!-- menu area -->

<div id="dropMenuWrapper">
  <div id="dropMenu">
    <ul class="level1">
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_CATALOG; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_NEW); ?>"><?php echo HEADER_TITLE_NEW_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_PRODUCTS_ALL); ?>"><?php echo HEADER_TITLE_ALL_PRODUCTS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_SPECIALS); ?>"><?php echo HEADER_TITLE_SPECIALS; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_ADVANCED_SEARCH); ?>"><?php echo HEADER_TITLE_SEARCH; ?></a></li>
        </ul>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>
        <?php

 // load the UL-generator class and produce the menu list dynamically from there
 require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
 $zen_CategoriesUL = new zen_categories_ul_generator;
 $menulist = $zen_CategoriesUL->buildTree(true);
 $menulist = str_replace('"level4"','"level5"',$menulist);
 $menulist = str_replace('"level3"','"level4"',$menulist);
 $menulist = str_replace('"level2"','"level3"',$menulist);
 $menulist = str_replace('"level1"','"level2"',$menulist);
 $menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
 $menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
 echo $menulist;
?>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>"><?php echo HEADER_TITLE_INFORMATION; ?></a>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo HEADER_TITLE_SHIPPING_INFO; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo HEADER_TITLE_PRIVACY_POLICY; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo HEADER_TITLE_CONDITIONS_OF_USE; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo HEADER_TITLE_ABOUT_US; ?></a></li>
          <?php if (defined('FILENAME_SITE_MAP')) { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_SITE_MAP; ?></a></li>
          <?php } ?>
          <li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_GV_FAQ; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_DISCOUNT_COUPON; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_UNSUBSCRIBE; ?></a></li>
        </ul>
      </li>
       <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_EZPAGES, 'id=1&chapter=10') ?>">Our Company</a>
      <ul class="level2">
      <li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CONTACT_US; ?></a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_EZPAGES,  'id=2&chapter=12') ?>">Our Team</a></li>
      <li><a href="<?php echo zen_href_link(FILENAME_EZPAGES, 'id=3&chapter=20') ?>">Location(s)</a></li>
      </ul>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
        <ul class="level2">
          <?php if ($_SESSION['customer_id']) { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo HEADER_TITLE_NEWSLETTERS; ?></a></li>
          <?php } else { ?>
          <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
          <li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
          <?php } ?>
        </ul>
      </li>
      <li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
        <?php if ($_SESSION['cart']->total >= MIN_ORDER_AMOUNT) { ?>
        <ul class="level2">
          <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        </ul>
        <?php }?>
      </li>
    </ul>
  </div>
</div>
<div class="clearBoth"></div>

Please ignore my last post, I got it... my mistake in over writing the main page!!

Putting the shadow aside for a second.

Can anyone suggest why; Sometimes in FF the page loads so that the logo is squashes a little bit, sometimes it doesn't, and when I right click the logo (in FF) something odd happens.

https://www.fleshmetal.com.au/137

ghostcorps:

Putting the shadow aside for a second.

Can anyone suggest why; Sometimes in FF the page loads so that the logo is squashes a little bit, sometimes it doesn't, and when I right click the logo (in FF) something odd happens.

https://www.fleshmetal.com.au/137

I don't see the squashing issue, but the second issue may be fixed by changing:

#logoWrapperOuter {
	margin:0 auto;
	background-image: url(http://www.fleshmetal.com.au/137/includes/templates/apple_zen/images/header_bg.jpg);
	background-position: center center;
	width:70em;
	overflow:auto;
	}

to

#logoWrapperOuter {
	margin:0 auto;
	background-image: url(http://www.fleshmetal.com.au/137/includes/templates/apple_zen/images/header_bg.jpg);
	background-position: center center;
	width:70em;
	overflow:hidden;
	}

Jade/Jet -

Apple Zen I say. Pretty nifty template you have created and are sharing with the Zen community. Very nice.

Wondering about the horizontal dropdown menu component(s) in the header of your template. Would this be available in a separate mod/package which could be placed in the header of any other ZC 1.3x shop (based on template_default css template). I created my own basic stripped down template in Zen cart 1.37 (based on template_default) and would like to integrate a similar horizontal drop down menu idea such as yours into my header. Any possibilities in doing that? Thanks.

Woody

Woodymon:

Jade/Jet -

Apple Zen I say. Pretty nifty template you have created and are sharing with the Zen community. Very nice.

Wondering about the horizontal dropdown menu component(s) in the header of your template. Would this be available in a separate mod/package which could be placed in the header of any other ZC 1.3x shop (based on template_default css template). I created my own basic stripped down template in Zen cart 1.37 (based on template_default) and would like to integrate a similar horizontal drop down menu idea such as yours into my header. Any possibilities in doing that? Thanks.

Woody

Absolutely! I've been meaning to do this, as the old one floating around has a lot of bugs and issues, and it made me lose about 5 years off my life span trying to fix it... so I'd love to spare someone the same struggle. Thanks for reminding me. I can possibly get to that this afternoon, if not... soon! :cool: