Support Center: Template Manual
We made the templates system to be as easy to manage as possible with most of the system features included into the template to do the modifications faster and right in the template files to simplify the system upgrades in the future.
1. Template files location.
The global templates folder is /templates, you have to store your templates in it with each template in a separate folder for the system to identify one correctly.
If you want to set different template to appear as default – use folder name as the template name in the administrator configuration panel, make sure you use the same case and codepage, we recommend to use only English names of the template folders for the filesystem to correctly identify the template and its folder.
2. Template structure.
Lets take the /default template as an example. It is stored in its folder – /default.
The following folders are used in the template:
/accounts – here we store tpl files that control the appearance of the detailed account page and the account search results. Those are mostly html with php variables included. Please note that you can use PHP constructions right in the tpl files.
/articles – controls the appearance of the articles in the system. The way article appears on the separate page and the article search results.
/documents – this folder consists of tpl files that control the document templates, the search results, the documents list in the control panel and the listing page.
/forms – the most important part of the template, this folder stores tpl files that are responsible for the forms in the system. Each form consists of two elements, the page layout and the form layout. Page layout of the form usually consists of the error output block, the confirmations block and the form itself. Lets take the accountRegistrationForm.tpl for example:
<?php echo $output;?>
<?php echo $errors;?>
$tpl = new Template();
echo $tpl->fetch(TEMPLATE_PATH . ‘/sidebox/content-box.tpl’);
In the above example we have the block that will show confirmation first, then the block that will store errors and the form inside the /sidebox/content-box.tpl layout.
As for the form layout we usually use this one for most of the forms: globalFormLayout.tpl
/gallery – controls the photo gallery layout in the detailed listing page and the control panel gallery search results.
/images – is a global storage for all the images used in the template.
/includes – php scripts that store sidebox data, the global template layout routines and some of the forms you can edit right in the template to change the field position etc. This is included right into the template as we think this is a good idea to have this separate for each template to control as many template features as possible without editing the script code outside the template folder.
/listings – default listing detailed page layout, listings search results in the control panel and the public system search. This folder also consists of files that control the PRINT page and the PDF layout for the listing detailed page.
/maps – controls some aspects of the maps, currently the window that appears when you press the listing point on the map.
/messages – the global messages layouts. We have layout for error message, confirmation block and standard output block.
/reviews – detailed and control panel search results layout for reviews.
/sidebox – global sidebox and content box layouts we use in the tpl files, this usually includes the box title and the content.
/stats – statistical data layouts mostly used in the account and listing visitors statistics.
Template files that appear right in the template folder:
articles.tpl – similar to menu.tpl (see below) but controls the articles list menu that appears as the sidebox.
calculator.css – css layout used for the captcha calculator in the forms.
calendar.css – availability calendar css layout.
footer.tpl – global footer for all the pages generated by the script.
forms.css – global css file that controls the forms.
gallery.css – slideshow gallery css layout.
header.tpl – global header included into all the pages, usually everything that goes above the <body> tag.
index.tpl – index (home) page layout controlled via /templates/default/includes/template-index.php file.
menu.tpl – menu that appears as the sidebox. You can add more menu options manually into this file.
panel.tpl – the top header menu that opens on a link press.
rating.css – global rating stars css layout.
style.css – global styles file.
style-print.css – listing print page css layout.
ui.css – jQuery UI css layout file.
wrapper.tpl – global template file that appears between header and footer with the columns and sideboxes included.
3. .tpl Files
Most of the .tpl files found in the template are easy to edit text files and are mostly html code with some php includes.
We use those to store all the form layouts, content detailed and search results layouts – everything you see in the system can be modified right in those tpl files.
Lets take some tpl files as examples:
This is a confirmation block that appears after a successful registration of the account or listing or any other successful activity.
<?php echo $content;?></div>
This is the code. As you can see we have div tag there that is controlled by the global class that is stored in the /style.css file.
The content for the confirmation box generated by the script is included as a PHP variable $content. ‘echo’ means ‘print this’ in PHP. This way we get a confirmation block with the above layout and text appear in the system. To update all the confirmation blocks simply modify this file with your class or even some text that will appear on all the confirmation blocks.
Very similar technique is used for other message blocks we have: /errors.tpl and /output.tpl.
Another good example is the /gallery/classic-detailed.tpl
<?php echo $Image;> <br /> </div>
<?php echo $Title; ?> <br /><br />
<?php echo $Description;?>
We use the above code to show the photo gallery image item in the search results with title and description included. Items are divided with ‘gallery_search_newline’ div tag.
Two columns css layout is used with ‘gallery_search_image’ div to store image and ‘gallery_search_main’ to store title and description.