Config. Zen-cart with my website...

[drhart4000]

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

[Sketchy]

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.p...on_-_Templates

and visit the FAQ's;

http://www.zen-cart.com/forum/faq.ph...late_customize

[drhart4000]

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.

[Sketchy]

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.

[drhart4000]

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

[Sketchy]

You're welcome and I'm glad to hear that all is well. See, it's not so bad after 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:

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

[drhart4000]

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

[drhart4000]

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

[barco57]

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