Cherry Zen Template Support Thread

Hi Jade,

I'm having a little trouble with using the css flyout category menu with this template and viewed in Firefox. I tried a different template to see if it is the menu mod or the template and using the default classic template the problem disappears in FF which leads me to believe it's something with Cherry Zen.

Basically, what happens is the box below the category box seems to get elongated and the box heading of the box below ends up near the top of the menu category but under it and part of the lower box is covered up. I have attached a screenshot to show you what is happening, the circled area shows where the sidebox edge is interrupted because the information box heading is there underneath the categories which you can see much better in screenshot2. With a text box like the information box, the text gets all splattered as you can see in the screeenshot.

In IE7 it's fine. I've looked through the css category files and any other file I can think of to try to figure it out. Any suggestions?

Thanks!

Matt

lankeeyankee:

Hi Jade,

I'm having a little trouble with using the css flyout category menu with this template and viewed in Firefox. I tried a different template to see if it is the menu mod or the template and using the default classic template the problem disappears in FF which leads me to believe it's something with Cherry Zen.

Basically, what happens is the box below the category box seems to get elongated and the box heading of the box below ends up near the top of the menu category but under it and part of the lower box is covered up. I have attached a screenshot to show you what is happening, the circled area shows where the sidebox edge is interrupted because the information box heading is there underneath the categories which you can see much better in screenshot2. With a text box like the information box, the text gets all splattered as you can see in the screeenshot.

In IE7 it's fine. I've looked through the css category files and any other file I can think of to try to figure it out. Any suggestions?

Thanks!

Matt

Link please?

jettrue:

Link please?

drumfactorydirect.com. don't laugh, it's a work in progress and we're trying out all sorts of things. :-)

Hi everyone,

I'm new here. I have some query on cherry zen template. Hope i'm not asking a stupid question here :blush:

How come my website which using cherry zen does not have the function as the one I circled in yellow in the following image.

anyone can help? thanks a lot.

[IMG]http://img502.imageshack.us/img502/7020/cherryzenkb0.jpg[/IMG]
[IMG]http://img502.imageshack.us/img502/7020/cherryzenkb0.466dd0d31e.jpg[/IMG]

First the top bar you have circled relates to EZ-Pages - go to configuration - EZ page Settings and set the display status - Header bar to ON. Second the picture you circled if you had read all of the Read Me with the template you will see that is a contribution called ImageHandler 2 (IH2) that was used and was NOT included with the template.

I love the look of Cherry Zen, but the sidebox headers keep bleeding into the main section. I haven't changed the stylesheet at all yet. Can you give me a fix? There's a picture here in case I haven't explained what I mean (which is all too likely with me!)

I used this template as a base for a customer's cart. And I've seen that everything looks good except that ONLY on IE6 the left column pic (in this case the lady's body) drops down creating an empty space on left column, horrible, but only on main page, doesn't happen on other pages. :blink:

The site is: www.descreetlingerie . com/store

I am having the same issue as Adept. Can anyone suggest a fix

paulmcdonald:

I am having the same issue as Adept. Can anyone suggest a fix

Check the width of the left and right sideboxes - go to "Configuration", "Layout Settings" and set the left and right sideboxes to "150px" wide. There are two spots to do this in. Your sideboxes look wider than that now and this could be your problem.

adept:

I love the look of Cherry Zen, but the sidebox headers keep bleeding into the main section. I haven't changed the stylesheet at all yet. Can you give me a fix? There's a picture here in case I haven't explained what I mean (which is all too likely with me!)

moonbeam is right, you have to change the sidebox widths, which is IN the readme in the install instructions.

lankeeyankee:

drumfactorydirect.com. don't laugh, it's a work in progress and we're trying out all sorts of things. :-)

remove the float:left from this section in the categories css:

div#nav-cat {float: left; width: 149px; margin: 0 0 0 0px;
background-color:#FFFFFF; font-weight:bold;}

Jettrue ....

I have the cherry zen template loaded successfully, but I have a problem with the side headers and text running into the center (main) part of the template. What do I need to adjust to make the text on either side stay in the grey portion of the template?

Cancel that last one. I was following the directions and set the column width's to 150px as indicated. That did not work.

I added width:150px in the stylesheet.css:

.leftBoxHeading, .rightBoxHeading {
margin:0;
width:150px;
}

.sideBoxContent {
font-size:1.1em;
padding:5px 0;
width:150px;
}

Hi Jade,

Thanks for the great template. I would like to ask you if there is any way to have the product info to the right side of its picture. As at the moment my product info is below the product picture and you have to scroll down to see it.

Jettrue, do you have an explanation for my issue? :huh:

jettrue:

remove the float:left from this section in the categories css:

div#nav-cat {float: left; width: 149px; margin: 0 0 0 0px;
background-color:#FFFFFF; font-weight:bold;}

Right as always!:D

Thanks a million!!

Matt

ideasgirl:

Jettrue, do you have an explanation for my issue? :huh:

I started to check it out, it looks like you changed a lot of the way the sideboxes work in the css. Apparently IE6 thinks there is not enough room for the left sidebox, and that it needs to move all the way down past the site's main content. I would try and get your site closer to how my test site is designed, as far as having the sideboxes background color set by images :

#contentMainWrapper {
background:url("../images/sidebox.gif") 100% 0 repeat-y; /* This is the right column background "faked" with an image. */
background-color:#ffffff; /*background color for the main "content" of the site */
}

