Looking for a simple WHITE Template as seen at http://www....

[TomsShop]

Hey,

I am completly new to this zen but I like what I see.

I order not to reinvent the wheel I thought I'll post this request. OK, the reason might also be that I don't have the brain to do it as well.

I am looking for a plain, simple white layout that has just very little colour in it.

I very, very much like the look of this page http://www.mug-shop.co.uk/ with it "little bit of orange".

Also this page http://www.myoos.de/demo/ even thought it is not a zen page but that page layout really rocks my boat. HAS ANYONE GOT A TEMPLATE THAT LOOKS LIKE THIS???

Thanks for your help

Tom

[Kim]

There are some very nice clean templates available in the dowloads section that can be further customized to your liking.

[schoolboy]

We started off with the standard template and in a couple of hours, ended up with THIS just by editing the stylesheet (for the most part anyway). If you want the stylesheets, pick them up off the site with my compliments.

[TomsShop]

Hey

and thanks for the relay. I realy like your template, the colours and the "hover over a picture" feature.

It might sound silly but how can I get hold of the template, seeing that you did offer me to get a "copy". Silly, because I am completly new to this game and don't know a lot.

Thanks for beeing so kind and offering me your help. Brill !!!

Tom

[schoolboy]

Tom,

Elsewhere on this site (home page) is a DOWNLOAD button for a zipped up file of zen cart 1.3.7.

Download this to your hard drive and unzip it into a new folder called zen_cart_1_3_7.

You now have everything you need to begin the process of setting up your webshop.

Get a hosting account from one of THESE HOSTS.

Some will offer to set up zen cart for you as part of their standard hosting service which is great if you want it done absolutely properly from the start.

If you want to have a go at setting it up yourself (to learn more about the procedure) then do so, but this is entirely your choice.

Ask your host to set it up with the DEMO PRODUCTS INCLUDED.

For first-time zenners, this is the best way of learning how the program works. You can remove the DEMO stuff later.

While everything is being set up, order a copy of the NEW BOOK.

By the time the book arrives, you'll be ready to join the exciting world of zen-powered e-commerce!

When you reach the point at which you understand how the STYLESHEET governs the look and design of zencart, send me a Private Message (PM). Just call up my contact details (SCHOOLBOY). I don't mind if you e-mail me direct.

I will then send you a copy of my stylesheets that create that white website.

All you will need to do is REPLACE the existing stylesheets in your zencart template folders, with my stylesheets.

You will have to adjust a few things to accommodate your own images (eg: sizes) and a few other layout settings (sidebox width), but that stylesheet will create the overall effect you want.

[TomsShop]

Hey,

a few days ago you did offer to email me the CSS for your brill layout.

I've set up zen-cart on my server and would like to take up your offer, please.

I'm still not very familiar with Zen-Cart but CSS, HTML and the basics of PHP are known to me.

So I hope I will pick up the ins&outs of Zen-Cart pretty quickly. OK, the basics at least.

Thank Tom

[schoolboy]

TOM...

Here's the css... (copy the text and save it as stylesheet.css ... then RENAME your stylesheet.css to "stylesheet_old.txt"... then upload my stylesheet.css to you css folder.)

NB: YOU MAY HAVE TO ALTER SPACINGS (USUALLY DENOTED BY "PX" OR "EM") TO SUIT YOUR LAYOUT. YOU USE THIS AT YOUR OWN RISK, THERE ARE NO WARRANTIES.

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 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 4813 2006-10-23 02:13:53Z drbyte $
 */

body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #000000;
    background-color: #ffffff;
    }

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
    color: #ed1c24;
    text-decoration: none;
    }
 
a:visited {
    color: #3300FF;
    text-decoration: none;
    }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #f7941d;
    }

a:active {
    color: #0000FF;
    }

h1 {
    font-size: 1.5em;
    color: #9a9a9a;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.3em;
    }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    font-size: 1.1em;
    }

.biggerText {
    font-size: 1.2em;
    }

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 0;
    }

/*  Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
    position: relative;
    }
*html .centerColumn {
    height: 1%;
    }
*/

CODE {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 1em;
    }

FORM, SELECT, INPUT {
    display: inline;
    font-size: 1em;
    margin: 0.1em;
    }

TEXTAREA {
    float: left;
    margin: auto;
    display: block;
    width: 95%;
    }

input:focus, select:focus, textarea:focus {
    background: #E4FEF5;
    }

FIELDSET {
    padding: 0.5em;
    margin: 0.5em 0em;
    border: 1px solid #cccccc;
    }

LEGEND {
    font-weight: bold;
    padding: 0.3em;
    }

LABEL, h4.optionName {
    line-height: 1.5em;
    padding: 0.2em;
    }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
    margin: 0.5em 0.3em;
    }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

LABEL.inputLabel {
    width: 9em;
    float: left;
    }

LABEL.inputLabelPayment {
    width: 14em;
    float: left;
    padding-left: 2.5em;
    }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
    width: 11em;
    float: left;
    }

#checkoutPayment LABEL.radioButtonLabel {
    font-weight: bold;
    }

