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. We have prepared /px_custom folder in site root for this purpose. 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.
In many cases it would be something like this:
Replace: src="http://www.sitename.com/img
With: src="http://www.sitename.com/px_custom/img
Please use absolute paths instead of relative paths, because in editing mode editors go to catalog /editor and your image links might become broken.
In many cases you develop your site in one folder and later transfer it to somewhere else. In that case we would suggest you to use SAPI {$wwwroot} tag in file paths:
Replace: src="http://www.sitename.com/img
With: src="{$wwwroot}/px_custom/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">
<script language="javascript" type="text/javascript" src="{$wwwroot}/js/yld.js"></script>
<link rel="stylesheet" type="text/css" href="{$wwwroot}/styles.php">
</head>
The following lines must be included in every page template for they ensure that your page is later editable:
<script type="text/javascript" src="{$js_path}/yld.js"></script>
<link rel="stylesheet" type="text/css" href="{$wwwroot}/styles.php">
In Saurus 4 you need do add "xmlns:editor" in your HTML tag:
<html xmlns:editor="http://www.saurus.info/">
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}
RSS