Templates & Styling

Maian Affiliate's front end interface can be adapted into any existing web layout. This should be accomplished by editing the template files. This will require a knowledge of HTML5, JS, CSS & PHP.

Read the instructions below carefully.

Before you attempt any interface edits, the following are recommended.

[1] Copy the default template folder (as mentioned here), update your theme settings to use the new theme, then use the default for reference.

[2] Backup the entire system, including database structure in case you need to start again.

[3] Have a good search program/utility handy. Sometimes you are looking for a specific div / class 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 listed below.

[4] Use a good quality text editor to edit files, DO NOT edit directly on the server. Edit and upload via FTP. Some free text editors / FTP utilities are shown below.

[5] Colours are the next problem. 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.

[6] Patience. Any developer will tell you this is paramount. If you are getting frustrated, come 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 Affiliate 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.

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 Affiliate 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 Affiliate. 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)

The header and footer files are the files you should start with when creating your own integration. If you need any specific code to you head or body tags you can do so via these files and it will affect all pages. These files are located in your theme folder.

content/*theme*/footer.tpl
content/*theme*/header.tpl

Besides the built in bootstrap classes to hide / show elements on small screens, Maian Affiliate 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 Affiliate via the autoloader. Refer to the package info for usage.

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

For many people, changing the colours is good enough. ALL of the colours you see for the default design are in the stylesheets. Maian Affiliate has several stylesheets located in the following directories:

content/*theme*/assets/css/ (Frontend Stylesheets)
admin/content/css/ (Admin Stylesheets)

Most of the graphics within Maian Affiliate are created by Font Awesome, a font and icon toolkit based on CSS and LESS. Icons are generated via a i tag and a class. More info on the font awesome website.

Maian Affiliate has very few actual graphics, but any that do exist are located in the following directories:

content/*theme*/assets/images/ (Frontend)
admin/content/images/ (Admin)

There is no logo for Maian Affiliate, but if you need to add one to your layout, add an image tag (or use CSS) in the header template file.

Menu boxes can be managed in your admin area via 'Layout > Menu Boxes'(via menu). More info here.

You can easily add new pages in your admin area via 'Layout > Menu Pages'(via menu). More info here.

HTML (Hypertext Markup Language)
CSS (Cascading Stylesheets)

Free Text Editors

VSCode
PSPad
CudaText
RJ TextEd
SynWrite

Free FTP Software

FileZilla
WinSCP
Cyberduck
FTP Rush

Free Search Software

Super Finder XT
File Locator Lite
File Seek
Index Your Files
UltraFileSearch