Cherry Zen Template Support Thread

[gareth.houston]

I have used the cherry template as a starting point for a new site, which is great. I am having an issue with the drop down menu and JQuery Lightbox. The image pops up behind the drop down menu. Is there any solution to solve this.

[xmisspurrfect]

Hello all!

Thank you for the fabulous template. I have a question/problem...

This is the website: www.tuscanywines.net/catalog/

the right column headers don't want to line up.. it's been driving me nuts! Please help!! :)

[tr1guy]

Hi there! I'm new to the Cherry Zen Thread and I'm trying to get the Add to Cart button under the price. I have tried a variety of things and done some searching, but I can't seem to find a fix.

The catalog is here if you need to see it: Click here.

Or the product page is here: Click here

It is Zen CArt version 1.3.8a Thank you for any help. Byron Wilkins.

[esugrue]

Hi!

I think this has been asked before but I cannot find it anywhere.

I am having an issue with CZ displaying in a clients website.

The RHS sideboxes extend into the background and the header bar seems to be on a separate line than the search box at the far left.

Here is an image of of the RHS sideboxes and you can see the end of the word Checkout is on a second line at the top.



I have set the width of the template as 1000 px in the stylesheet.css which is below in case I need to edit that!!!

/* This section controls the colors for the site. Change green (default) to one of these options: green, green, green, green, green, or green) */

input#searchTop {

background: url("../images/green/rounded-search-input-top.gif") top left no-repeat;

}



#navMainWrapper {

background:url("../images/green/header.gif");

}



h3.leftBoxHeading, h3.rightBoxHeading {

background: url("../images/green/sideboxbg.gif");

}



#navMain a {

background:url("../images/green/tableftE.gif") no-repeat left top;

}



#navMain a span {

background:url("../images/green/tabrightE.gif") no-repeat right top;

}



#navMain a span.last {

background:url("../images/green/tabrightE_last.gif") no-repeat right top;

}



/* end main color changes */





/* other background color or image changes */

body {

background:#84A4C1; /* main site background color, green default */

}



#headerWrapper {

background:#ffffff; /* background color behind logo and sales text, white default */

}



input:focus, select:focus, textarea:focus {

background:#e0e8ef; /* background color for input boxes, light green default */

}



.messageStackWarning, .messageStackError {

background:#990000; /* background color for warning messages, green default */

}



.messageStackSuccess {

background:#929292; /* background color for success messages, green default */

}



.messageStackCaution {

background:#FFFF99; /* background color for caution messages, green default */

}



#cartSubTotal, h2.centerBoxHeading, .rowOdd {

background:#e8e9e9; /* background color for the New Product, Featugreen Products and Specials heading, odd listings, and for the subtotal section in the cart, light green default */

}



TR.tableHeading {

background:#cacaca; /* background color for various table headings (including shopping cart heading), medium green default */

}



.rowEven {

background:#F0F0F0; /* background color for even listings, very light green default */

}



#navEZPagesTop {

background:url("../images/ezbg.gif") repeat-x; /* green background image behind ezpages section */

}



#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. */

}



input.search {

background: url("../images/rounded-search-input.gif") top left no-repeat; /* rounded search image for the search sidebox */

}





/* font color changes */



body {

color:#000000; /* main site font color*/

}



a:link {

color:#4f4f4f; /* main site links color */

text-decoration:none;

}



a:visited {

text-decoration:none; /* color of links after customer has visited them */

color:#313131;

}



a:hover {

color:#000000; /* color when links are hovegreen over */

text-decoration:none;

}



h3.leftBoxHeading, h3.rightBoxHeading {

color:#ffffff; /* right and left box heading color */

}



.leftBoxHeading a, .rightBoxHeading a {

color:#ffffff; /* right and left box LINK heading color */

}



.leftBoxHeading a:hover, .rightBoxHeading a:hover {

color:#E8E9E9; /* right and left box LINK heading color when hovegreen over*/

}



#navMain a span {

color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. */

}



