Questions about going from Photoshop to Template

[JFC-Designs]

If you don't have any experience in html/php/css etc you don't need to be reading this.

Assuming your zen cart directory is /zencart create the following BLANK files. Nothing should be in these .php files. YourTemplateName should be replaced with the name of the template. The sideboxes.php file is OUTSIDE of the template directory. For some reason I can't get it to show up when making a sidebox directory in the template folder. Maybe someone can help.

/zencart/includes/modules/sideboxes/sidebox.php
/zencart/includes/templates/YourTemplateName/common/tpl_footer.php
/zencart/includes/templates/YourTemplateName/common/tpl_header.php
/zencart/includes/templates/YourTemplateName/common/tpl_main_page.php

Now, go into the admin control panel and select your new template. Then go to tools-Layout Boxes Controller

click Reset button at the bottom. Then TURN OFF everything but the sidebox.php file. Turn that box on. It can be on the left or right (your preference). Now if you don't want a sidebox just don't do this. Turn everything off and you will just have a header, middle section, and footer. If you don't want a footer then just leave the footer file blank but you need to have one. It will by default be transparent.

At this point you are ready to go. You need to slice up your photoshop file however you like it. Just make sure you slice it up in a manner you can put the top in the header, bottom in the footer etc using div tags which is the most common way now. It is just that simple. Use the css file in the css folder to change the fonts, background colors/images, etc. As far as custom pages..haven't gotten that far yet. This is just describing the basic template structure from photoshop to zencart.

One last point is you need to make all images hard linkes. I haven't figured out the CONSTANT yet that declares the base directory. If someone knows please let me know. Thanks.

[JFC-Designs]

I forgot to mention you need to follow instructions for doing a basic template first. That means you need to create the css directory and the template info file etc as described by zen cart. Then add the blank header, footer,sidebar files etc after.

[JFC-Designs]

If you are looking for links to link your images to on the header using div tags or image mapping etc then use the links below:

http://www.yourwebsite/zencart/index...ain_page=login
http://www.yourwebsite/zencart/index...=shopping_cart


Just replace the appropriate website address. main_page is a variable that receives login.

If you want custom pages within the cart like a FAQ just create it in the EZ Pages section. Make a note of the information created and the link will look like this:

http://www.yourwebsite/zencart/index...id=1&chapter=0

the id is whatever id the EZ page id is and the chapter is whatever you make it. I don't use the EZ Page box because I make my own custom links within the sidebox.php page I have. You can also do this with categories and products etc.

[gjh42]

What is the purpose of your posts? Are you asking about the best way to apply a photoshopped layout to your site? The steps you describe are not going to yield a functioning Zen Cart page. In particular, you cannot have blank tpl_header.php and tpl_main_page.php files, as those include code for many essential functions. (You could theoretically have a blank tpl_footer.php, if you didn't want any footer functions.)

The best way to apply a photoshopped layout is generally to cut it into large chunks, like the header, main content area, and possibly sidebars and footer. Often it will be simplest to have one #mainWrapper background with other page element backgrounds floating on it, but the exact process depends very much on your design. Use the layout as a guide to configure the size and shape of each page element, and you can often set the element colors, borders, etc. in your stylesheet.

It's never a good idea to use absolute links like http://ww w.yourwebsite/zencart/index.php?main_page=login, as these will cause issues on SSL pages and prevent you from easily using a development/testing alternate site. Instead, use relative links like index.php?main_page=login. Zen Cart will automatically fill in the correct base href for the current location.

The same goes for ez-page links. Use index.php?main_page=page&id=1. Do not include the chapter unless it is needed. Better yet, use the PHP function zen_ez_pages_link(#) where # is the ez-page id, and it will automatically generate the correct link.

I don't use the EZ Page box because I make my own custom links within the sidebox.php page I have.

While you are free to reinvent the wheel, what makes your hand-coded sidebox better than the automatically generated dynamic ez-pages sidebox? If you want features that the stock sidebox does not have, the Ezpages Improved Menus mod in Free Addons can give you a lot of individualized control while still being dynamic (i.e. it will automatically include new ez-pages and not require you to manually create every link).

I haven't figured out the CONSTANT yet that declares the base directory.

To create absolute links (not recommended) for non-SSL pages, that would be HTTP_SERVER . DIR_WS_CATALOG.

[gjh42]

The sideboxes.php file is OUTSIDE of the template directory. For some reason I can't get it to show up when making a sidebox directory in the template folder. Maybe someone can help.

/zencart/includes/modules/sideboxes/sidebox.php

All sidebox etc. module files (which fetch the information to be output) go in /includes/modules/sideboxes/ or whatever subfolder is appropriate, never in /includes/templates/.
You can also use a template subfolder for this: /includes/modules/sideboxes/your_template/sidebox.php. This is necessary if you are modifying an existing sidebox, optional if you are creating a new sidebox.
You will use an /includes/templates/your_template/sideboxes/tpl_sidebox.php file for the output formatting of the sidebox.