Custom Templates

The templates that come with slscart are very basic ones, with no images or real design features. You can certainly use these templates for your clients - or you can customize them and create your own templates. The instructions are for creating a template that will show up in the templates dropdown.

• Using an existing template
• Create custom template
• Editing

Using an existing template

Select the template you want to use

Check 'Update link colors' (to use fonts and colors of the template)

Check 'Logo/Images' (if images are in place)

Click Apply button. the template will be loaded along with the fonts and colors will be updated and the Images > Catalog images.

Create Custom Template

To do this:

1. Create a regular HTML file with the extension of .htm. Include the page names of the template include codes within the HTML code, with a PHP path:

<script type="text/php">include("c:apachehtdocssitebuilder/enc/somefile.php");</script>

Where "somefile.php" is a file within the "enc" (or includes) directory, as shown in gray next to the site include name on the site codes page.

2. Follow the instructions below when creating the template:

• Do NOT use the %CODE% value - instead, use the actual page name. The page name is located on the site codes page.
• You must include the whole PHP path if multiple pages are to be used.
• The template file should be named with the template´s name, where any spaces are noted as underscores. For example, if you wish to call your template "Blue Moon", name it "Blue_Moon.htm".
• Template files must end in .htm
• Include absolute image paths (ie. http://yoursite.com/images/picture.gif) instead of relative ones (ie. images/picture.gif) in the template.
• To create templates that can be used by multiple templates, you will need to use the PHP path http://localhost/sitebuilder. ie.) instead of using:
  <img src="http://yoursite.com/images/picture.gif" border="0">
  use:
  <img src="<?php echo "http://localhost/sitebuilder/images/picture.gif"; ?>" border="0">
• Images can be stored in the "template" directory if desired

If in doubt, make a copy of one of the existing templates and look at the HTML code to follow the same procedure.

3. For each .htm template file you create, you can create a matching .php file that shows all color values. This will serve as a file that allows the shop to update the link and button colors as they select a new template. You do not need to create a .php file for each template, but the link colors will not be updated if a .php file doesn´t exist (forcing the shop owner to select his or her own colors).

The .php file should be named exactly as the corresponding .htm template file, except for the extension. Use an existing configuration file as a guide. For each value, replace only the color value within quotes.

HINT 1: Are you still having problems creating custom templates? Try creating them as custom templates first, using the custom template box. Then after saving, copy the HTML code in the index.htm file and paste into a new template page. This auto-creates all the includes for you, so it's a lot easier to create.

HINT 2: To reuse templates on multiple sites, be sure to use a variable path for images. In other words, instead of referencing them as "images/picture.gif" or "http://www.mysite.com/images/picture.gif", use:

"<?php echo "$urldir/images/picture.gif"; ?>"

Where $urldir represents the main domain. The whole path should be enclosed in a PHP echo tag.

Editing an existing template

There is no easy way to edit an existing template.

* If you are using a custom template, back it up; i.e. save the contents of the custom template in the custom template editing window.

* Select the template you want to edit (we'll call it GPLcatalog) and make it custom. i.e. click Customize. The template's contents will show up

* Click update. This will create the custom template.

* Make changes to custom template. This changes the template/index.htm file.

* Copy the contents of the template/index.htm file and put it in the existing GPLcatalog.htm file.

* If you were using a custom template, copy and paste the backed up custom template back into the custom template editing windows and Update. This restores your custom template.

***