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 start to update the Maian Support templates or colours, it's 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. CudaText 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 it's 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. It's 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.

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, it's 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.

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.

Maian Support utilises the Savant 3 template engine. This make integrating the layout into your existing site relatively easy compared with none templated systems. We also favour this over things like Blade & Twig which have their own syntax and can take longer to learn and be confusing for beginners.

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.

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.

Note that theme folders MUST start with an underscore to be recognised by the system.

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.

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. It's 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.

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

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

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/content/css/*.css

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/content/images/*

Maian Support utilises some third party javascript plugins. The js file locations in Maian Support are as follows:

content/*theme*/js/*
admin/content/js/*

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