# HTML Templates

This page details information about the Maian Support html template structure. If you are attempting template changes, read this page CAREFULLY!!

Before You Begin

Before you start to update the Maian Support templates or colours, its a good idea to have the following:
1 - A good text editor. It is recommended you edit files offline and re-upload via FTP and not edit directly on the server. Make sure your text editor does NOT save files with the BOM (Byte Order Mark) enabled. Notepad++ is a good solid free editor.
2 - A good search program/utility. Sometimes you are looking for a specific div name and you can`t find it. A quick search on the 'content/*theme*/' folder should find you things quicker. There are a few great free programs around, a few recommendations are as follows:
Super Finder XT
File Locator Lite
File Seek
Index Your Files
UltraFileSearch
3 - Color picker. Colours can be a problem, especially for colour blind people. Knowing what the hex code is and where its located in any CSS or template file. ColorCop enables you to pinpoint a colour area pretty quickly, just drag the eyedropper over the colour you are looking for. Its also free.
4 - Patience. Any developer will tell you this is paramount. If you are getting frustrated, come back to it later.
5 - Backup the original installation first in case you need to revert back to it later.
Note that where *theme* is used, this refers to the theme folder you are using, whether it be the default theme or your own custom theme.

Twitter Bootstrap

Maian Support is built using the development framework Twitter Bootstrap. If you are familiar with the bootstrap system, a lot of the code will seem familiar. If you aren`t, it doesn`t matter, its just standard html. Twitter Bootstrap enables responsive code layouts across different devices. The current version of Maian Support has been tested across most platforms to test responsiveness.
You can read up more on Twitter Bootstrap on the website.

Font Awesome

The companion to Twitter Bootstrap is Font Awesome. Many of the small graphics in Maian Support are created via Font Awesome class code and are not actual graphics. Again, if you want to become more familiar with this, more information can be found on the Font Awesome website.

Savant 3 Template Engine

Maian Support utilises the Savant 3 template engine. This make integrating the layout into your existing site relatively easy compared with none templated systems.

jQuery JS Framework

Maian Support already utilises the brilliant jQuery framework. Be careful when adding your own code that you do NOT include this library again. This could lead to features not functioning correctly.

Copy Default Folder

The default template set on install is located in the "content/_default_set/" folder. Before you begin you should create a copy of this folder alongside the default. This ensures future upgrades do not break your layout. You can revert back to the default layout at any time for reference.
Once you have created a copy of the default folder, update the "Language & Template Sets" section of your settings and make sure each language accesses the new location. You can have multiple sets if you wish and a different one for each language if using the multi language option. More info on the language options here.

Editing Templates

In the .tpl.php files, where you see PHP variables, these should NOT be removed. Example:
<?php echo $this->CODE; ?>
See comments in templates for certain variables. The .htm template files (content/*theme*/html/*.htm) have variable braces. eg: {brace}. These should NOT be removed either.
To integrate Maian Support into your existing site design is going to require some basic knowledge of HTML & CSS. You`ll start by looking at your current HTML structure while comparing it to that of Maian Support. Generally work with the header and footer first. If you don`t understand HTML, integrating into another site layout is NOT recommended. Its also worth noting that if you are familiar with HTML, but not familiar with Twitter Bootstrap you could break the responsive layout.
It is NOT recommended you integrate the layout using PHP includes or iframes. This is very bad practice and can have knock on effects.

Header / Footer

There is only one header and one footer file. So, if you have some plugin code that needs to go in the header or footer, you would do so via the following files:
content/*theme*/header.tpl.php
content/*theme*/footer.tpl.php

Parse Custom PHP Code from Main Index Files (Advanced)

If you want to load custom code to parse from the main index.php files, add your code to the following files:
control/index-parser.php
admin/control/index-parser.php

Colours & Appearance

Maian Support utilises Cascading Style Sheets (CSS) for colour display. ALL of the colours you see for the default design are in the style sheets. The CSS file locations in Maian Support are as follows:
content/*theme*/css/*.css
admin/templates/css/*.css

Images

Maian Support doesn`t have too many images, thanks to Font Awesome. The image file locations in Maian Support are as follows:
content/*theme*/images/*
admin/templates/images/*

Javascript & Plugins

Maian Support utilises some third party javascript plugins. The js file locations in Maian Support are as follows:
content/*theme*/js/*
admin/templates/js/*

References & Reading

HTML (Hypertext Mark Up Language)
CSS (Cascading Style Sheets)
Free Text Editors
Free FTP Software