Create a template

From Splash Frog Docs

Contents 1 Overview 2 Template System 3 Template Files 4 Available Variables 4.1 $header_content 4.2 $template_path 4.3 $relative_template_path 4.4 $custom_area(x) 4.5 $web_ext 5 Menu Example

Overview

This section of the Wiki will go through and explain the steps, files, and variables needed to create your own template to work with Splash Frog. Please note that this will not tell you how to design your template, only what is needed to have it successfully work with Splash Frog.

Template System

Splash Frog utilizes the Smarty-styled templating system to effectively allow the templates to be completely independent from any back-end coding, freeing up the template designer of having to know any real "code". The only thing the template designer will need to know is certain variable names and Smarty tags to get the correct content to display correctly. For further explanation and details on Smarty, please visit their site.

The smarty tag wrapper is {{cms}} and {{/cms}}.

Template Files

There are two critical files needed to create a template: config.php and template.tpl.

• config.php - This holds the recognizing PHP variables when creating or updating a template within the Splash Frog control panel. The two variables needed within this file are: $template_name and $template_dir.

• template.tpl - This is the main template file. You construct your HTML within this webpage.

Additional files can include:

• menu(x).tpl - Create a menu templating file for the different custom area's that you create. (Example: If your template has two custom area's, you would create menu1.tpl and menu2.tpl). These files must be located within the same folder as the template.tpl file.

• screenshot.png - You will need to take yourself a screenshot of your completed developed template and name it screenshot.png. This file is used from within the control panel to give your administrators the view of what area's are what. The screenshot will need to be 580 x 380 and must be located within the same folder as the template.tpl file.

• Any Misc. Files - You can include within your template any javascript, images, flash, or stylesheets. You can put them into their own folders.

Available Variables

Below is the full list of available smarty variables for within the template:

• $metatags
• $header_title
• $website_title
• $website_email
• $custom_css
• $header_content
• $template_path
• $relative_template_path
• $custom_area(x)
• $page_title
• $page_content
• $web_ext
• $sitecrumbs
• $breadcrumbs
• $last_update

$header_content

$header_content Will show any and all additional header info, like any links to module javascript files, etc.

$template_path

$template_path is to be used for including images, linking to stylesheets, etc. This links to the base of the template folder, so if you have your images in a folder, you would need to append that folder name. (Example: {{cms}}$template_path{{/cms}}images/my_image.jpg)

$relative_template_path

$relative_template_path is the path to point or include any additional template files but is referenced only to the relative path of the template, not the absolute.

$custom_area(x)

$custom_area(x) is the definition of where you want a custom area. Replace the (x) with the number of that area. Remember

that each custom area must have a different number.

$web_ext

$web_ext is the set webpage extension for your website.

Menu Example

Below you will find a basic example of the Menu Code you will need to use to within your menu(x).tpl files. You can change the HTML any way you want to make your menu work for your website design.

Remember that if you use the variable $menuname, whatever you have labled your menu group will show up there.

<div align="left">
<div class="menu_title_css">{{cms}}$menuname{{/cms}}</div>
<ul>
{{cms}}section name=l loop=$menulist{{/cms}}
	<li>
		<a href="{{cms}}$menulist[l].url{{/cms}}" target="{{cms}}$menulist[l].open{{/cms}}">
			{{cms}}$menulist[l].text{{/cms}}
		</a>
	</li>

	{{cms}}if count($menulist[l].subs) > 0{{/cms}}
	<ul>
		{{cms}}section name=ll loop=$menulist[l].subs{{/cms}}
		<li>
			<a href="{{cms}}$menulist[l].subs[ll].url{{/cms}}" target="{{cms}}$menulist[l].subs[ll].open{{/cms}}">
				{{cms}}$menulist[l].subs[ll].text{{/cms}}
			</a>
		</li>
		{{cms}}/section{{/cms}}
	</ul>
	{{cms}}/if{{/cms}}

{{cms}}/section{{/cms}}
</ul>
</div>