Cherry Zen Template Support Thread

jettrue:

Hi,

To get an image to the left, with text to the right, you can add align="left" to the image:

<img src="imagename.jpg" alt="alttext" width="40" height="50" align="left" />

To make the sideboxes bigger, you also have to increase the width of the grey image background behind the sideboxes (includes/templates/cherry_zen/images/sidebox.gif) Open it in an image editing software, enlarge it, and re-upload. Read the readme.txt for FULL details on enlarging the sideboxes (there's other changes that need to be made as well).

thanks for helping for being able to list the code so people can just copy and paste it...

I think I will pass on the extending the grey section. It isn't that important and I think I will mess things up. I am loving this template more and more though...thanks!

Hi,
Not sure if you can help me but I hope you can, I have just installed the **Cherry Zen Template onto my other site ****www.electronic-web.com**but for some reason the side boxes don't fit in the page etc with whats in them also the menu on the left of the site is down the bottom of the page?

How do I fix this?

Thanks,
Adam.

Adds:

Hi,
Not sure if you can help me but I hope you can, I have just installed the **Cherry Zen Template onto my other site ****www.electronic-web.com**but for some reason the side boxes don't fit in the page etc with whats in them also the menu on the left of the site is down the bottom of the page?

How do I fix this?

Thanks,
Adam.

You need to re-read the install instructions in the readme.txt. In there it states that when installing the template, you need to change your sidebox widths to 150px, and if you'd like them wider, the readme.txt also includes instructions for making them wider.

It seems that you made changes to the original sidebox.gif (you made it 170px wide), but the first issue is that you saved it as a .png with a .gif name (that will cause problems), and the second issue is that you didn't make it grey all the way across, it is white on the left and right edges, that is why there is white on the website on the edges in the sideboxes. Also, if you want your sideboxes to be 170px wide, you have to change it in "configuration", "Layout settings". Remember that for both the left and right sideboxes you have to enter "170px" in two places.

Anyway, please re-read the readme.txt, it should be able to help you sort out the issue. If you need me to post a 170px wide sidebox.gif, I can do that for you.

jettrue:

You need to re-read the install instructions in the readme.txt. In there it states that when installing the template, you need to change your sidebox widths to 150px, and if you'd like them wider, the readme.txt also includes instructions for making them wider.

It seems that you made changes to the original sidebox.gif (you made it 170px wide), but the first issue is that you saved it as a .png with a .gif name (that will cause problems), and the second issue is that you didn't make it grey all the way across, it is white on the left and right edges, that is why there is white on the website on the edges in the sideboxes. Also, if you want your sideboxes to be 170px wide, you have to change it in "configuration", "Layout settings". Remember that for both the left and right sideboxes you have to enter "170px" in two places.

Anyway, please re-read the readme.txt, it should be able to help you sort out the issue. If you need me to post a 170px wide sidebox.gif, I can do that for you.

Thanks for your reply, I'm still not sure how to fix this and get the left menu to the top as well?
My code for the stylesheet is as follows:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [URL]http://www.zen-cart.com/license/2_0.txt[/URL] GNU Public License V2.0
 * @version $Id: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
 */
 
/* This section controls the colors for the site. Change red (default) to one of these options: orange, yellow, green, blue, purple, or grey) */
input#searchTop {
 background: url("../images/red/rounded-search-input-top.gif") top left no-repeat;
 }
 
#navMainWrapper {
 background:url("../images/red/header.gif");
 }
 
h3.leftBoxHeading, h3.rightBoxHeading {
 background: url("../images/red/sideboxbg.gif");
 }
 
#navMain a {
 background:url("../images/red/tableftE.gif") no-repeat left top;
 }
 
#navMain a span {
 background:url("../images/red/tabrightE.gif") no-repeat right top;
 }
 
#navMain a span.last {
 background:url("../images/red/tabrightE_last.gif") no-repeat right top;
 }
 
/* end main color changes */

/* other background color or image changes */
body {
 background:#84A4C1; /* main site background color, blue 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 blue default */
 }
 
.messageStackWarning, .messageStackError {
 background:#990000;  /* background color for warning messages, red default */
 }
