Creating Your Own Custom Design
It's very easy to load your own custom designs for clients, using either straight HTML code or WYSIWYG programs like Dreamweaver or FrontPage.
1. Create the Design: First, create the actual page design, using HTML code, or use a WYSIWYG program to design a layout.
2. Add Include Codes: Wherever you'd like each system component to go, add a special include code to the site. You can just type these in directly to a WYSIWYG program in design view, or you can add them in to the HTML code. You can add these includes within a div tag, in a table cell, etc.
For instance, if you want to add a search box to search the site, and you'd like to display it within a table cell, you could use:
<tr>
<td>%SEARCH_SITE%</td>
</tr>
and so on, using any of the codes provided. Note that some of the codes are specific to a particular placement. For instance, the meta tags and title tags need to be added to the head of the page.
3. Use Absolute References: When creating your design, make sure to use absolute includes for images and links. For instance, instead of using:
<img src="images/graphic.gif">use:
<img src="http://www.yoursite.com/images/graphic.gif">
4. Upload Your Design: Once you've added the includes, copy the HTML code and paste it into the "custom template" box in the "Templates" area of the administration setup, and click Upload. This will load your template into the "template/index.htm" file, and will convert the includes into the PHP format needed for the site.
5. Change Your Style Sheet: If you need to modify the style sheet, you can always create your own sheet - you do not have to use the one provided with the site. The easiest way to do this is to use the provided sheet, then copy/paste the classes at http://www.yoursite.com/enc/stylecss.php into your own style sheet, modify as needed, then use that instead of the one provided. This is completely optional though, and only needed if you need to change the style sheet.
Design Include Codes
The codes you can use are as follows:
%CATEGORY_BAR%
<?php include("$Home_Path/$Inc_Dir/navbar_bar.php"); ?>
Displays the categories in a colored, "light-up" bar horizontally displayed on the page. Category images are not shown.
%CATEGORY_DESCRIPTION%
<?php include("$Home_Path/$Inc_Dir/description.php"); ?>
Shows the description of the category for the catalog, if one exists. For pages other than the catalog page, nothing appears.
%CATEGORY_DROPDOWN%
<?php include("$Home_Path/$Inc_Dir/categories.php"); ?>
Shows a drop-down select box with all the category names listed within, to be used to search by category.
%CATEGORY_HORIZONTAL%
<?php include("$Home_Path/$Inc_Dir/navbar_horizontal.php"); ?>
Shows a list of all categories horizontally in the catalog, using the format specified in the "Settings" in this administration area. Note: the horizontal category list is already included in the %NAVIGATION_HORIZONTAL% include.
%CATEGORY_NAVIGATION%
<?php include("$Home_Path/$Inc_Dir/navbar_list.php"); ?>
On the catalog page, this displays catalog categories in the format Catalog >
Category > SubCategory, with no images
%CATEGORY_TABLE%
<?php include("$Home_Path/$Inc_Dir/navbar_table.php"); ?>
Creates an automated vertical "button" list of all active categories in the system,
in a table format. Category images are not shown.
%CATEGORY_TABS%
<?php include("$Home_Path/$Inc_Dir/navbar_tabs.php"); ?>
Creates an automated horizontal list of tabs showing all active categories in the system.
Category images are not shown.
%CATEGORY_VERTICAL%
<?php include("$Home_Path/$Inc_Dir/navbar_vertical.php"); ?>
Shows a list of all categories vertically in the catalog, using the format specified in the "Settings" in this administration area.
%CONTENT%
<?php include("$Home_Path/$Inc_Dir/content.php"); ?>
Shows the main content of the site - the content added to the "Pages" area and the product display for the catalog.
%COPYRIGHT%
<?php include("$Home_Path/$Inc_Dir/copyright.php"); ?>
Shows a copyright notice with your site name and the current year.
%COUPONS%
<?php include("$Home_Path/$Inc_Dir/coupon.php"); ?>
Displays a text box that customers can use to enter a coupon code into the system to obtain a discount. For use only with the coupon system.
%EMAIL_FRIEND%
<?php include("$Home_Path/$Inc_Dir/email.php"); ?>
Shows an "Email a friend" link on all pages, which allows your visitors to send the page to others.
%FEATURED_COLUMN%
<?php include("$Home_Path/$Inc_Dir/featured.php"); ?>
Shows a vertical column of three featured items with images (usually added to a side bar).
%ITEMNUM_DROPDOWN%
<?php include("$Home_Path/$Inc_Dir/catnum.php"); ?>
Shows a drop down select box with all the item numbers listed within, to be used to search by item number.
%LOGO%
<?php include("$Home_Path/$Inc_Dir/logo.php"); ?>
Displays the uploaded logo, if one exists, on your page.
%META_TAGS%
<?php include("$Home_Path/$Inc_Dir/meta.php"); ?>
Shows the dynamic meta descriptions and keywords of the page. Should be placed inside the <header></header> tag.
%NAVIGATION_HORIZONTAL%
<?php include("$Home_Path/$Inc_Dir/pagenav_horizontal.php"); ?>
Shows an automated horizontal list of all active pages in the system. After the "Catalog"
page, a horizontal list of active categories are shown.
For page ordering, use
%NAVIGATION_HORIZONTAL_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagenav_horizontal.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%NAVIGATION_VERTICAL%
<?php include("$Home_Path/$Inc_Dir/pagenav_vertical.php"); ?>
Shows an automated vertical list of all active pages in the system. Under the "Catalog" page,
a vertical list of active categories are shown, using the format specified in the "Settings" in this administration area.
For page ordering, use
%NAVIGATION_VERTICAL_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagenav_vertical.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PAGES_BAR%
<?php include("$Home_Path/$Inc_Dir/pagelist_bar.php"); ?>
Displays the active pages in the system in a colored, "light-up bar" horizontally displayed on the page. Page images are not shown.
For page ordering, use
%NAVIGATION_HORIZONTAL_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagelist_bar.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PAGES_HORIZONTAL%
<?php include("$Home_Path/$Inc_Dir/pagelist_horizontal.php"); ?>
Creates an automated horizontal list of all active pages in the system.
For page ordering, use
%PAGES_HORIZONTAL_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagelist_horizontal.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PAGES_TABLE%
<?php include("$Home_Path/$Inc_Dir/pagelist_table.php"); ?>
Creates an automated vertical "button" list of all active pages in the system, in a table format. Page images are not shown.
For page ordering, use
%PAGES_TABLE_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagelist_table.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PAGES_TABS%
<?php include("$Home_Path/$Inc_Dir/pagelist_tabs.php"); ?>
Creates an automated horizontal list of tabs showing all active pages in the system.
For page ordering, use
%PAGES_TABS_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagelist_tabs.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PAGE_TITLE%
<?php include("$Home_Path/$Inc_Dir/title.php"); ?>
Shows the title of the page (ie. "Home Page", "Catalog", "Links", etc.) or the header image.
%PAGES_VERTICAL%
<?php include("$Home_Path/$Inc_Dir/pagelist_vertical.php"); ?>
Creates an automated vertical list of all active pages in the system.
For page ordering, use
%PAGES_VERTICAL_X%
<?php $pggrp=X; include("$Home_Path/$Inc_Dir/pagelist_vertical.php"); $pggrp=""; ?>
where X is the group number (1-5) to display.
%PRICE_DROPDOWN%
<?php include("$Home_Path/$Inc_Dir/price.php"); ?>
Shows a drop-down select box with your price ranges listed within, to be used to search by price.
%SEARCH_CATALOG%
<?php include("$Home_Path/$Inc_Dir/search_catalog.php"); ?>
Displays a keyword search box which customers can use to search for products in your catalog by keyword.
%SEARCH_SITE%
<?php include("$Home_Path/$Inc_Dir/search_site.php"); ?>
Displays a keyword search box which customers can use to locate pages on your site
(including FAQs or articles), categories, or products by keyword.
%SITE_LOGO%
<?php include("$Home_Path/$Inc_Dir/sitelogo.php"); ?>
Displays the uploaded logo, if one exists. If a logo does not exist, displays the site name.
%SITE_MESSAGE%
<?php include("$Home_Path/$Inc_Dir/sitemessage.php"); ?>
Displays whatever you have entered in the "Site Message" field (in the variables area of the administration section). The text appears on every page, and is often used to easily update sale messages or note specials site-wide.
%SITE_NAME%
<?php include("$Home_Path/$Inc_Dir/sitename.php"); ?>
Displays the name of your web site in a header tag on your page.
%STYLE_SHEET%
<?php include("$Home_Path/$Inc_Dir/style.php"); ?>
Sets the fonts and colors for the catalog. Should be placed inside the <head></head> tag.
Use the existing style sheet as a guide when creating classes.
%TITLE_TAG%
<?php include("$Home_Path/$Inc_Dir/metatitle.php"); ?>
Displays the category or product if selected, for use with search engines. Should be placed inside the <title></title> tag.
%VIEW_CART%
<?php include("$Home_Path/$Inc_Dir/viewcontents.php"); ?>
Displays a "View Cart" link only.
%VIEW_CONTENT%
<?php include("$Home_Path/$Inc_Dir/viewcart.php"); ?>
Displays a "View Cart" link, along with the quantity and total ordered.
Example Templates
You can see the results of this template at The Demo Shop where I've included the majority of the available include codes. You can make a basic template using only the essential codes as well. You are free to use the code below as a basis to create your own template.
Fancy Three Column Template
Basic Two Column Template