How can I convert PSD to an ZEN TEMPLATE?

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!

Whatsoever i find this link may be useful:

http://www.zen-cart.com/forum/showthread.php?t=7263&highlight=Properly+Customizing+Site

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

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.

dhanesh:

Whatsoever i find this link may be useful:

http://www.zen-cart.com/forum/showthread.php?t=7263&highlight=Properly+Customizing+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/

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

:smile:Thanks

dhanesh:

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.

Some hints here:

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

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

i idnt understand is why there is no documentation
Get access and write one to the wiki

I think this may be a better starting point:clap:

http://www.zen-cart.com/wiki/index.php/Customisation

I am tired of those free template from zen users. Please.... have a variety in design.
So besides they are free and open to edit them to your needs, now they have to be up to your requirements? :shocking:

Since those three elements are probably the most frequently desired in the header, perhaps someone should write a mod for that. I could see that as useful. It would still need customizing for each site, but having the bulk of the coding done would help less-competent coders.
There are already. There's a module to put the language and currency on header as the shopping cart, as shown on those samples.

If you created those 2 sites, how come you don't know how to do the 3rd one? The only difference I see is, as you mentioned, the language, currency, and shopping cart at the header, which can be managed with the modules.

As you can see there ARE tutorials on how to make a ZC template, but just like Joomla, Wordpress, Mambo, osC, and others... is to make a SIMPLE one. The nice features and gadgets of templates, comes with trial and error, in other words experience!

BTW, those 2 sites that you showed, are really nice and simple, like an online store should be. :smile:

Have fun,