Customizing a Template
Note: For modern templates, which are expected to run on both
desktop computers and mobile devices,
a better choice of a starting point. However, if you are certain your
template will be desktop only, you can use
- make a new folder, perhaps something like:
This is the working area for your own custom template
make 4 subfolders in there:
common/ css/ images/ templates/
copy the existing files from the
responsive_classic/imagesinto the appropriate folders in your new working area
You’ll want to edit this file to incorporate your custom page-header. This file governs the appearance of the top of all of your pages.
You can edit the footer area to appear as you like.
- While working on #4 and #5 above, you can also modify the
css/stylesheet.cssfile in your working area, to set the styles for your template.
You can copy your existing stylesheet into the
css folder, making sure it’s named
styles_mine.css). All files in this folder are loaded by your zen cart site in alphabetical order, and cascading rules will determine the combination of effects in that order.
The colors for the main area of your site and the sideboxes, etc can be controlled in the stylesheet.
If you need a very different page-layout from the default, you can copy
responsive_classic/commonfolder to your
commonfolder, and alter it.
This file builds your pages, starting with the header, then the left column of sideboxes, the middle “content” area of the site, then the right column of sideboxes, followed finally by the footer. Thus, by styling this page, you can control the appearance of the whole site. In many cases, you don’t need to touch it though, as much of the control is in the stylesheet already.
- Finally, create the
template_info.phpfile in your working template folder. Instructions on creating this file and activating your template can be found in the template_info FAQ.
In your post, please include your Zen Cart and PHP versions, and a link to your site.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.