Template System

Top  Previous  Next

<%PRODUCT%>'s template system is completely HTML based. You don't need to know any PHP to change the look of the site and no PHP code is present anywhere in the template files. All of the template files are located in the templates directory. The easiest way to learn how <%PRODUCT%>'s template system works is by example.

 

There is a single template file you can edit that will let you change the look of all other pages. This file is main.html in the templates directory. If you open the file in a web browser it will look something like this:

 

template_system_01

 

This looks like any other HTML file that you may have seen in the past, except for a few elements on the page. The elements you may be unfamiliar with are:

 

{LANG_BAR}
{INDEX_TOP}
{QUICK_SEARCH}
{MEMBERS_MENU}
{PAGE_CONTENT}
{REGISTEREDO}
{GUESTSON}

 

What are these elements? These are variables that are dynamically generated by <%PRODUCT%>. For example, {REGISTEREDON} is replaced by  the actual number of registered users online. {GUESTSON} is replaced by the number of guests online. Any time there is dynamic content needed to be used on a page, these types of variables are used. All variables start with "{" and end with "}".

 

Now lets look at the other variables here. They differ slightly from the other two we discussed. These other variables are "subtemplates". A subtemplate is another HTML template that is simply included inside the current template. For example, the {QUICK_SEARCH} variable is replaced by the content in the quick_search.html file. By modifying main.html you can change almost the entire look of the site without having to change every single page. Since subtemplates are used, you don't need to apply your changes to every single page.

 

Take a look at the diagram below to see the output for some of the subtemplate variables:

 

template_system_05

 

For the purpose of this demonstration we have not listed {MEMBERS_MENU} or {LANG_BAR}, but those variable are automatically parsed by the software and the proper subtemplates are put in their place. The final result looks something like this:

 

 

template_system_02