Templates & Styling: Maian Affiliate Documentation

Templates

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.

DO NOT adapt the interface into an existing website using PHP includes or iframes, this is bad practice and may produce unreliable results.

Read the instructions below carefully.

HTML5 Responsive Layout

Maian Affiliate utilises Twitter Bootstrap, a free and open-source front-end web framework for designing websites and web applications. You will need to have an excellent understanding of Bootstrap and responsive systems. Using out of date HTML4 code could potentially break the responsive layout.

Before You Begin

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.

Template Integration

Maian Affiliate utilises the Savant 3 template engine. This make integrating the layout into your existing site relatively easy compared with none templated systems. The advantage of Savant 3 is that it uses PHP syntax, which you may already be familiar with. Unlike other template engines that basically require you to learn a new language.

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

Where you see PHP variables in the .tpl.php files, these should NOT be removed. Example: <?php echo $this->CODE; ?>. See comments in templates for certain variables.

In most cases, the PHP code in the .tpl.php 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.

To integrate Maian Affiliate into your existing site design is going to require some basic knowledge of HTML. 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.

Header & Footer Files

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

Responsive / Mobile Detection

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 constant:

MSW_PLATFORM_DETECTION

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:

<?php
switch (MSW_PLATFORM_DETECTION) {
  case 'pc':
    // Code here for desktops only..
    break;
  case 'mobile':
    // Code here for phones only..
    break;
  case 'tablet':
    // Code here for tablets only..
    break;
}
?>

<?php
if (MSW_PLATFORM_DETECTION == 'tablet') {
  // Do something on tablets only..
}
?>

etc

Advanced users you may also use the 'MBDX' Maian Affiliate object to reference any Mobile Detect functions as detailed on the Mobile Detect website. Example

<?php
if ($MBDX->isMobile()) {
// Do something on mobile phones only..
}
?>

Colours & Appearance

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*/css/ (Frontend Stylesheets)
admin/templates/css/ (Admin Stylesheets)

Images & Font Awesome

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*/images/ (Frontend)
admin/templates/images/ (Admin)

Custom Logo

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

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

Additional Pages

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

References & Reading

HTML (Hypertext Markup Language)
CSS (Cascading Stylesheets)

Free Text Editors

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