Applying custom design to page template checklist

This is a quick checklist for creating Saurus CMS page template out of static HTML/CSS. We assume that you have previously worked through the Creating page template tutorial.

 

Step 1: Create page template file

Create a new page template in Admin > Templates > Page templates and copy-paste your static HTML code to template contents.

Step 2: Copy referenced files to the server

Copy your images, JavaScript and CSS files to the server. It would be wise to preserve directory structure you used in your HTML-packages.

Step 3: Replace file paths

Open the template file using any text editor and replace file paths found in your HTML-code. Search for image, JavaScript and stylesheet paths and make them link correctly in your destination server.

Replace: src="http://www.sitename.com/img


With: src="{$wwwroot}/img

Step 4: Work with HTML HEAD

Following example gives and overview of Saurus API tags you can use in HTML HEAD:

<head>
    <title>{$title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset={$encoding}">
    <meta name="keywords" content="{$meta_keywords}">
    <meta name="description" content="{$meta_description}"> 
    <meta name="generator" content="Saurus CMS"> 
    <link rel="stylesheet" type="text/css" href="{$wwwroot}/styles.php">
    <script language="javascript" type="text/javascript" src="{$wwwroot}/js/yld.js"></script> 
</head>

The following lines must be included in every page template for they ensure that your page is later editable:

<link rel="stylesheet" type="text/css" href="{$wwwroot}/styles.php">
<script type="text/javascript" src="{$js_path}/yld.js"></script>

If you have inline JavaScript or CSS description in your HTML code which includes "{" and "}" symbols, separate it from the rest of the template code with {literal} tags:

{literal}
<script type="text/javascript"> 
    function start() { 
    do_something;
}
</script>
{/literal}

Step 5: Build the menu

Find the looping HTML blocks in your menus and add corresponding SAPI tags. Refer to
Creating page template tutorial for example code.

Step 6: Add the content area

Find place in your HTML where the content area resides and insert the following tag which displays output of the content template:

{print_content}