Creating a Custom Template Design (advanced users only)

It's very easy to load your own custom designs, 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.
  • 3 Users Found This Useful
Was this answer helpful?

Related Articles

Template Include Codes

When creating a custom design, add any of the following codes (format %CODE%) directly into your...

DIY (Do-It-Yourself) Template

Click here to learn about the DIY Template

How to put a Maintenance, or Coming Soon message on your site

If your site is under construction and you want to hide your home page from public view, or if...

Mobile Theme for Site Builder

Looking for a way to make your Site Builder shop mobile friendly?     ...