#navMain a:hover span {

color:#ffffff; /* color of header links, HOME, LOGIN, MY ACCOUNT, etc. when hovegreen over */

}



#tagline {

color:#333333; /* tagline text color */

}



#productPrices {

color:#9F1C00; /* color of price */

}



.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount, .alert {

color:#990000; /* color of sale prices and alerts */

}



.messageStackWarning, .messageStackError {

color:#ffffff; /* color of warning message text */

}



/* end of site font color changes */





/* site and main content width section */



html>body {

width: auto;

}



#nw {

width:90%; /* main site width; if you'd prefer a fixed width site, enter the width in px here. */

max-width:1000px; /* prevents the main content from getting wider than 1300px in sites other than IE */

min-width:1000px; /* this prevents the main content from getting smaller than 1000px in browsers OTHER THAN IE. You can make this as small as 800px, BUT any smaller than that, and the top header menu will break into two lines. Also, if you make this width 800px, you will need to make sure your product image on the product info page is no wider than 190px */

}



/* IE only. Controls Width of Site and Main Content*/

* html #nw {

width:expression((d=document.compatMode=="CSS1Compat" ? document.documentElement : document.body) && (d.clientWidth > 1000? "1000px" : d.clientWidth > 1048? "80%" : d.clientWidth < 1048? "1000px" : "80%")); /* this prevents the site from getting smaller than 1000px or wider than 1300px in IE */

}

/* end IE only */

/* end site and main content width section */





/*wrappers - page or section containers*/

#nw {

text-align:left;

vertical-align:top;

margin:0 auto;

}



#headerWrapper {

float:left;

width:100%;

}



#navMainWrapper {

height:32px;

width:100%;

font-size:12px;

}



#logoWrapper {

width:auto;

}



#logo {

float:left;

padding-left:0px;

text-align:center;

}



#taglineWrapper {

width:60%;

float:left;

}



#tagline {

font-size:1.1em;

font-weight:bold;

text-align:center;

padding:25px 0px 35px 0px;

}



#navEZPagesTop {

font-weight:bold;

width:auto;

padding:7px 0;

}



#navEZPagesTop a {

padding:0 8px;

}





#contentMainWrapper {

line-height:1.4;

min-height: 100%;

}



#contentMainWrapperb {

min-height: 100%;

}



* html #contentMainWrapper {

height: 100%;

}



.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 */

}



/* end wrappers - page or section containers*/





* {

margin:0;

padding:0;

}



body {

font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;

font-size:73.5%;

margin-top:0px;

}



a img {

border:none;

}



ul, ol {

text-align:left;

padding-left:25px;

margin-left:10px;

margin-bottom:10px;

}



h1 {

font-size:1.3em;

}



h2 {

font-size:1.2em;

}



h3 {

font-size:1.1em;

}



h4, h5, h6, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger {

font-size:1.0em;

}



LEGEND {

color:#333;

}



.biggerText {

font-size:1.1em;

}



h1, h2, h3, h4, h5, h6 {

margin:.3em 0;

}



CODE {

font-family:tahoma, arial, verdana, helvetica, sans-serif;

font-size:1em;

}



FORM, SELECT {

display:inline;

font-size:1em;

margin:.5em;

}



option {

padding-right:.5em;

}



INPUT{

margin:.3em .5em;

}



html>/**/body input[type=checkbox], html>/**/body input[type=radio] {

float:left;

clear:both;

}



html>/**/body .checkboxLabel, html>/**/body .radioButtonLabel {

margin:0 .2em .5em 0;

float:left;

}



.ratingRow input[type=radio]{

float:none;

margin:0 .5em;

}



TEXTAREA {

margin:auto;

display:block;

width:95%;

}



FIELDSET {

padding:.5em;

margin:.5em 0;

border:1px solid #cccccc;

}



LEGEND {

font-weight:bold;

padding:.3em;

}



h4.optionName {

padding-right:1em;

}



.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {

float:left;

}



