Cherry Zen Template Support Thread

[jettrue]

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

[paulmcdonald]

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?

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

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

[ideasgirl]

Jettrue, do you have an explanation for my issue?

[lankeeyankee]

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!

Thanks a million!!

Matt

[jettrue]

Jettrue, do you have an explanation for my issue?

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!

[jettrue]

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)

[jettrue]

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.

[jettrue]

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/in...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/showpo...&postcount=288