Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / cutting complex template and fitting it into ZC

cutting complex template and fitting it into ZC

Locked

Views: 959

Results 1 to 3 of 3
This thread is locked. New replies are disabled.
12 Dec 2006, 11:08 PM
#1
tbrides avatar

tbrides

Zen Follower

Join Date:
Oct 2006
Posts:
198
Plugin Contributions:
0

cutting complex template and fitting it into ZC

hello all,

i need some help with this.
im trying to get the following template into my zen cart.

template

ive cut the header out and placed it into logoWrapper

#logoWrapper{height:164px; background: url(../images/header.png) no-repeat top left}

that has worked fine.
now i need to get the two pieces to fit either side of it.

look here for the site
I created a div to wrap the whole mainwrapper and i gave it a background.but it hasnt worked properly!
So that is the first thing i need hel p with

Next i need to repeat the shadow on mainWrapper down its side, i dont know how to go about doing this without losing the gradients from the background.

Then I need to repeat the whole background I suppose. well this will be easy enough styling the body.

then I need to ensure that the footer stuff remains at the footer of the site.
ah wonderful divs - if only I knew how to use them properly.

14 Dec 2006, 10:09 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: cutting complex template and fitting it into ZC

Ok, I don't have time for a lot here, but one big point: you have the red background stuff apparently as an image, so it takes up its full space no matter how narrow the browser window and forces massive horizontal scrolling.

This needs to be in the body declaration in your stylesheet, in a couple of parts so it can take up less space (both pixels and bytes).

First, make a tall slice of the gradient colors, say 2px wide x 1200px high, and use it as a background-image, with background-repeat: repeat-x; (if your pages will ever be taller than that, just use repeat; to get some color all the way down.) Your body should be 100% width.

Then I guess a div (say #backgroundDecoration) just inside the body, and make a gif of the foliage etc. with transparent background, and use it as a background-image there, with background-position: top center;. This will allow the background decoration to slide off the edges of smaller screens and not take up space uselessly.

The mainWrapper will go inside this, with its width set as you wish (say760px) and margin: auto; so it centers in the window no matter its width. You can use a fixed width and margin: auto on the backgroundDecoration div also if you want.

15 Dec 2006, 1:37 PM
#3
tbrides avatar

tbrides

Zen Follower

Join Date:
Oct 2006
Posts:
198
Plugin Contributions:
0

Re: cutting complex template and fitting it into ZC

thank you glen.
I have carried out some of the points you have mentioned.

the only problem now is with the shadow on the mainWrapper.
i need tis to run the whole way down the side of it, while still taking into account the gradients that run through it

mmmm, I dont know!