LABEL.inputLabel {

width:90%;

float:left;

margin:.3em;

}



LABEL.inputLabelPayment {

width:15em;

float:left;

padding:.5em;

}



LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {

width:12em;

float:left;

}



ADDRESS {

font-style:normal;

padding-right:40px;

}



.clearBoth {

clear:both;

height:0;

font-size:0;

line-height:0;

}



.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}



.clearfix {display: inline-block;}



/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

.clearfix {display: block;}

/* End hide from IE-mac */



HR {

height:1px;

margin:.5em 0;

border:none;

border-bottom:1px solid #9a9a9a;

}



.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {

padding:.2em;

}



/* product info page css */



#cartAdd {

width:125px;

text-align:center;

margin:10px auto;

float:right;

padding-right:10px;

}



#cartAdd input {

margin:.3em 0 0 0;

}



#productDescription {

border:1px solid #bfbfbf;

margin-top:20px;

clear:both;

}



#rightFloat {

float:left;

width:45%;

}



#leftFloat {

float:left;

text-align:center;

}



#productDetailsList {

float:left;

}



ul#productDetailsList {

}



#productAttributes {

width:100%;

float:left;

border:1px solid #bfbfbf;

padding-left:5px;

margin:5px 0 0 10px;

}



#productImage {

margin:0 auto;

text-align:center;

}



.imgLink {

text-align:center;

margin:0 auto;

display:block;

width:100%;

}



#friendReview {

width:200px;

padding:15px 0 10px 0;

float:left;

clear:left;

text-align:left;

}



.reviewCount {

float:left;

padding-left:2px;

}



#productReviewLink {

padding:5px 0;

}



.wrapperAttribsOptions {

line-height:2em;

width:auto;

float:left;

}



.wrapperAttribsOptions h4 {

padding-right:15px;

}



/* end product info page css */





/* css for top menu tabs */



#navMain {

float:right;

width:870px;

line-height:normal;

}



#navMain ul {

float:right;

list-style:none;

}



#navMain li {

display:inline;

}



#navMain a {

float:left;

text-decoration:none;

}



#navMain a span {

float:left;

display:block;

padding:7px 10px 7px 10px;

text-align:center;

width:100px;

cursorointer;

}



/* Commented Backslash Hack hides rule from IE5-Mac \*/

#navMain a span {float:none;}

/* End IE5-Mac hack */



#navMain a:hover {

background-position:0% -32px;

}



#navMain a:hover span {

background-position:100% -32px;

}



/* end css for top menu tabs */





.navNextPrevWrapper {

margin-bottom:1em;

}



.navPrevCounter {

font-size:.9em;

}



.navNextPrevList {

display:inline;

white-space:nowrap;

padding:0 1em;

list-style-type:none;

position:relative;

}



#navSuppWrapper {

width:100%;

margin:0 auto;

float:left;

}



#navSupp {

margin:0 auto;

text-align:center;

padding-top:1em;

}



#navSupp ul {

list-style-type:none;

text-align:center;

line-height:1.5em;

padding: .3em 0;

}



#navCatTabs ul {

list-style-type:none;

text-align:center;

}



#navSupp li, #navCatTabs li {

display:inline;

padding:0 .5em;

}



#navSupp ul li a, #navCatTabs ul li a {

text-decoration:none;

white-space:nowrap;

display:inline;

font-weight:bold;

width:0;

}



#navEZPagesTOCWrapper {

font-weight:bold;

float:right;

height:1%;

border:1px solid #000000;

}



#navEZPagesTOC ul {

padding: .5em 0;

list-style-type:none;

line-height:1.5em;

}



#navEZPagesTOC ul li {

white-space:nowrap;

}



#navEZPagesTOC ul li a {

padding:0 .5em;

}



#navCategoryIcon, .buttonRow, #indexProductListCatDescription {

margin:.5em;

}



#navMainSearch {

float:left;

width:120px;

}



input.search {

border: 0;

width: 100px; /* width of text-display area */

padding: 3px 15px 4px 20px;

font-size: 11px;

}



