Templates & Styling

Maian Coin`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 Coin 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 Coin 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 Coin. Generally work with the header and footer first. If you don`t understand HTML, integrating into another site layout is NOT recommended.

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

Besides the built in bootstrap classes to hide / show elements on small screens, Maian Coin 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:

etc

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

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

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

Most of the graphics within Maian Coin 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 Coin has very few actual graphics, but any that do exist are located in the following directories:

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

There is no logo for Maian Coin, 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.

HTML (Hypertext Markup Language)
CSS (Cascading Stylesheets)

Free Text Editors

PSPad
Notepad++
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