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 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. 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 Bootstrap on the website.

The companion to 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 Latte template engine from Nette. This make integrating the layout into your existing site relatively easy compared with none templated systems. The advantage of Latte is that it uses PHP style syntax, which you may already be familiar with. Unlike other template engines that basically require you to learn a new language.

The Latte templates for the system are located in the content/*theme*/ folder.

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.

Where you see variables in the .tpl files, these should NOT be removed. Example: {$CODE}. See comments in templates for certain variables.

In most cases, the code in the .tpl files parse standard HTML. The HTML templates are located in the content/*theme*/html/. folder. The HTML template files have variable braces. eg: {brace}. These should NOT be removed. Also note that these should not be confused with the Latte variables. The {vars} in the html folder are parsed at runtime by the system, not by Latte.

To integrate Maian Support into your existing site design is going to require some basic knowledge of HTML and a good understanding of the Latte syntax. You'll start by looking at your current HTML structure and 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.

To understand the Latte Template Engine more, refer to the Latte website:

Main Latte Guide
PHP2Latte (useful PHP conversion tool)

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
content/*theme*/footer.tpl

Besides the built in bootstrap classes to hide / show elements on small screens, Maian Support also utilises the Mobile Detect class. In any PHP template file, you can use the following variable:

{$PLATFORM}

This will have one of three values based on the user agent you are viewing the website in. The values are:

pc = Desktop
mobile = Mobile phone (as supported by Mobile Detect)
tablet = Tablet computer (as supported by Mobile Detect)

Examples of usage (Latte syntax):

etc

You can of course also use CSS media rules to determine the viewing pane.

Latte has a caching system so your system loads fast. If you are not seeing your changes after a browser refresh, clear the cache. The cache is located at:

content/**theme**/cache/*

Caches are theme based, so each cache is independent for each theme.

If you need to use a composer supported vendor package you can install it by navigating to the following folder:
control/lib/

Packages will be stored in the 'control/lib/vendor' folder. Once added they are automatically available in Maian Support via the autoloader. Refer to the package info for usage.

View available packages at:
https://packagist.org/

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

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

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

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