input#searchTop {

border: 0;

width: 115px; /* width of text-display area */

padding: 4px 15px 5px 20px;

font-size: 12px;

}



* html input#searchTop {

background-attachment: fixed;

}



#navBreadCrumb {

text-align:left;

line-height:1.6em;

font-size:.95em;

padding:.2em 0;

}



#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatugreen, .centerBoxContentsNew, .alert {

vertical-align:top;

}



#productDescription, .shippingEstimatorWrapper {

padding:.5em;

}



.important {

font-weight:bold;

padding:.5em;

}



.gvBal {

float:right;

}



#bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {

padding:.8em;

}



.smallText, #siteinfoLegal, #siteinfoCgreenits, #siteinfoStatus, #siteinfoIP {

font-size:.9em;

}



#siteinfoLegal {

padding-bottom:1em;

clear:both;

}



.tableHeading TH {

border-bottom:1px solid #cccccc;

}



#cartSubTotal {

border-top:1px solid #cccccc;

font-weight:bold;

text-align:right;

line-height:2.2em;

padding-right:2.5em;

}



.tableRow, .tableHeading, #cartSubTotal {

height:2.2em;

}



.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {

padding:.5em 0 0;

}



#cartProdTitle {

text-align:center

}



.cartUnitDisplay, .cartTotalDisplay {

text-align:center;

padding-right:.2em;

}



.cartRemoveItemDisplay input[type=checkbox] {

float:none;

margin-bottom:1em;

}



#scUpdateQuantity {

width:1.8em;

}



#scProductsHeading {

padding-left:2em;

}



.cartQuantity {

width:4em;

}



.cartNewItem {

position:relative; /*do not remove-fixes stupid IEbug*/

}



.cartOldItem {

position:relative; /*do not remove-fixes stupid IEbug*/

}



.cartBoxTotal {

text-align:right;

font-weight:bold;

padding-right:10px;

}



.cartRemoveItemDisplay {

width:5em;

}



.cartAttribsList {

margin-left:1em;

}



#mediaManager {

width:50%;

margin:.2em;

padding:.5em;

}



.normalprice, .productSpecialPriceSale {

text-decoration:line-through;

}



.orderHistList {

margin:1em;

padding:.2em 0;

}



#ezPageBoxList li{

padding:.2em 0;

}



#cartBoxEmpty, #cartBoxVoucherBalance {

font-weight:bold;

}



.totalBox {

width:5.5em;

text-align:right;

padding:.2em;

}



.lineTitle, .amount {

text-align:right;

padding:.2em;

}



.amount {

width:5.5em;

}



#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {

margin:.5em 1em 0 0 ;

}



#cartImage {

margin:.5em 1em;

}



.attribImg {

width:20%;

margin:.3em 0;

}



.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatugreen, .centerBoxContentsNew {

margin:1em 0;

}



.centerBoxContentsProducts {

margin:0 auto;

text-align:center;

width:95%

}



h3.leftBoxHeading, h3.rightBoxHeading {

font-size:1.1em;

font-weight:normal;

height:1.5em;

padding:.2em 0 0 0;

}



h2.centerBoxHeading {

margin:5px auto;

padding:.5em 0;

text-align:center;

border:1px solid #bababa;

line-height:normal;

width:100%;

}



.leftBoxHeading, .rightBoxHeading {

}



.sideBoxContent {

font-size:1.1em;

padding:5px;

}



.sideBoxContent ul {

text-align:left;

list-style-type:none;

padding:0 0 0 10px!important;

margin:0!important;

}



.sideBoxContent li {

}



#categoriesContent, #documentcategoriesContent {

text-align:left;

padding-left:10px;

}



.centegreenContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCgreenits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatugreen, .centerBoxContentsNew, .gvBal, .attribImg {

text-align:center;

}



.productListing-data img {

padding:10px;

}



#upProductsHeading {
text-align:left;
}

#upDateHeading {
text-align:right;
}