.messageStackSuccess {
 background:#929292;  /* background color for success messages, grey default */
 }
.messageStackCaution {
 background:#FFFF99;  /* background color for caution messages, yellow default */
 }
 
#cartSubTotal, h2.centerBoxHeading, .rowOdd  {
 background:#e8e9e9; /* background color for the New Product, Featured Products and Specials heading, odd listings, and for the subtotal section in the cart, light grey default */
 }
 
TR.tableHeading {
 background:#cacaca; /* background color for various table headings (including shopping cart heading), medium grey default */
 }
 
.rowEven {
 background:#F0F0F0;  /* background color for even listings, very light grey default */
 }
 
#navEZPagesTop {
 background:url("../images/ezbg.gif") repeat-x;  /* grey 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 hovered 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 hovered 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 hovered 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:80%; /* main site width; if you'd prefer a fixed width site, enter the width in px here. */
 max-width:1300px; /* 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 > 1300? "1300px" : 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:15px;
 text-align:center;
 }
#taglineWrapper {
 width:75%;
 float:left;
 }
#tagline {
 font-size:1.1em;
 font-weight:bold;
 text-align:center;
 padding:25px 8px 35px 8px;
 }
 
#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  */
 }
 
* html #navColumnTwo {
    margin-right: -170px !important; /* Fixes IE6 Issue */
    }
 
/* 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:20px;
 }
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:750px;
 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 15px 10px 15px;
 text-align:center;
 width:90px;
 cursor:pointer;
 }
 
/* 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, .centerBoxContentsFeatured, .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, #siteinfoCredits, #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;
   }
 
.mediaTitle {
 float: left;
 }
.mediaTypeLink {
 float: right;
 }
 
.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, .centerBoxContentsFeatured, .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;
 }
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #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, .centerBoxContentsFeatured, .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%;
 }
 
#shoppingcartBody #shippingEstimatorContent {
 clear: both;
 }
.seDisplayedAddressLabel {
 background-color:#85C285;
 text-align: center;
 }
.seDisplayedAddressInfo {
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
 }
#seShipTo {
 padding: 0.2em;
 }
 
.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 */

Adds:

Thanks for your reply, I'm still not sure how to fix this and get the left menu to the top as well?
My code for the stylesheet is as follows:

I have nothing more to say than what the readme.txt says, it gives the exact instructions. Once you follow these instructions, your issue will be fixed.
**
When installing, you get these instructions:**
8. Go to "Configuration", "Layout Settings" and set the left and right sideboxes to "150px" wide. Notice there are two spots to do this for both the left and right sideboxes, so you have to enter "150px" 4 times. If you want a wider column width, pleas read #5 in the TIPS section below.

Tips #5:

5. To change the width of the sideboxes, open up the admin, and change the widths of the left and right columns under "Configuration", "Layout Settings". Note that this needs to be changed in two spots for each side.

Lets say you increase the width of both sideboxes to 170px (20px more - the original is 150px), you'll need to open up includes/templates/cherry_zen/css/stylesheet.css and change .outer's padding-right to 170px (20 px more) and change all the instances of 165px in the section below, to 185px (20 px more):
Code:

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

NOW, the grey background behind the sidebox will still be 150px wide, so you need to open up includes/templates/cherry_zen/images/sidebox.gif and change it to 170px wide, and re-upload the changed image.

Could you please help this newbie. I am helping a friend set up her zen cart.

I know nothing about ftp and all things zen cart. her hosting is though host 99 now i really want to use this template but do not even know where to begin.

so any help you could give me with this is greatly apreciated.

We have installed the cart I have worked out the modules etc but when it comes to uploading etc with the file manager I am at a loss.

I am use to doing basic websites through a different hosting company all together.:no:

Thank you for this template. I have read the readme file and still cant find where to change the dimensions of the header. I wanted the header to be taller.

How can I change the size (height) of the NavMain bar, the one in gray on for example https://www.zepto-computers.nl that contains: Home, Aanmelden (dutch for logon), Mijn account (My account) etc...
For one item I basically need two lines of text, so the bar needs to be "higher".

