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.

[afo]

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

I'm not a huge fan of Firefox, but it does allow you to do some interesting and fun stuff. I use it to test out colors in the stylesheets, so I can get the look I'm going for without having to edit the stylesheet locally, upload it and then see the result.

[Mac 30 UK]

Hey

Thanks again chaps, the firefox add on sounds great and is the css designers browser of choice (tis just a shame that IE makes such a hash of things).

I will grab that firefox add on and get stuck into the css and take it from there, will report back chaps!

One quick question before i get stuck in: The css file determines colours etc, is the positioning of all the divs also handled by the css? If so, should be easy enough to play around with.

[gjh42]

The sequence of display is determined by the php files, and some changes in layout are easiest handled by simply moving blocks of code around in a file.

Fine-tuning and a million other aspects of color, size, position, images, margins, borders etc. are all handled by the stylesheet.