Printable View
thanks for helping for being able to list the code so people can just copy and paste it...Quote:
Originally Posted by jettrue
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.combut 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.Quote:
Originally Posted by Adds
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?Quote:
Originally Posted by jettrue
My code for the stylesheet is as follows:
Code:/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2007 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt 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 */
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.Quote:
Originally Posted by Adds
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 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
Ok thanks for your reply, away from that is there away of putting the grid style layout into my cuurnt template at all?Quote:
Originally Posted by jettrue
Thanks.
Adam.
I still dont know how to make the header. Meaning the portion with the logo taller?