Managing Templates

Return to the Index

TUFaT uses the Smarty template engine. The template designs are actually just different header and background images, and different CSS stylesheets. The internals of each page are identical across all templates.

All templates are stored in the /templates/ folder. The "futuristic" template, for example, consists only of 3 files: tpl_footer.php, tpl_header.php, tufat.css, and the images stored in the /images/futuristic/ folder.

Adding a new template is quite easy:

1) Copy any existing /template/{template_name} folder, like /templates/futuristic/, and rename it to the new template name of your choice.

2) Copy any existing /images/{template_name}/ folder, and rename it to the new template name of your choice.

Done! Now, when you go to the "Change Template" link, you will see your new template in the list of choices. I'm not very imaginative, so I just called my new template "blah", but it still worked.

If you simply want to change the layout of an existing page, you must first determine which .tpl file produces the page. You can get this from the corresponding PHP file. For example, when I attempt to change a template, my browser URL shows chtemp.php?ID=1 at the end of the path. This means that I'm executing the "chtemp.php" file (ignore the part after '?').

When I open chtemp.php, the bottom has something like this:

$smarty->display( "chtemp.tpl" );

This indicates that the chtemp.tpl file controls the layout of this page. So now, I open the /templates/ folder and open chtemp.tpl with a good text editor (I recommend Textpad). The contents look something like this:

{* This is the template file for chtemp.php *}

<font class="title">{ tufat_mytrans getvalue="Change Template" }</font>
<br /> <br />
<form action="chtemp.php" method="get" name="chtemp_form">
<font class="normal">{ tufat_mytrans getvalue="Choose Template" }</font>
<select name="stpl">
{ html_options options="$file_list" selected="$templateID" }
</select>
<br /><br />
<input type="hidden" name="installik" value="1" />
<input type="submit" value="{ tufat_mytrans getvalue="Change" }" />
{* Back button removed
<input type="button" onclick="location.href='index.php'" value="Back" />

*}
</form>
<script type="text/javascript">
var inmenu=1;
</script>

This is the HTML code (more precisely, XHTML code) for this page. You should avoid changing commands within { and }, since those are Smarty tags. Contents within {* and *} are Smarty comments.