P, ADDRESS {
    padding: 0.5em;
    }

ADDRESS {
    font-style: normal;
    }

.clearBoth {
    clear: both;
    }

HR {
    height: 1px;
    margin-top: 0.5em;
    border: none;
    border-bottom: 1px solid #9a9a9a;
    }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-height: 1.8em;
    padding: 0.2em;
    border: 1px solid #9a9a9a;
    }

.messageStackWarning, .messageStackError {
    background-color: #ff0000;
    color: #ffffff;
    }

.messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

.messageStackCaution {
    background-color: #FFFF66;
    color: #000000;
    }

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 750px;
    vertical-align: top;
    border: 0px solid #9a9a9a;
    }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    }

#logoWrapper{
    background-image: url(../images/header_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:88px;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 
#navColumnOneWrapper, #navColumnTwoWrapper {
    margin-left: 0.5em;
    margin-right: 0.5em;
    }
    
#tagline {
    color:#000000;
    font-size: 2em;
    text-align : center;
    vertical-align: middle;
    }

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

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    margin: 0;
    width: 47%;
    }

.wrapperAttribsOptions {
    margin: 0.3em 0em;
    }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
    margin: 0em;
    font-size: 0.9em;
    }
.navNextPrevList {
    display: inline;
    white-space: nowrap;
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    }

#navMainWrapper {
    margin: 0em;
    /*background-color: #abbbd3;*/
    /*background-image: url(../images/tile_back.gif);*/
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #ffffff;
    height: 2.1em;
    }

#navSuppWrapper, #navCatTabsWrapper {
    margin: 0em;
    background-color: #abbbd3;
    background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    font-weight: bold;
    color: #ffffff;
    height: 2.1em;
    }

#navCatTabsWrapper {
    background-color: #ffffff;
    color: #9a9a9a;
    background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

#navSupp ul li, #navCatTabs ul li {
    display: inline;
    }
    
    /*If you want the header navigation to display again (eg: Log In  :  Home  :  Shopping Cart) then change display: none; (below) to display: inline; .*/
#navMain ul li {
    display: none;
    }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    }

#navCatTabs ul li a {
    color: #9a9a9a;
    }

#navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 1px solid #9a9a9a;
    }

#navEZPagesTOC ul {
    margin: 0;
    padding: 0.5em 0em;
    list-style-type: none;
    line-height: 1.5em;
    }

#navEZPagesTOC ul li {
    white-space: nowrap;
    }

#navEZPagesTOC ul li a {
    padding: 0em 0.5em;
    margin: 0;
    }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    margin: 0.5em;
    }

#navMainSearch {
    float: right;
    }

#navBreadCrumb {
    padding: 0.5em 0.5em;
    background-color: #ffffff;
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    }

#navEZPagesTop {
    background-color: #abbbd3;
    background-image: url(../images/tile_back.gif);
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    padding: 0.5em;
    }

#navColumnOne, #navColumnTwo {
    background-color: transparent;
    }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    vertical-align: top;
    }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    padding: 0.5em;
    }

.alert {
    color: #FF0000;
    margin-left: 0.5em;
    }
.advisory {}
.important {
    font-weight: bold;
    }
.notice {}
.rating{}
.gvBal {
    float: right;
    }
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
    padding: 0.8em;
    }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    font-size: 0.9em;
    }

/*Shopping Cart Display*/
#cartAdd {
    /*float: right;*/
    text-align: center;
    margin: 1em;
    border: 1px solid #C2C2C2;
    padding: 1em;
    }

.tableHeading TH {
    border-bottom: 1px solid #9a9a9a;
    }

.tableHeading, #cartSubTotal {
    background-color: #e9e9e9;
     }

#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: 0.5em 0em;
    }

.cartUnitDisplay, .cartTotalDisplay {
    text-align: right;
    padding-right: 0.2em;
    }

#scUpdateQuantity {
    width: 2em;
    }

.cartQuantity {
    width: 4.7em;
    }

.cartNewItem {
    color: #33CC33;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartOldItem {
    color: #660099;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartBoxTotal {
    text-align: right;
    font-weight: bold;
    }

.cartRemoveItemDisplay {
    width: 3.5em;
    }

.cartAttribsList {
    margin-left: 1em;
    }

#mediaManager {
    width: 50%; 
    margin: 0.2em;
    padding: 0.5em;
    background-color: #E4FEf5;
    border: 1px solid #003D00;
    }

.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
    }

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: #ff0000;
    }

.orderHistList {
    margin: 1em;
    padding: 0.2em 0em;
    list-style-type: none;
    } 

#cartBoxListWrapper ul, #ezPageBoxList ul {
    list-style-type: none;
    }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
    margin: 0;
    padding: 0.2em 0em;
    } 

#cartBoxEmpty, #cartBoxVoucherBalance {
    font-weight: bold;
    }

.totalBox {
    width: 5.5em;
    text-align: right;
    padding: 0.2em;
    }

.lineTitle, .amount {
    text-align: right;
    padding: 0.2em;
    }

.amount {
    width: 5.5em;
    }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    margin: 0em 1em 1em 0em ;
    }

