Templates & Styling

Maian Cart`s front end store 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 store edits, the following are recommended.

[1] Copy the default template folder (as mentioned here), update your 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 its 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. Its 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 Cart 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 Cart 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 Cart. 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 Cart also utilises the Mobile Detect class. In any PHP template file, you can use the following constant:

MC_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 Cart 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 Cart has several stylesheets located in the following directories:

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

Most of the graphics within Maian Cart 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 Cart 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 Cart, but if you need to add one to your layout, add an image tag (or use CSS) in the header template file.

Left menu boxes can be re-ordered on the store settings page in your admin area via the 'System > Left Box Controller'. You can also add custom boxes if you wish to. Custom boxes can contain any code, so useful for integrating third party plugins or web services.

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