Config. Zen-cart with my website...

Hey all, first time on the forums.

Here is my issue. I have a web site that I've insalled zen-cart on and i would like the page to look like the rest of my web site...

My hompage here: http://cateyepro.com/index.php
has a nice template but i would like to change the zen-cart template to look like this.
Zen-cart URL: http://cateyepro.com/store/
To have the same look just have the cart within my premaide template.

can some one help me with this...

That seems within reason.

The first thing you would have to do is begin using the override system. Basically, insert another folder(named to what you wish) into your includes/template directory. Then copy and paste the contents of the "classic" folder into your new folder. Finally, find the file inside your new folder... named "template_info.php" and open it in your favorite editor. You will need to change the template name from "Classic" to your new template name. Be wary of leaving the quotations surrounding the name.

From there, you can begin your new template customization project. Remember to back up individually modified files, in case you need to correct things along the way. Experiment and you will learn quickly, soon your template will take form.

For more information about customizing, please view here;

http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates

and visit the FAQ's;

http://www.zen-cart.com/forum/faq.php?faq=catalog_issues#faq_template_customize

Ok i did that and i read the FAQ...

But im at a compleate loss as to where to config. my templet what files do i have to edit...

I have never worked with malti include scripts..

Where do i start...

Thanks.

If you're asking about the registering of the template file in Admin, there should be one loose file in your new template folder, asides from "images" and "css" sub folders.

That's the Template Information File or template_info.php. The part of the contents you will change is as follows;

$template_name = 'Classic Contemporary Green';
$template_version = 'Version 1.3.5';
$template_author = 'Zen Cart Team (c) 2006';
$template_description = 'This template set is designed to be easily modified using only the style sheet to change colors, fonts, and the store logo. Three images are required; logo.jpg, header_bg.jpg, and tile_back.gif.';
$template_screenshot = 'scr_template_default.jpg';
?>

That's all you have to worry about, at this time. You can't have two templates with the same name, just change the name(in red) to what you wish. Once your custom template is done, you can change the screenshot in the code above to your own... for an extra touch. Other than that, don't worry about it.

After that's all done. Go into Admin-Tools-Template Selection;

`Choose your newly named template.

Then, go to Admin-Tools-Layout Boxes Controller;

`Hit the "Reset" button on the bottom of the page to enable all the side column boxes. Then, you can switch around the sideboxes or switch their order.

Once you have that all done, then you are set to redo the Classic Contemporary Green template to your own creation. Experiment with the stylesheet and if you make mistakes... no worries, just copy the stylesheet from the "Classic" template and paste/overwrite the one in your custom template folder.

For a positive aid, you can use Firefox browser extensions tools to help. The best one is the Web Developer Extension;
http://chrispederick.com/work/webdeveloper/
With that handy toolbar, you can virtually adjust the stylesheet and other code, you can see changes right before your eyes and you're able to download your newly customized stylesheet to your desktop, in order to upload to your custom template folder. It may take awhile to get used to it, but you'll be glad and amazed by the toolbar's endless capabilities.

thanks i started messing around... and i think im geting the hang of it...

at least i have the hedder done. i just have to browse around for the right files and mess with settings thanks for all your help

You're welcome and I'm glad to hear that all is well. See, it's not so bad after all. :D

Some hints to keep you going in the right direction:

#mainWrapper make its width 780px to match your header.

find the following in your stylesheet:

#navMainWrapper, #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: 1%;
}

If you change the file name in red to 21.jpg you'll get the footer background you are using on the rest of your site. Footer is controlled in the stylesheet by the #navSuppWrapper. Probably goood Idea to break #navSuppWrapper out from the group by creating a seperate rule set for it like this:

#navSuppWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/21.jpg);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

and delete it from the previous rule set so that it doesn't interfere with the the other ones at all.

barco57:

Some hints to keep you going in the right direction:

#mainWrapper make its width 780px to match your header.

find the following in your stylesheet:

If you change the file name in red to 21.jpg you'll get the footer background you are using on the rest of your site. Footer is controlled in the stylesheet by the #navSuppWrapper. Probably goood Idea to break #navSuppWrapper out from the group by creating a seperate rule set for it like this:

and delete it from the previous rule set so that it doesn't interfere with the the other ones at all.

ya i was working up to the footer point. thanks... I tried changing the width of the # mainWrapper and it didn't work... any ideas?
here's what i have:

/*wrappers - page or section containers*/
#mainWrapper {
	background-color: #ffffff;
	text-align: left;
	width: 780px;
	vertical-align: top;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	background-color: #ffffff;
	text-align: left;
	width: 780px;
	vertical-align: top;
	}

does anyone know how i can include the news and updates in there as to where it will strech just like my other pages? Wich tpl file?

Edit* weird... the width just started working... by its self...

OK my bad guys...

the width will work in IE but not firefox...
what can i do to fix this?

