Templates & Styling Information

Maian Lockbox 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/_lockbox_default/ and content/_system_portal folders.

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/_system_portal/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 Lockbox 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 Lockbox. 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 template folder.

content/_lockbox_default/footer.tpl
content/_lockbox_default/header.tpl

content/_system_portal/footer.tpl
content/_system_portal/header.tpl

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

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 Lockbox via the autoloader. Refer to the package info for usage.

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

For many people, changing the colours and a few default images is good enough. Maian Lockbox utilises Cascading Stylesheets for colour display. ALL of the colours you see for the default design are in the stylesheets. Maian Lockbox has the following stylesheet locations and all the stylesheets can be edited in a good text editor.

content/_lockbox_default/assets/css/*.css (Lockbox)
content/_system_portal/assets/css/*.css (Portal)
admin/content/css/*.css (Admin)

Edit these and choose whichever colours you want.

Images are located in the following folders:

content/_lockbox_default/assets/images/ (Lockbox)
content/_system_portal/assets/images/ (Portal)
admin/content/images/ (Admin)

Note that most images are vector graphics rendered via the Font Awesome class.

Maian Lockbox utilises a simple captcha to help protect your system from bots. The captcha settings are located in the following file:

control/classes/class.captcha.php

Feel free to use another captcha class if it's more suitable.

HTML (Hypertext Markup Language)
CSS (Cascading Stylesheets)
Free Text Editors