After all tutorials, how do I create a template?

I've looked through all the tutorials, read all the faqs, all the wiki pages, many template files, and I still can't figure it out. Simply, how do I create a template. I don't mean "how do I make a blank template", I mean how do I make Zen Cart look like what I want it to look like. I've been creating websites for several years so I know my way around XHTML and CSS very very well, and I get by at least well in PHP. So, how do I go about doing this? I've created a "blank" template with no overrides and it just uses a crappy default template that looks horrible. How do I create the template files?

Use the files in template_default as a guide. When you edit files put them into your over ride directory in the same folder structure they hold in template_default. Most all of the styling is done in css, using the files found in template_default/templates and template_default/common to produce layout. When working with template files just remember to place the edited files into your over ride directories, don't over write the originals :)

Hope that helps!

Well, I think a better question would be what is the default page structure? I'm looking through my current homepage's layout (I just changed to "future zen") to try and figure it out. Since, as I've seen, it's almost exclusively CSS (which is a good thing). I just need to know the layout. I'll figure it out eventually, but you guys really need better documentation ;) I'm kind of in a position where I know how everything works, but I don't know any actual code.

I'm sorry - you seem to be on a very good start as at least you know your way around with CSS and such.

You're right - the docs could stand a refresher course - but until then everyone here is sure to help you along the way...

As for structure I tend to look at it this way - mind you I am NOT a php coder -

The way I see it Zen calls the files in the /common folder first this is the general structure (header, footer, sidebars)

Then we move to the /sidebar folders since that contains what is coded to appear in each sidebox

The lastly we move to the /templates folder as that contains all the layouts of pages

Does that help a little ?

okay I am NOT a webbie/coder whatever-you-call-it... I don't know code from a rock.

What I did was take a basic template (Future Zen in my case). Opened up the site in FF. using the "edit css" feature in the web dev. bar I played around with everything. When I needed to change text or something I searched here to find what .php file I needed to go to.

I haven't actually changed much in the .php files really. Lots of CSS difference though. I don't know if I am supposed to do it that way but it's working so far LOL!

Well, I'm creating/coding the site's design right now. How would I go about taking that design and making a template out of it? I need to change the structure of the site, not just the CSS.

Zen Cart really needs an IRC chatroom for support...

I need to change the structure of the site, not just the CSS.
This is not very descriptive???

What is it that you want to re-structure?

Well, I've worked with CMSes before. (Good) websites in general work by splitting up the structure and the style, xhtml and css. CMSes split up the structure from the content. Usually the "template" refers to the XHTML and the "style" refers to the css. The CMS's job is to organize the content (in this case a shopping cart) and output it into the desired structure. How do I do this?

Well, its best to know exactly what you want to acheive before you set about making any changes.

For example, columns. Do you want a left only, right only, both, or even neither. All can create dramatically different looks. This can acheived using the overrides, or if you want, through the admin.

The header and footer can be built almost entirely in custom html, and using the overrides implemented easily into the site.

Untill we know what you want, it is difficult to offer advice.

Well, every site I code is different. For this particular one, my mockup looks like this: http://haddonfieldgallery.com/mockup2.jpg

I'm thinking a centered div for the header with nothing in it (just the images in CSS), and a centered container div for everything else. Inside that container div, I'd have another container div floated left, with a div inside that for each sidebox. Also inside the foremost container div, I'd have (yet another) container div that would be z-ordered under the sidebar-container-div and floated right. Then I'd have a div inside that with all the content and the footer.

That was a mouthful. That's all tentative to change, since this is the first time I thought about the structure. So, it'll be something like this:

<div></div>
<div>
   <div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <div>
      <div></div>
      <div></div>
   </div>
</div>

If that helps at all... but please, I need to know ASAP how to go about doing this.

squeakypants,

Zen Cart is not structured as the CMS apps that you refer to. Where the template is more of a skin or set of clothes. over the structure.

What Zen Cart does offer that is easier than a CMS, is multi-looks to match what ever you might want with a couple of clicks. To illustrate; say you sell party supplies online, and want a Xmas look, a New Year look and one for easter summer, fall etc.
You make each of these in template folders in includes/templates and when you want to apply them you would do so in the admin > tools > template selection. Click Click and you are done & ready for the current holiday. Different banner, background, colors, and other things that you have pre-decided.

So a template in the Zen Cart sense is a bit more than just a skin as most all the settings for each are stored in the DB and in files in folders named for the specific template.