i set the mainheader width to 780 it works fine in IE but it stays the same size in FireFox...

Leave the #mainWrapper width @ 780px, Should look like this.

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 780px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

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

its still not working maybe somthing else is wrong here is my entire css file:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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 4376 2006-09-03 20:42:22Z drbyte $
 */

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

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	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: #FF0000;
	}

a:active {
	color: #0000FF;
	}

h1 {
	font-size: 1.5em;
	}

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

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: #F0F8FF;
	}

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: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

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

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

.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: 780px;
vertical-align: top;
border: 1px solid #9a9a9a;
}

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

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#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, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

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

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

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

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

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

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

#navBreadCrumb {
	background-color: #cc9900;
	}

#navEZPagesTop {
	background-color: #ffff33;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

#navColumnOne {
	background-color: #FFCC99;
	}

#navColumnTwo {
	background-color: #00BFBF;
	}

/*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 #000000;
	padding: 1em;
	}

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

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

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

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

.orderHistList {
	margin: 1em;
	padding: 0.2em 0em;
	} 

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

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	color: #ffffff;
	}

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: #FF6699;
	padding: 0.5em 0.2em;
	}

.leftBoxContainer {
	border: 1px solid #ffffff;
	margin-top: 1.5em;
	}

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

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1.1em;
	color: #FFFF00;
	}

.rightBoxHeading {
	margin: 0em;
	background-color: #663366;
	padding: 0.2em 0em;
	}

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

h3.rightBoxHeading a:hover {
	color: #FF0000;
	text-decoration: none;
	}

.rightBoxContent {
	background-color: #ffffff;
	margin-bottom: 1em;
	}

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

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

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

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

thanks.

Err... sorry guys im stupid... i was editing the wrong css file all's good now...

but i don't know where to put the news and updates section... which file?
anyone?

but i don't know where to put the news and updates section... which file?
anyone?
Not sure of what news you are referring to??
Zen Cart has a couple a builtin facilities for these types of things and it really depends upon what and where you want this information to display.

The main page can be used as an announcement page if you are not using it for a standard site message and there are a few extra pages "page2, page3, etc that are available and can be used for text/news. There are also ez-pages that can be assembled as a page, a TOC to many other pages, and other schema that are at your choosing.

These builtin functions are all controllable through the admin side of your shop, making changing news an easy function.

Start by looking in the admin > tools > Defines Page Editor and Admin > tools > EZ-Pages. You can also search here for guides and posts about each.

if you go to my website:
http://cateyepro.com/index.php

you will se a bar that runns down the right side... it says news and updates... in that i have a table with a background and a news+updates include.

ex: the code i use for this is:

<TD WIDTH=217 HEIGHT=100% valign="top" background="/images/rbg.jpg">
	<IMG SRC="/images/r1-news%20and%20updates.jpg" width="217" height="52"><br>
<?php include '../newsandupdates.html' ?>

or somthing close to that

Not sure of your intent, but we usually recommend not linking to Zencart from another page in favor of styling the ZenCart to represent the style of any page you might have now. This remains my recommendation. ZenCart since 1.3.x is virtually tableless and I do not recommend their use unless cornered.
Your html News page can be included as I stated before into Zencart at the several places that I indicated. The editor can be toggled to display a html editor or a plain text editor, your choice.
I know that many are reluctant to give up their current page, but this is the best course for you to take. Using ezpages you have the option to link to pages outside of ZenCart, but if one can integrate these pages into the cart and manage them from within a single interface, I see this as a benefit. Again this is your choice.

I would proceed to integrate the functionality that you seek first, not worrying about the specific styling or naming at this time. Just get the overall look correct and check that the functions work. Then once all things are there and placed correctly, you can attack the naming and styling areas.

By using this approach you can first determine what can be done within the cart and what must necessarily be outside of the cart if anything.

well the whole reason i started this thread was to make the shopping interface layout identicle to my template is used for my website. Thus it is more apealing.

If you went to an online store to buy somthing then you where redirected to a page that look compleatly diffrent, or poorly put to gether would you shop there?

I wouldn't thats my main resoning for revising the template to look like the rest of my website...

even if its not a table even if it doesn't show news and updates i still whant the design scheme to be the same...

Sorry for the inference, but I find that many are attempting to retain their current page and just want to link to Zen Cart from it. And this is problematic from the security aspect as sessions are created and managed from within the cart.

If you are striving to have the cart as the main interface as you seem to be stating, this is the correct course. Again, sorry for the inference that you might not be.

Well, thanks for the help i've got it done just about how i want...

Thanks again...

I went and took a peek and its coming along wonderfully.

Again thanks for all the help... Right now im just waiting on the owner to give me all the infromation i need to put up on the store... But except for that I think I've got it preaty much covered.

If anyones sees something wrong in another browser or something...
Please Let me know...