/*misc*/
.back {
float:left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight:bold;
}

.rowOdd {
height:1.5em;
vertical-align:top;
}

.rowEven {
height:1.5em;
vertical-align:top;
}

.hiddenField {
display:none;
}

.visibleField {
display:inline;
}

#accountLinksWrapper li {
padding:.5em 0;
display:block;
list-style:none;
}

.accountTotalDisplay, .accountTaxDisplay {
width:20%;
text-align:right;
}

.accountQuantityDisplay {
width:10%;
vertical-align:top
}

TR.tableHeading {
height:2em;
}

#siteMapList {
width:90%;
float:right;
}

.ratingRow {
margin:1em 0 1.5em 0;
}

LABEL#textAreaReviews {
font-weight:normal;
margin:1em 0;
}

.information {
padding: 10px 3px;
line-height: 150%;
}

.smallProductImage {
padding:1em;
}

#sendSpendWrapper {
border:1px solid #cacaca;
float:right;
margin:0 0 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
width:46%;
}

/* css for product image drop shadow and border. To disable the drop shadow and border, simply delete or comment out this section */

#productMainImage {
float:left;
background: url("../images/shadowAlpha.png") no-repeat bottom right !important;
background: url("../images/shadow.gif") no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

#productMainImage img {
display: block;
position: relative;
background: #ffffff;
margin: -3px 6px 6px -3px;
border: 1px solid #a9a9a9; /* defines the border for the product image. To remove the border delete or comment out this line, AND padding: 4px; below */
padding: 4px;
}

/* end css for product image drop shadow */

Any suggestion on what to change to fix the sideboxes expanding into the background?

Thanks
Ernie

[indigo-island]

Hi

I've been trying so hard not to post - but am going round in circles now and have no idea what I'm doing... so any help would be really gratefully received!

I had been using Cherry Zen for a couple of years without problem, before I decided to make some more modifications to my previous modifications (famous last words!)

The home page content is in a table which is 600px wide
It's centered on IE8
but pushed to the left on Firefox

I've fiddled and fiddled with all the width settings and seem to be able to get it right in either FF or IE but not both.

My site is http://www.indigo-island.com/catalog

and I'll love you for ever if you can tell me what I've done - as I've utterly lost the plot!

[Renee]

I'd like to do the same myself. The shop owner and I are finding that no matter the age of the products, they seem to keep cycling up on that page area, not just the newer items. It may have to do with how we update the items, I'm not positive. But until I have time to research that issue it may just be faster to hide the new products area for the moment. Any suggestions would be appreciated. Thanks!

[Renee]

From a previous posting, a user noted that they had problems with their "New Products" area showing very old products randomly. I couldn't seem to find their solution from the rest of the thread or by searching the forum either. I'm running into the same issue. If anyone has any ideas it would be much appreciated. Thanks! -Beth

.....I am not sure if this is template related or not, but I cannot get my "New products for October" to stop showing random things! It doesn't show just the last 30 days like I have the cart setup to do. Help!
.......ANd the new products, yes - they are way more than 30 days old, so I am baffled at this as well.

Thank you again!

[indigo-island]

ignore me at #2575 - I seem to have fixed it with some more random fiddling

[rufusclc]

Hi - on my Cherry Zen site, teh site looks great on Firefox but on IE on the home page only, the boxes from the right side of the home page are moved to the left of the center section, the boxes from the left hand side are moved to the bottom of the center section = with IE see clonecopies.net
Any suggestions or help will be greatly appreciated.
Thanx in advance

[Shelia]

I search through countless pages in this support thread but I couldn't find anything to help with my issue.

My site has worked fine using the cherry zen template for awhile now. Today a customer emailed me to say that in IE the store shifted left (was centered) while he was viewing it. I checked it in FF and its still centered but the text in the sideboxes is alot larger than its been in both browsers.

It doesn't appear to be the template but I was hoping you could point out what section of stylesheet.css control the sidebox text size and the centering in IE.

Thanks for the best template ever!