Apple Zen Support Thread

[jettrue]

Here's one more noob question...I'd like the products to display 3 items across ALWAYS, like they do on my "feature" page...can someone please spare me the agony, and point me in the right direction to accomplish this?

Thanks!

You'd have to install the Column Layout Grid Mod that is in the download section.

[jettrue]

Jade- i think you might be the only one who could figure this out- no one seems to post on an answer- i the apple zen temp on the events calendar for the heading on the side box the pull down menu is showing over the heading for Events calendar- any idea on whats going on- ive pasted a screen shot-
i cant seem to get this one fixed and ive posted in the "events calendar" threads.

I think I'd need to see your site please.

[torrence]

You'd have to install the Column Layout Grid Mod that is in the download section.

Done...worked like a charm! Thx for your help. If i could bother you one last time, I'd be much appreciative!!!

I'd like some kind of graphic or banner for the top of the page(s), but am finding what instructions I HAVE found to be confusing. Can anyone point me to a good tutorial?

[blackpaladin]

Jade -

How does one display the "date available" of a product in the product listing? I'm guessing that "product_listing.php" needs to be altered. I was wondering if there is a quick way to do it as opposed to having to do major surgery on this file...?

Thanks,
Vince

[jettrue]

Jade -

How does one display the "date available" of a product in the product listing? I'm guessing that "product_listing.php" needs to be altered. I was wondering if there is a quick way to do it as opposed to having to do major surgery on this file...?

Thanks,
Vince

I'm not positive about this, you should start a new thread about this in the general forum.

[srturner47]

If anyone is interested, I got this template to work in IE5. This fixes an alignment issue where the header is centered, but the main part of the website is not in IE5.

Just add "text-align:center;" to the mainwrapper in stylesheet.css. It should now read:

#mainWrapper {
text-align:center;
vertical-align:top;
position:relative;
padding-bottom:25px;
}

With my website, I still had one more problem....but, Jettrue's example site didn't...this might just be my site. If your menus are pushed to the right side of the screen in ie5 after making the change above, add "left:0;" to dropmenuwrapper in stylesheet.css. It should now read:

#dropMenuWrapper {
width:100%;
background:#6699CC; /* remove background:#929292; for narrow header*/
margin:0 auto;
text-align:center;
height:2.18em;
position:absolute;
top:0;
left:0;
}

Everything else in IE5 seems to work fairly well. There are a few other really small quirks I noticed, but they don't seem to be related to this template and they don't affect the webpage in any major ways. (Of course, all IE6 bugs are still present in IE5, but this gets rid of the one extra bug in IE5, the alignment issue.)

I hope this helps someone!

By the way, jettrue, did you have a chance to look at my post about the <li> tags on the category menu and their effect on ie6? It would be nice if I could fix this for the category menu. If not, I can always just have the main categories listed, but I would prefer them to slide out. That is one of the neatest parts of your dropdown menu mod. Thanks!

[srturner47]

FYI... I had never tried IE5.5, and it seems that there are still problems, even with this fix in IE5.5. But, it works well in IE5! :)

[srturner47]

Alright! I figured out some fixes for this template that fix some bugs and make it more compatible with a variety of browsers. I hope this can help someone else as well. Here's what I did:

1) There is a bug with the footer that causes the bottom shadow line to display in the wrong location on longer pages sometimes. When this happens, if the user rolls over the drop down menu it immediately fixes the position of the line on the page. Refreshing the page will make the problem return.

The fix is to seperate navSupp and navSuppWrapper from the generation of this line.

Copy tpl_footer.php to the zen cart override directory and call the new bottomLine class. Here's what should be added:

<!--bof-navigation display -->
ADD THIS:<div id="bottomLineWrapper">
ADD THIS:<div id="bottomLine">
ADD THIS:</div></div>
<div id="navSuppWrapper">
<div id="navSupp">
<ul>

Then, edit stylesheet.css. Add the new classes for bottomLine and bottomLineWrapper:

#bottomLineWrapper {
width:100%;
margin:0 auto;
margin-top:-6px;
/*float:left;*/
position:relative;
top:2.18em;
}

#bottomLine {
margin:0 auto;
text-align:center;
width:70.3em;
padding-top:1em;
}

Then, change the following instances of navSupp to bottomLine. ONLY change these instances. Leave the others alone.

