Question regarding Kuroi's Future Zen Template

Hi there I got hold of a copy of Kuroi's Future Zen template and have been messing around with it here

This template is really helping me to learn Zen Cart but I saw from reading the threads regarding it that there should be background images for the sideboxes, centercolumn etc. Sure enough when I investigated this what I'd failed to do was copy the images from the Future Zen template into the images folder in my customised template.

However having searched both the code and directories the file called centercolumn_capsule.gif doesn't appear to be present or even referenced anywhere. Is anybody able to help me understand why this is the case and/or suggest what I can do about it? Presumably the Future Zen template has been changed at some point. I'm just guessing here but if I put the following in my stylesheet.css and upload centercolumn_capsule.gif to my images folder is it likely to solve the issue?

.centerBoxContents {
margin: 0;
background-image:url(../images/centercolumn_capsule.gif);
background-repeat:no-repeat;
background-position:center;
}

Thanks for any help on this, cheers.

Er..no appears to be the answer to that question, I just tried the solution I suspected and it appears to do nothing. Does anybody know if Cube Cart is any easier than Zen Cart to get your head around?

OK I tried that bit of code I made up on several elements now the latest being .centerColumn This seems to make the gif appear at the bottom of the page but I need it to stretch and act as the background for the whole centre area something like this

I don't know if I'm not getting any replies here because I'm being incredibly thick or if it's just that people don't have a clue what I'm on about because I've explained it badly. I've read the e-start your store manual and waded through a good few FAQ's and threads looking for an answer but I'm still none the wiser as to how to get this sorted. Any help would be greatly appreciated, cheers.

It may be because this centercolumn_capsule.gif doesn't have anything to do with the future_zen template as such. Where are you getting it from? Is it a suggestion in the e-start book? The future_zen template hasn't been changed in four years.

If you are referring to the round-cornered box around the entire page body beneath the header (in your link), the element would be #contentMainWrapper. However, you can't make a CSS background stretch to fit a box - it doesn't work that way.

Hi thanks for the reply, I found a post from Kuroi himself which had a link to download the original psd files he'd used for the graphics and centercolumn_capsule.gif was amongst these. However the thread I found it on was here with the post dated May 2006.

It wasn't until I saw his post and downloaded the file that I realised a load of graphics were missing from my attempt at building a site. I found the bulk of them in my Future Zen template images folder. When I copied them to my custom template images folder they appeared on the site. However centercolumn_capsule.gif was not amongst them and I can't see it referenced anywhere in the code.

I'm assuming that it was once part of the template and is no longer but I'd dearly love to understand how I might put it back so that my category pictures on my main page are contained within it.

:oops:

Seems what I'd done was jump to the conclusion that the site I saw on the thread about Future Zen was actually still using the Future Zen template when it wasn't. Hence I'd been trying to get Future Zen to do something which actually requires some different code altogether.

What I've done now is to try and hybridise the Future Zen template by adding the following css to it from the template that has the effect I want:

#mainWrapper {
background-color: #e5edf5;
background: url(../images/main_wrapper_middle.gif);
background-repeat:repeat-y;
text-align: center;
width: 90%;
vertical-align: top;
}
#mainWrapperHeading {
margin: 0 auto;
padding:0;
background: url(../images/main_wrapper_top.gif);
background-repeat:no-repeat;
background-position:top left;
text-align: center;
height:10px;
width: 917px;
}
#mainWrapperBottom {
margin: 0 auto;
padding:0;
background: url(../images/main_wrapper_bottom.gif);
background-repeat:no-repeat;
background-position:bottom;
text-align: center;
height:10px;
}

You can have a laugh at the result here

Clearly there is something very bad happening but I am largely ignorant as to why. All I want is a white box with rounded edges to envelope the centre column where my category and product images will be. However as you can see the whole thing is shifted to the left and there's no sign of the rounded edges at the top and bottom of the page. I'd also rather the tiling of the background image stopped below the logo of the site instead of extending to the top of the page.

I've tried altering the variables in the above CSS to no avail. I'm guessing that maybe #mainWrapperHeading and #mainWrapperBottom may have to be written into one of the php files perhaps? If anybody knows where I'm going wrong or what I should be doing I'd really appreciate some pointers. Cheers

Instead of adding #mainWrapperHeading and #mainWrapperBottom to your PHP files, you can use existing elements #headerWrapper and #siteinfoLegal to hold the top and bottom images respectively, with #mainWrapper holding the repeating center part.

As it appears you really don't want the whole page enclosed, you would need to apply the concept to completely different elements. I see you are currently using snazzy corners or something like it; the obvious limitation of this is that you can only get one (small) radius to your corners.

What may work best for you is to apply the top corner image to #navBreadCrumb, and the center and bottom image (tall enough to fill any credible page height - a simple image won't be too much bigger in filesize stretched this way) to #centerColumn. Since you don't have breadcrumbs on your homepage, you could put the top image in h1#indexCategoriesHeading, along with some styling to make that stretch to fit the top corners of the column.