How can I convert PSD to an ZEN TEMPLATE?

[Kim]

A couple of things you need to remember about putting a template together for Zen Cart. First -you are not designing a static page with some text or pictures in the middle. The pages are multiple "layers" and the display changes depending on where you are. So you want to start with the background. then on top of that are usually the navigation bars, logo and side bars(s). On top of that are the side boxes, center boxes and the other bits and pieces. So you have to think in 3 dimensions.

The best way to learn the system is download a couple of the free templates and have a look at the override structure and how the parts and pieces fit together.

Also have a look at the shops in the showcase - while there are a ton of "cookie cutter" sites there are also some very creative looks, so breaking the mold can be done.

Enjoy!

[dhanesh]

Whatsoever i find this link may be useful:

http://www.zen-cart.com/forum/showth...stomizing+Site

[1PLM]

Thanks for the feedback. I will try it out and see. It seems very logical to go about it as such.

[milkyway]

I would say there are few basic thing for a start. You can check the CSS for the following:

Main frame and width of the site: #mainWrapper
Header part: check file ../common/tpl_header.php (and all related CSS inside)
Footer: ../common/tpl_footer.php (and all related CSS inside)
Body: usually you will need to customize product listing page, product info page, and new, featured, and specials display, all these files can be found inside /your-template/templates/...
Also you will need to check the folder includes /module/.. for more advance editing.

However I think there is no quick method though, but it is a learning curve, but once you understand them all it is not difficult to create template from a PSD.

Also make sure you customize the template in 'override' folder.

[DrByte]

Whatsoever i find this link may be useful:

http://www.zen-cart.com/forum/showth...stomizing+Site

Yes, and you'll find that an updated version of that same post, in addition to many other topics, can be found in the FAQ area: https://www.zen-cart.com/tutorials/

[dhanesh]

Dr Byte..

Please have a look at the template.
http://electropath.ca/images/Template.jpg

and if you can please tell me,or better say give an idea of how the slicing procedure is done?I mean the process of how to setup the appropriate coding procedure.

categories,tpl main page,currency etc.

Iam not asking you how to slice or CSS,just after those process,the next steps.

Just hand draw with a marker on the template or give a visual overview of the process.(if you don't mind).

Thanks

[stevesh]

Please have a look at the template.
http://electropath.ca/images/Template.jpg

and if you can please tell me,or better say give an idea of how the slicing procedure is done?I mean the process of how to setup the appropriate coding procedure.

That wouldn't be all that difficult to style in Zencart, but I think you need to put the whole 'slicing' thing out of your head.

Other than the language and currency boxes in the header, what that image shows would just be some work with selecting and positioning sideboxes, and styling the rest with CSS, including some background images.

It'd take a little time, but you'd learn a lot along the way.

[stevesh]

Some hints here:

http://www.stevesh.com/test/Template.jpg

[dhanesh]

Thanks for the illustration.I can understand what the procedures are.
But one thing i idnt understand is why there is no documentation to this process?????
You can get one in JOOMLA ,OS COMMERCE,WORDPRESS and But not ZENCART???

[kobra]

i idnt understand is why there is no documentation

Get access and write one to the wiki