Creating Custom Templates

[Mac 30 UK]

Hey all

I am new to zen cart and am trying to learn how to design custom templates.

I have been reading on the site and following the information on the wiki in an effort to learn this myself but have come a bit stuck and was wondering if someone could give me a gentle nudge in the right direction.

The problem is this:

I followed the tutorials on the wiki to create my own template as explained here:
http://www.zen-cart.com/wiki/index.p...lates_-_Create

I then tried to follow the customization instructions as found here:
http://www.zen-cart.com/wiki/index.p..._-_Customizing

Now, this is where i get stuck. I have copied across the 'tpl_header.php' and 'tpl_footer.php' files into my own template directory but when i open them up to edit them in dreamweaver or the like it just appears as a series of divs without any of the styling.

So, it looks like this (in dreamweaver):


so...

How do I go about customising my template if i cant see what affects any changes are having?

Maybe i am being daft, or getting something totally wrong but i have been bashing my head up against a wall for a few days trying to sort this so any help would be really appreciated.

Thanks for reading this far folks! :)
Mac

[afo]

To create a very basic custom template (you can build from there), you need:

• includes/languages/YOUR_TEMPLATE/english.php
• includes/languages/english/YOUR_TEMPLATE/index.php
• includes/languages/english/YOUR_TEMPLATE/header.php (to change the logo)
• includes/templates/YOUR_TEMPLATE/template_info.php
• includes/templates/YOUR_TEMPLATE/common/tpl_header.php
• includes/templates/YOUR_TEMPLATE/common/tpl_footer.php
• includes/templates/YOUR_TEMPLATE/images/logo.gif
• includes/templates/YOUR_TEMPLATE/css/stylesheet.css

Anywhere you see a /classic/ folder, you can create a folder for your custom template. You can copy the necessary files from either the /classic/ folder, the /template_default/ folder or the parent folder.

Edit includes/templates/YOUR_TEMPLATE/template_info.php to give your template identifying information so you'll recognize it in the admin under tools->template selection.

[madmumbler]

I don't like using Dreamweaver for my templates. I use a free software called PHP Editor because it doesn't stick extra code in like Dreamweaver can.

Create a "dummy" or test store on your server (outside of your live site) and use that for your r&d. Once you get it set up the way you like, you can save the template files and install them on your live site.

Remember, don't make changes to the default installation (classic or template_default) because when you upgrade your site, it will wipe out your changes.

What I do is make changes to the css and code, then upload the changes to my "test" store and refresh. That way I know exactly what it's going to look like "live" versus as a WYSIWYG.

HTH,

[Mac 30 UK]

Hi Chaps

Thanks for the replies!

My main issue was from a visual point of view, whatever editor i use does not seem to read the style sheets to help design the visual aspects.

I am interested in learning how to completely remodel the visual aspects so changing styles is only part of it, what i want to know is how to completely remodel the site and come up with designs like the kind you can purchase on template monster etc.

I am a web developer and have a raft of php and css experience so i should be ok once i get my head around things but if anyone has any further tips that would be great.

Thanks again!
Mac

[madmumbler]

I think it's so much easier to make changes and just upload them. That's just me. Then I can see immediately, "live" (on a test store) what the results will look like. And if something is "broken" I can catch it immediately rather than spending hours working on something and then having to backtrack to figure out where the problem is.

But that's just what works for me.

HTH,

[afo]

The Firefox browser with the web developer add-on is a great tool for making stylesheet changes and seeing the results on the fly. It won't let you save the changes directly, but still it does help with "what does this do".

[madmumbler]

I keep meaning to download that. *LOL* I need to try it.