Can't figure out what I need to change as I can't see it in the stylesheet.

Thanks,

wjansen

jettrue:

I have nothing more to say than what the readme.txt says, it gives the exact instructions. Once you follow these instructions, your issue will be fixed.

When installing, you get these instructions:
8. Go to "Configuration", "Layout Settings" and set the left and right sideboxes to "150px" wide. Notice there are two spots to do this for both the left and right sideboxes, so you have to enter "150px" 4 times. If you want a wider column width, pleas read #5 in the TIPS section below.

Tips #5:

5. To change the width of the sideboxes, open up the admin, and change the widths of the left and right columns under "Configuration", "Layout Settings". Note that this needs to be changed in two spots for each side.

Lets say you increase the width of both sideboxes to 170px (20px more - the original is 150px), you'll need to open up includes/templates/cherry_zen/css/stylesheet.css and change .outer's padding-right to 170px (20 px more) and change all the instances of 165px in the section below, to 185px (20 px more):
Code:

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

NOW, the grey background behind the sidebox will still be 150px wide, so you need to open up includes/templates/cherry_zen/images/sidebox.gif and change it to 170px wide, and re-upload the changed image.

Ok thanks for your reply, away from that is there away of putting the grid style layout into my cuurnt template at all?

Thanks.
Adam.

I still dont know how to make the header. Meaning the portion with the logo taller?

Ok I figured out how to increase the height of the header however can someone tell me how to get the brown underneath the top nav bar to go all the way across the screen?

check out http://www.somthnxtra.com

Thank you for your assistance

Hi Jet

What I would like to do is to move the original price which sits to the right side of the product image in the product listing page, to below the product image.

Where abouts would I find this in the css or is this cored into one of the template files?

TIA

Hello,
The readme file said to remove the float:left; from the #logo tag in the css file and it would center my logo. It seems to have worked just fine in IE7 but Firefox still shows the logo to the left. Is there something I am missing?

Thanks

CnTGifts:

How do you change the grey i nthe side boxes under like categories

Open /includes/templates/cherry_zen/images/sidebox.gif in your image editing program (I use Adobe Fireworks). Then change the color of the graphic to whatever you want. Once it's changed and saved, upload it again to the same place.

That's the basics of it as I know it.

HTH

FatGuyinAZ:

Hello,
The readme file said to remove the float:left; from the #logo tag in the css file and it would center my logo. It seems to have worked just fine in IE7 but Firefox still shows the logo to the left. Is there something I am missing?

Thanks

Try adding margin:0 auto; to #logo and let me know if that works.

heavenlynights:

Hi Jet

What I would like to do is to move the original price which sits to the right side of the product image in the product listing page, to below the product image.

Where abouts would I find this in the css or is this cored into one of the template files?

TIA

You could add this to your css:
.centerBoxContentsProducts img {display:block;text-align:center;margin:0 auto;}

mrsowl:

Ok I figured out how to increase the height of the header however can someone tell me how to get the brown underneath the top nav bar to go all the way across the screen?

check out http://www.somthnxtra.com

Thank you for your assistance

Change #navMainWrapper back to what it was originally:

#navMainWrapper {
	height:32px;
	width:100%;
	font-size:12px;
	}

Thank you. It didnt go all the way across but it definetaly improved the look. Thank you for this template it is simply beautiful.

jettrue:

Try adding margin:0 auto; to #logo and let me know if that works.

Good morning,
Unfortunately that didn't do anything. Here is the items in the css file in the #logo section:

#logo {
    margin:0 auto;
    padding-left:15px;
    text-align:center;
    }

I see other sites that have gotten their logo centered with Firefox so I must just be missing something. I will keep trying anything you suggest.

Thank you,

Great template, great support!!!

I am also testing it and solved some issues from this post, thanks Jettrue!

I have a question, but am not sure if it is related to this template or not, just post here see if someone else has the same finding:

I used cherry for two languages' default template, and I set the language based on browser, however, it seems this setting does not work, only Engligh is displayed automatically even for a browser with another language. Though the visitors can chose the language after the page is loaded, but I prefer the language is set according the user's browser. Any idea?

Thanks!