#contentMainWrapperb {
background: url("../images/sidebox.gif") 0 0 repeat-y; /* This is the left column background "faked" with an image. */
}

I would have the sideboxes padding more like in my test site:

.outer {
padding-left: 165px; /* Same width as margin-left for the float-wrap div /
padding-right: 150px; / Our right column width */
}

.inner {
width: 100%;
}

.float-wrap {
float: left;
width: 97%;
margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}

#content {
float: right;
margin-right: -165px; /* Same length as .outer padding-left but with negative value /
width: 100%;
line-height:1.6;
position: relative; / IE needs this */
}

.contentWrap{
padding: 5px 0 5px 5px;
}

#navColumnOne {
float: left;
position: relative; /* IE needs this */
}

#navColumnTwo {
float: right;
margin-right: -150px; /* This negative margin-right value is in this example the same as the right column width. /
position: relative; / IE needs this */

Then you could decrease your left padding on contentWrap, and decrease your padding on sideBoxContent

I have no simple answer for you, sorry!

skipper_2:

Hi Jade,

Thanks for the great template. I would like to ask you if there is any way to have the product info to the right side of its picture. As at the moment my product info is below the product picture and you have to scroll down to see it.

Open up includes/templates/YOUR_TEMPLATE/templates/tpl_product_info_display.php and find the product description section (that whole file is nicely blocked off into sections), and cut and paste the description section where you'd like it. (after product name, after product details, after product attributes, wherever you'd like it)

paulmcdonald:

Cancel that last one. I was following the directions and set the column width's to 150px as indicated. That did not work.

I added width:150px in the stylesheet.css:

.leftBoxHeading, .rightBoxHeading {
margin:0;
width:150px;
}

.sideBoxContent {
font-size:1.1em;
padding:5px 0;
width:150px;
}

That's not necessary in my test site, so I wonder if something else was going on on your site. But for most users, just entering "150px" in BOTH spots in the "Configuration", "Layout Settings" for the sideboxes works just fine (note there are two spots for both the left and right sideboxes to enter a width, so actually there are 4 spots where you have to enter 150px), there is no need to do what you did in the css.

grace83:

I just installed your template, and love it! Great job! I do have a question though... I have my moniter settings set to display at 1280x1024, and the site looks just right. The other computer in the house is set to 1024x768, and I get a horizontal scroll bar when viewed at this resolution. What and where do I change the settings to fix this?

(Could it be as simple as resizing my logo/banner? It's 1000x200px)

http://www.mainelyratrescue.org/store

Thanks for your help!

You're probably not following this thread anymore, but I went back to your site, to see if your issue was resolved, then began browsing around for fun (I like rodents, LOL) and I see that you are using really large product images, which look great, but it causes your product name and price to be below the image instead of to the right of it when the site is narrow, and if you add any drop down menu options, they won't fit to the right either.

So I'd suggest to either shrink down your product image size, or change the rightFloat width in the css to 30%. Once you shrink down to 30% though, you'll still have an issue like with this page:
http://mainelyratrescue.org/store/index.php?main_page=product_info&products_id=11

Cause the description box will be long and will extend into the right sideboxes. So i'd suggest making your product images smaller, or using only the left sideboxes to have more room for your products. The instructions for using only left sideboxes are here:
http://www.zen-cart.com/forum/showpost.php?p=436532&postcount=288