If you have loaded Zen Cart you have the default look and style. Now for a custom template, every file that you edit for this specific named look(template) is saved in the same location but in a folder named for the look. Another look and another set of folders named for that look. These folders are created where ever there is a folder named "classic" and house files in the same tree location.

So check the FAQ's & wiki for creating a template, start one based on the template default files(no css original or classic), just the template default stylesheet.css and begin the styling with only the css. About 80-90% of what most want is contained in the css with versions 1.3.x forward.

Wen looking to change some text, use the admin > tools > developers tools > and at the bottom left, enter the text, in the drop down select the all catalog files and then search. This will find the text in the files and provide the file name, path and the line #. You can select the most likely file open it edit the text save and proceed.

Get stumped...post back with the specific problem and if you pose a complete question that others can undestand there will be many that will provide assistance.

Thanks, I understand it now, but it's not what I wanted to hear. I don't want the site to look like every other site using ZenCart with different colors and images, I want (and need) it to be MY site, not ZenCart's. Do you get what I'm saying? Can ZenCart accomplish this, or do I have to go to another ecommerce app? I really hope I don't since my client has already put in many items and it would be a pain in the ass to have to reenter everything.

just saw your last post after & while I was writing mine. This is fully possible, but drop your having to write all this with div's & xhtml... As many of the CMS's this is a full server side php script...and therefore the pages do not exist as such but are assembled on the server and then transfered.

You do not need to know much php (if any at all) to use this cart. I am a semi-living example of this. I know almost no php and do a fair job at most basic styling tasks. I do glitch up where I have to inteface with the php but this is very seldom(thank someone).

Like I said start, get some things done andpost back with where you are stumped.

Zen cart is highly customisable using the override system. The header and footer can be constructed using your own html, and the columns can be collapsed as is required. The site can be changed to pretty muc anything you want.

However, looking at your mockup, your site doesn't actually look much different to any other zen cart, I think most of what you want could be acheived by replacing images and colours on an existing free template.

You are fully able to use any script that you want but will have much the same problems and not the great features.

See this Zen Cart site and decide if this is like all others for yourself.

Sample Site

Once again, thanks for understanding ;) Still, where do I start? It's supposed to be very CSS based (a good thing), so what is the structure the PHP outputs? I can't do anything in CSS if I don't know what I'm modifying.

Can I talk to you on AIM or MSN or something? It's just annoying to communicate like this when it's between 2 people.

EDIT: just looked at that sample site. Very nice ;) Now that I see it is fully customizable, I still need to know how... I'm sorry if I seem stubborn, but I've looked through everything and I can't figure it out.

one good way of getting a feel for zen cart templating is to check out some of the available free templates that have been donated. Check them out here

Read up on the over ride system, and look into creating your own header and footer using the tpl_header.php and tpl_footer.php files.

Use a donated template, and just have a "play"

squeakypants:

Thanks, I understand it now, but it's not what I wanted to hear. I don't want the site to look like every other site using ZenCart with different colors and images, I want (and need) it to be MY site, not ZenCart's. Do you get what I'm saying? Can ZenCart accomplish this, or do I have to go to another ecommerce app? I really hope I don't since my client has already put in many items and it would be a pain in the ass to have to reenter everything.

No no. You can really really alter it! I have seen zen cart sites that I never would have guessed were it! I just wish there was the showcase so you could see some of the amazing ones out there.

ETA: YESSSSSSSS that site is one of the ones I was thinking about! Thanks Kobra!!!

kobra:

If you have loaded Zen Cart you have the default look and style. Now for a custom template, every file that you edit for this specific named look(template) is saved in the same location but in a folder named for the look. Another look and another set of folders named for that look. These folders are created where ever there is a folder named "classic" and house files in the same tree location.

So check the FAQ's & wiki for creating a template, start one based on the template default files(no css original or classic), just the template default stylesheet.css and begin the styling with only the css. About 80-90% of what most want is contained in the css with versions 1.3.x forward.

Hi Kobra,
I'm in the exact same stage as squeakypants, as in I know CSS etc, but have been confused as to how to go about creating my own template. After reading this thread it's starting to make more sense but... I have the default Classic Contemporary Green so to create my own I can copy the template_default folder, rename it, then play with those files? ...

As an addition to the above I've read the following https://www.zen-cart.com/tutorials/index.php?article=142 and although it's clear in what it's instructing, you basically end up with an 'empty' template folder. Are you then expected to create all the files in, say, template_default, from scratch?