Is it possible to integrate Zen Cart into my design ?

Hi there guys, I just got zen cart and was wondering is it possible to take my layout design and integrate zen cart???

Heres the layout (not yet finished) but u get the ideia!

This is possible but you have it backwards.

Where you say is it possible to take my layout design and integrate zen cart -

You want to be thinking make Zen Cart look like this design.

You can make Zen Cart look(style it) like most any design. With Zen Cart not being modular, you can not take the pieces you want and plug them into a html layout.

Thanks... so how do I start? What should I change? my best is at design and not in programming :(

There is more than one approach but I would install Zen Cart and add some products to determine several things like:

1. setting the various page displays up with the text and image size that you might want.
2. Learn about attributes if you might need them
3. General functions and if this will meet your needs

Why? This allows you to learn what Zen Cart can and can not do and you have not invested your time in styling/graphic work.

To style from your design, use a graphic app and cut/slice your images to create the header background, your logo, etc as individual elements. The default code will allow these to be placed in the stock locations/alignment. With the stylesheet you can change the defined elements color, size, positioning, etc.

This should be a start

Two things that you have to see in order to start.

First at all, TEMPLATES

• you have to create a template, the easy way is to copy the template_default folder with another name in the same templates folder of the zencart. Don't do changes in the default.

• Change the file template_info.php with your name, author,etc.

• Go to admin/tools/template selection and select your new template

Second One, STYLESHEETS.CSS

Look for YOUR_TEMPLATE/css/stylesheet.css
In this file you have all the style parameters that you need to modify, colors, well, may be not at all, but is the beginning. example: you want to change your zencart width, look for #mainWrapper and change width: parameter.

the easy way is to copy the template_default folde
Actually, only the files that are edited require being placed into the your_template folder. Keep the number of files that exist in the custom/my_template folder to a minimum of just the files altered, makes for simpler upgrading.

Good correction, copy just the files that you need to change

Thanks guys Im understading this better now... I allready sliced the images ok... but for example... my header gets out of the "BOX" of zencart, u see those flowers getting out? I have the header cutted 3 times... Flower left, header center and flowers right... (they must be png to get transparency) now the prob... how can I get 3 colums like that?

Hope that I can give you a vision of this in writing.

As your centered design is of fixed width and looks to have a margin top of about 25 or so px. I would make the left and right flowers image, one image with a transparent center and top border and then attach and position it in the body tag as a background-image. This is in the stylesheet.css and you would add the background and it would be something like this:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #e5edf5;
        background-image: url(../images/your_image.xxx);
        background-repeat: no repeat;
        background-position: top center;
	}

So if your center is 750px and the flowers are 60px each; You would have an image that is 750+60+60=870px wide with the center 750px transparent.
The image would be placed into your template folder/images

/includes/templates/your_template/images/your_image.xxx

Your header image would be a separate image and attached to the headerWrapper.

Too Late to edit:

add a hyphen for this: no-repeat

Thanks kobra you are very helpfull I will try that! And updated ... be prepared for more questions :D lol

Another option, ...

Play with this in your stylesheet,

#logoWrapper {
    width:1100px; [B]it's depend of your design size[/B]
    height:100px;[B]it's depend of your design size[/B]
    float:left;
    margin-left: [B]-80px; the trick to go out of the mainwrapper to the left[/B]
    background-repeat:no-repeat;
    background: url(../images/your_image.png);
    }
 

You can change the background image of the body, but I think that option leave you without the pattern diagram of the entire background (your BG.jpg file).

and as kobra said.

Your header image would be a separate image and attached to the headerWrapper.

Im gettings crazy!! lol heres what come up

http://my2clothes.com/teste1/

What did I do wrong?

Heres what I did:

Photoshop: Cutted the header in only 1 PIECE and saved it as png ok...
Dreamweaver: Stylesheet.css did that thing u saied and then tryed to do the same in the headerwrapper

btw... where do I set my background to repeat a image I have here?

Ok I changed again... I need that BG like I have now... but how should I put the header like I said ?

Some things, you need at least three images (slices), not only one,

**the first one **: just the upper part , a PNG that include the MY2Clothes.com graphic element, just before of the beggining of the red part.

the second one: a slice that contain the two green parts of the sides, but without the center, I mean cut the red part, and leave it transparent in photoshop. Obviusly another PNG file.

**The third: **the red one, save this as jpg file . (You can save this in PNG format if you want) but....

If you see in PNG format you get a lot of color and transparency but you get a lot of size, your images get 300 k, is two high, you need to get a smaller size or your page will be to slow to download.

If you try with with jpg in the red one, you can see that the color change, so try to change the PNG and the jpg parameters to get a closer color.

look this to help you to understand how to slice your image,

http://www.paulbilton.com/zen/index.php?main_page=index&cPath=54_55

save this page and review the stylesheet of this, you will see where to put the slices.

Now the code....

The first image

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
    ...
     background-image: url(../images/[B]first_one_image.png[/B]);
    color: #ffffff;
   margin-left:[B]-80px[/B]; [B]your settings[/B]
    height: 47px; [B]your [/B][B]settings[/B]
    width: 100%; [B]your pixels design[/B]
    }
```The second image

#logoWrapper {
...
background: url(../images/[B]second_image.png[/B]);
}

The third... change in the *includes/languages/english/header.php* file. this 

define('HEADER_LOGO_WIDTH', '192px'); your settings
define('HEADER_LOGO_HEIGHT', '64px'); your settings
define('HEADER_LOGO_IMAGE', '[B]third_image.jpg'[/B]);

Thanks kafee but as u can see http://www.my2clothes.com/teste1/ I can't seem to get it right... what am I doing wrong?

You are closer,

May be is my fault, all my comment **your settings or your pixels design **meaning that you need to calculate this values to fix all the image.

What values are you used in?

I think Im getting there kaefee :D wait... :D

If I dont post anymore today... tomorrow I will continue!

KaeFeE the problem now is... that the red image moves when I try chaging the logo wrapper settings (for the side images) I cant sync them and I cant connect them to the top...

In your design, you need the navigation bar after the My2clothes images, so you need to modify this file:

YOUR_TEMPLATE/common/tpl_header.php

to look like this:

<div id="headerWrapper">

[B]<!--bof-branding display--> [I]FIRST IN THE CODE[/I][/B]
<div id="logoWrapper">  [I]and all the code insigth[/I]
[B]<!--eof-branding display-->[/B]


[B]<!--bof-navigation display--> [I]SECOND[/I][/B]
<div id="navMainWrapper">
[I]and all the code insigth[/I]
</div>
[B]<!--eof-navigation display-->[/B]

<!--eof-header logo and navigation display-->
```but doing this you need to change the place of your **first_image.png, **because the navMainWrapper is not the first DIV anymore.

May be, the solution is to combine the two PNG files and place it into the logoWrapper.  and you need add margin-top:###px to the logoWrapper.