* end of changes for narrow header */

CHANGE THIS:* html #centerColumnWrapper, * html #centerColumnWrapperb, * html #headerWrapperb, * html #headerWrapperc, * html #dropMenuWrapperc, * html #dropMenuWrapperd, * html #bottomLine {
background:none!important; /* Hides the transparent shadows from older versions of IE */
}

#centerColumnWrapper {
background:url(../images/shadowRight.png) repeat-y 100% 0;
}

#centerColumnWrapperb {
background:url(../images/shadowLeft.png) repeat-y 0 0;
}

CHANGETHIS:#bottomLine {
background:url(../images/shadowAlpha_bot.png) repeat-x top;
}

* {
margin:0;
padding:0;
}

All set! That should fix this.


2) I've been trying to find a fix for the hovering in the space where there is no text problem with ie5, ie5.5, and ie6 on the drop-menu. I previously was doing some stuff with <li> that was helping, but didn't work for the categories. Forget about that! There is a much easier way!! This new way fixes the problem with no side-effects....except for ie5.5. I'll explain in #3.

Make this change in stylesheet_header_menu.css:

div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;
ADD:/* Hides from IE5-mac \*/

ADD:height: 1%;

CHANGE:/* End hide from IE5-mac */ padding: .6em 0; text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu li a.noLine {border:none;}

That fixes the hovering over no text problems with ie5, ie5.5, and ie6. :)

3)But.....It introduces a new problem with ie5.5. The menus basically stop working. I played around until I found a way to restore 99% of this functionality in ie5.5. But, just an FYI, ie5.5 doesn't play nice with this template anyway. It looks terrible. The header logo blows up really large, and the breadcrumb, body, and header are all aligned differently. Weird, because it all works fine in ie5 with the fix I wrote about before this post.

Anyway, here's how to make the menus functional in ie5.5 again after implementing the fix for ie5 and ie6. Make these changes to stylesheet_header_menu.css:

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
CHANGE: /*line-height:1em;*/
width:16.667%;
}

div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#006699; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}

CHANGE: div#dropMenu li:hover {display: block;}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */

Now everything works with the menus except when you hover over the blank space around the words of drop-down menu titles (HOME, CATEGORIES, INFORMATION, etc...). But, the white space in the drop-down menus themselves works fine. I tested this tweak with Firefox 2, IE7, IE6, IE5, and IE5.5, and they don't seem to have any negative effects with other browser, yet this fix problems in IE5.5.

4) Last -- In IE 5, 5.5, 6, and 7 if you increase the text size only once (not twice, that works fine) the SHOPPING CART will fall to the next line and mess up the menus. Here the fix. Add this in stylesheet_header_menu.css:

iv#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
/*line-height:1em;*/
width:16.667%;
ADD: *width:16.649%;
}

Whew! That was a lot of work. :) I hope someone finds these tweaks useful. Maybe jettrue will include some of them in the next release of this template.

The only big bug/compatibility problem that I can find which is left is the blank subcategories when you leave a subcategory and return in IE7. I'm not sure I have the skills to fix this problem, but I hope someone tackles it someday.

[srturner47]

Quick update: After a little more testing, I have realized that one of the fixes for IE5.5 actually doesn't do anything. Plus, it slows down the menus in all browsers. The other ie5.5 fix still seems to help.
So.... for fix #3 above I changed it as follows:

div#dropMenu li {
position:relative;
list-style:none;
margin:0;
float:left;
THIS STILL NEEDS TO BE CHANGED - /*line-height:1em;*/
width:16.667%;
*width:16.649%;
}

div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#006699; /*background color of top menu when NOT selected. */
z-index:1000;
float:left;
}

KEEP THIS LINE AS IS!!!! - div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}

[jettrue]

By the way, jettrue, did you have a chance to look at my post about the <li> tags on the category menu and their effect on ie6? It would be nice if I could fix this for the category menu. If not, I can always just have the main categories listed, but I would prefer them to slide out. That is one of the neatest parts of your dropdown menu mod. Thanks!

I'm not really following what you're trying to fix, and the method you're doing is causing the menu to actually be incorrect in HTML coding, though I guess it still works in other browsers by the blessing of a quirk. The includes/classes/categories_ul_generator.php controls the drop down categories portion, though its such a complicated bit of machinery, that I fear removing <li>'s in it will break it all together.