Creating a Zen template from an XHTML page

[MrDamnation]

Pretty simple question, but it's so hard to find an answer!

I'm working with a client (I'm a web designer) and we're using Zen Cart (obviously). I have a template created and coded for him. However, I need to know how to split it up into Zen Cart-iness.

It's a one page XHTML file with a stylesheet. I have everything defined, but not broken up, as in the sidebar is in the same page with the header and the body.

So what files do I need to edit exactly?

From what I see, I need like a sidebar tpl, a header tpl, etc.

The last cart I used to skin there were just variables to implement boxes or whatnot.

Am I coming off clear? Basically, I need to turn a coded site into a Zen Cart template. And have no idea what to do. Google was NOT my friend...

[schoolboy]

The standard ZC template system comprises:

a header
a left column
a centre column
a right column
a footer

The bulk of the layout and aesthetics are governed by the chosen template's CSS file(s).

So, in the CLASSIC template (the one ZC defaults to when you do a fresh, un-edited install), the template is drawn from the ORIGINAL files in:

templates/template_default/templates/

... and the stylesheets are drawn from

templates/classic/css/

Now, in order to take advantage of ZC's "over-ride" system, you ought to create YOUR OWN template system. (The over-ride system facilitates the process of custom edits to core files, protecting these "edits" from being over-written when you upgrade the software at a future date.)

There are tutorials and instructions for creating your CUSTOM template in the FAQ and WIKI sections of the forum. You could also upload a new template from the Free Add-ons section, or buy one from a 3rd-party vendor.

Once you have your CUSTOM template system in place, you will be able to safely make edits to core files.

Your existing XHTML page and its accompanying css will not, I'm afraid, help you very much, because ZC's template system and its CSS is likely to be very different from your current code.

ZC does not work with HTML, but with PHP, where the final HTML is "cobbled together" from scores of separate resources (including the database).

I have heard that some people manage to use dreamweaver to assist them when they "edit" their ZC template, but they are still working within the strict constraints of the ZC template code structures.

[MrDamnation]

Ah ok. One more thing if I may. How can I change the names/content within the files like Gift Certificate FAQ? I don't need it at all, and would rather just put something like About Us in there.

[schoolboy]

Well, Gift Certificate FAQ is an odd feature in that its "visibility" is governed by whether you have Gift Certificates "installed" as an Order Total module.

To remove the link in the sidebox, all you need do is remove the Gift Certificates module from order totals

admin...modules...order total (just highlight gift certificates and then click remove from the right-hand edit box.

To create an "About Us" page, you have a choice:-

You can use one of the "extra" define pages (page2, page3, page4) of you can create an ezpage.

There are tutorials in the FAQ on both methods.

[MrDamnation]

I also can't find anything beyond creating a simple template. What files do I need to edit?

[schoolboy]

All the CORE files for the template in a standard install, are contained in templates/. At this directory level, you will see a folder called template_default and a folder called classic.

If you open the classic folder, you'll see two sub-folders called css and images, and a file called template_info.php .

However, if you go up a level then open templates/template_default

number of other folders, including:-

buttons
common
css
images
... and several more, including popup_xxxxx, sideboxes

... and the MAIN default templates folder: templates

------------------------------------

Basically, what zencart does is say to itself:

"Okay, I need to cobble up some HTML to throw at the browser, and I need to get all the required "stuff" from a wide range of resources - including "template" files, the database, headers, footers, etc... The first place I'll look for these resources is in the OVER-RIDE system, but if the files/resources I need aren't there, I'll look in the DEFAULT system..."

Now, as it looks in the over-ride system FIRST, it will use whatever resources have been saved in the folders associated with the over-rides system.

If a resource is NOT in the stated over-rides folder, ZC will then apply the necessary CORE file, from the default folder.

------------------------------------

What this means is that you (the administrator) need only save your edited files in the over-rides system. If a file is NOT edited by you, then it can remain in its default folder.

--------------------------

Let's see this in context...

If you look at the templates/ directory (as shown above), all the CORE files are in templates/template_default.

But when you installed ZC, it chooses Classic Contemporary Green as its template (You can see this in your ADMIN panel, under TOOLS...TEMPLATE SELECTION).

This means that a standard install will look FIRST in the templates/classic directory tree for all necessary files and if it does not find them there, it will look for them in template_default

As you will see, (in a standard install), the classic folder has very little in it, apart from a sub folder called css and another called images, and of course, the template_info.php file .

So all ZC will do here is read the CORE files, with the exception of whatever is in the classic/css and classic/images folders .

(If you look in template_default you'll also see css and images folders, and interestingly, their contents are the same as those in the classic/css and classic/images folders.

So why the duplicates?

Well, if you are using the classic template, then you will make edits to the css in classic/css and change any images in classic/images .

Later on, you may wish to make edits to files in this folder:

templates/template_default/templates

But as these are CORE files, you'll need to save the changed files into the over-rides folder system.

Now, in a standard install, there is no folder called:

templates/classic/templates

... so you create the folder, and this folder is where you will put your edited tpl_xxxx.php files.

-------------------

The overrides system extends into languages and modules directories as well, and operates on the same principle (ie: use a file in the over-ride directory system if it exists, or if not, use the core file).

-------------------

A simple RULE about the over-rides systems is this:

Wherever you see a CLASSIC folder, the over-rides system can (and should) apply.

When you create/install your own template, every directory that contains a classic folder, should also contain a folder with the name of your custom template.

[MrDamnation]

Sorry, I didn't mean to post that last message. I found a good, blank CSS template that is helping a lot. Here is what I need the design to look like when I'm done:

http://tueproductions.com/melting/site.png

This is what I have so far:

http://tueproductions.com/melting/

It's coming along, but I'm going to have some questions about where certain parts are stored. For example, how do I make the center column bigger? I don't see it in Configuration>Layout Settings but I made the right navbar 0px. Do I need to really make EVERY box single column only?

[MrDamnation]

Eh I'm a jerk. I'm figuring this out as I go along. I still might need some help soon though.

Edit: Like now. How can I move parts around, such as the breadcrumb trail? I want to modify the header. I'm in tpl_header.php, but it's very confusing, and doesn't seem like a lot of visual stuff is happening.

[schoolboy]

Remember what I said... ZC is not built with html, but PHP.

Sure... the HTML is cobbled together by the PHP, but you will work largely with PHP files and CSS to get the look and feel. eg: the width is controlled in the stylesheet.css file ---

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 750px;
vertical-align: top;
}

What may be useful for you is to get a copy of the book (see adverts on this site).

Work through it, and also look in the FAQ and WIKI.

It will start to make sense in time... I promise!

[MrDamnation]

Haha I know CSS, PHP and XHTML.

I just don't like to read mumbled code with variables that I can't easily understand.

I have all the CSS figured out, but now I need to move the physical elements, such as the breadcrumb trail and I need to get read of those unsightly <UL> that are after the header and after the main content. What's the deal with those?