After all tutorials, how do I create a template?

[squeakypants]

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?

[TinaS]

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!

[squeakypants]

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.

[TinaS]

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 ?

[ladysaat]

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!

[squeakypants]

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...

[kobra]

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?

[squeakypants]

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?

[Blue!]

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.

[squeakypants]

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.