.categoryIcon {}

#cartImage {
    margin: 0.5em 1em;
    }

/*Attributes*/
.attribImg {
    width: 20%;
    margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
    margin: 1em 0em;
    }

.centerBoxWrapper {
    border: 0px solid #9a9a9a;
    height: 1%;
    margin: 1.1em 0;
    }

h2.centerBoxHeading {
    font-size: 1.3em;
    color: #ffffff;
    }

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 1em;
    color: #ffffff;
    }
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
    font-size: 0.9em;
    color: #ffffff;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #abbbd3;
    background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    }

.leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 0px solid #9a9a9a;
    border-bottom: 5px solid #ffffff;
    margin-top: 1.5em;
    }

.sideBoxContent {
    background-color: #ffffff;
    padding: 0.4em;
    }

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    color: #FFFF33;
    text-decoration: none;
    } 

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
    color: #FFFFFF;
    }

.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, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    text-align: center;
    }

#bestsellers .wrapper {
    margin: 0em 0em 0em 1.5em;
    }

#bestsellers ol {
    padding: 0;
    margin-left: 1.1em;
    }

#bestsellers li {
    padding: 0;
    margin: 0.3em 0em 0.3em 0em;
    }

#bannerboxHeading {
    background-color: #0000CC;
}

#upProductsHeading {
    text-align: left;
    }

#upDateHeading {
    text-align: right;
    }

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
    color: #ed1c24;
    text-decoration: none;
    }
A.category-links, A.category-links:visited {
    color: #004080;
    text-decoration: none;
    }
A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
    color: #FF0000;
    text-decoration: none;
    }
SPAN.category-subs-parent {
    font-weight: bold;
    }
SPAN.category-subs-selected {
    font-weight: bold;
    }
/* end categories box links */

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

.forward {
    float: right;
    }

.bold {
    font-weight: bold;
    }

.rowOdd {
    background-color: #E8E8E8;
    height: 1.5em;
    vertical-align: top;
    }

.rowEven {
    background-color: #F0F0F0;
    height: 1.5em;
    vertical-align: top;
    }

.hiddenField {
    display: none;
}
.visibleField {
    display: inline;
}

CAPTION {
    /*display: none;*/
    }

#myAccountGen li, #myAccountNotify li {
    margin: 0;
    } 

.accountTotalDisplay, .accountTaxDisplay {
    width: 20%;
    text-align: right;
    /*vertical-align: top*/
    }

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

TR.tableHeading {
    background-color: #cacaca;
    height: 2em;
    }

.productListing-rowheading {
    background-color: #abbbd3;
    background-image: url(../images/tile_back.gif);
    height: 2em;
    color: #FFFFFF;
    }

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

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

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

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
    background-color: #ffffff;
    }

/*from stylesheet original*/

.productListing-heading {
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 3px;
  height: 20px;
}

TD.productListing-heading{
  background-color: #abbbd3;
  *background-image: url(../images/tile_back.jpg);*
}

TD.productlisting {
  border:1px solid #9a9a9a;
}

TD.productListing-data {
  font-size: 10px;
  padding: 5px;
}

TR.productListing-odd, TR.upcomingProducts-odd {
  background: #ffffff;
}

TR.productListing-even, TR.upcomingProducts-even, .productsNotifications {
  background: #f3f4f4;
}

TD.productListing-data-description-odd {
  background: #ffffff;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #9a9a9a;
}

TD.productListing-data-description-even {
  background: #C9F1CF;
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #9a9a9a;
} 

[TomsShop]

Hi

and many, many thanks for your css and your email.

I might be sounding like a complete idiot but I can find several stylesheet.css in the directory.


Which one do I need to change?

Thanks again for the help.

Tom

--------------------------------------
In the /includes/templates/ folder I found a classic, template_default and a viennablood setup. How do I switch between those setup to have a look at them?

[schoolboy]

You have to know what TEMPLATE you are using.

If you have not installed a CUSTOM template, then the CSS files that you use are probably in the TEMPLATE_DEFAULT folders.

(includes/templates/template_default/css)

If you use another template, they will be in (includes/templates/OTHER_TEMPLATE/css)

Strictly speaking, you should now add any custom files (such as my css file) to an OVER-RIDES directory. Please look elsewere in the forum and wiki for information about OVER-RIDES and why they are important.

What you can do for now, is simply RE-NAME the existing stylesheet.css to "stylesheet-css.old", then FTP my stylesheet.css into the folder.

If my stylesheet messes up your site, remove it and RE-NAME your original stylesheet back to its proper name.


NOW... HERE'S AN IDEA...

If you use FIREFOX browser, you can get a very nifty plugin by CHRIS PEDERICK called WEB DEVELOPER.

When you've installed web developer in Firefox, you can actually apply a stylesheet to your website, WITHOUT having to upload it to the server first.

Open firefox after installing the webdeveloper. Open your webshop. There will be a new toolbar. One of the dropdowns is called CSS. Click it, and then select EDIT CSS.

You will now have an option to "apply" new css to to the webpage on display.

This toolbar will teach you almost all you need to know about css - and a whole lot more!