Template Layout

knowledge base and frequently asked questions
Post Reply
User avatar
Site Admin
Posts: 4419
Joined: Sat Dec 12, 2009 3:35 pm
Location: Canada eh

Template Layout

Post by Brent » Wed Dec 23, 2009 1:55 pm

NEW: Version 1.2.1
The template and Styles are now separate folders.
The template folder includes content, module, and shared folders for .tpl files
The styles folder includes css and related image folders.
NEW 1.2.1 Selectable style colors. Style now includes a color folder with selectable color.css files.
These color.css files select color images located in the style/image/Yourcolor folder.
These are each set from settings in admin.

System is set to use default template and style folders. These should not be modified. They are your backup.
If you will make changes, create your own folder under catalog/template/yourfolder
Do the same with the default style folder. Create your own to make modifications.
Copy all the files from default to this new directory and change the setting in admin settings to reflect the change.
You now have settings in admin for template, style, and color.

The main controller .tpl files are in content
CSS and image files are self explanetory.

New items in the Module folder:
display_options.tpl - used by all modules for right column display options.
module_column.tpl - used by all display modules located in right or left column.
module_content.tpl - used by all display modules located in the center content area.

New Shared folder: these included tpl files are all shared files used by multiple controllers
add_to_cart.tpl - included in any tpl file that requires the add to cart button
pagination.tpl - the pagination display for manufacturer, category, and search
product_image.tpl - to display output of image on all display files
product_image_link.tpl - to display output of image on all display files with enlarge button
product_options.tpl - display product options with real time price updating (Select box)
b]product_options_radio.tpl[/b] - display product options with real time price updating (Radio Buttons)
product_price.tpl - displays price and or special pricing
single_column.tpl - main file for all single column displays.
multiple_columns.tpl - used to display 2 or more column displays

Header Logo is defined in color.css under (whichever color.css you chose)
#header .a {
background: url('../image/shoppingcart.png') no-repeat; You can also change this to define your own logo name!
width: 460px;
height: 59px;

You can just create your own image, and if it is the same size (460x59px), just upload to the
styles/style/image/Yourcolor with the same name shoppingcart.png and you're set.

Due to the modular format, if you want to change something such as the image display, you just create a new tpl
for the image output, name it whatever you like, and upload it to your shared folder.
You then just change the name in the main .tpl file, eg single_column.tpl where it calls the product_image.tpl:

Code: Select all

   <?php include $shared_path . 'product_image.tpl';?>

Code: Select all

<?php include $shared_path . 'YOUR_image.tpl';?>
That's all there is to it. You still have the original .tpl but are now using your own.

Post Reply