Newbie question on templating (couldn't find this with the search function)

Hello, the last few days I've been experimenting with Zen Cart and so far I absolutely love it! Very easy to install and configure.

Now I've been reading up on adding custom templates and I've made the new folder in includes/templates, copied the css folder from template_default, changed the template_info.php file. But when I switched to it in admin (Tools -> Template selection) and checked the result, it looked horrible.
All the nice colors and layout were ruined, the only thing I did like was it now scaled the width to my browser window. :blush:

So I copied and uploaded the rest of the template_default folders and files to have my custom template look exactly like it. Sadly that doesn't work. Why is that?

What I would like to do, is make my custom template start out looking exactly like the template_default (with the green box titles) and then change some color and the width in css files. Nothing too difficult.

Could someone tell me how to do that please? Or if it has already been asked, please link me the thread with solution. I couldn't find it myself.

In short, 2 questions:

• How do I make my custom template look exactly like template_default so I can make minor css color changes but keep the same general look?
• How do I make the width adjust to browser window size? Is the 100% supposed to do that? It stays at about 750px wide and fills the rest of my browser window with that light blue color.

You were on the right track to start. You don't need any of the other /template_default/ files except stylesheet.css and template_info.php to start. Delete all the rest from your template folder.

What you were seeing was the normal /template_default stylesheet, with distinctive colors to make it easy to licate what controls what, and examples of different settings.
What you wanted was the Classic template. Although it is installed by default, it is not /template_default/; it can be found in the /classic/ folder. Copy the stylesheet from that to your custom folder, and you will be pleased. There are also a few image files in /classic/images/, and you will need those to get the full Classic appearance.

The width is controlled in #mainWrapper, and width: 100% (or 97% or 90%...) will get the fluid width.
The main colored header bars are images (tile_back.gif), and you will need to edit those in a graphics program like Photoshop to change their color or other appearance.
Other colors are borders or background-colors, and you can search for those and try changing things one at a time to see the effects.

Excellent, thanks for the very quick response.

I thought classic was just some leftover files from a previous version. Turns out those few files make your site look completely different. CSS truly is amazing! :D

I downloaded the free Darkness Template which looks even more like what I need. This is really great, thank you.