Mambo Template Explained

The first thing that you want to do after successfully installing Mambo is probably to change the template layout and design. The easiest way is, of course, to download and install a ready-made one (there are many out there). However, you may have to make some adjustments and modifications here and there to suit your site’s requirements and it means you need to edit the template file. This article explains about the codes you will find inside a template layout file and how they are linked to the contents and configuration you set from the backend.

I must state it here that this article is not a step-by-step guide on how to create a template from scratch, but rather to give understanding how a template works in Mambo framework. Once you understand how it works, it’s easy to create your own template. I also assume that you already have some knowledge of PHP, HTML, and CSS.

Template structure

Each Mambo templates are kept in a sub-folder inside ‘installdir/templates‘ folder. Directory structure of a template is as follows:

[installdir]/templates/
  |
  +- [template_name]/
       | 
       +- index.php 
       |
       +- template_thumbnail.png  
       |
       +- templateDetails.xml
       |
       +- css/
       |    |
       |    +- template_css.css
       |
       +- images/

Our focus here is on index.php, the layout file where you put all the HTML and PHP codes. Mambo uses this file to display all pages in your website.

Initialization and header information

Here are the codes that you will most likely found at the beginning of the layout file.

  • <?php
      defined('_VALID_MOS') or die('Direct Access to this location is not allowed.');
    ?>

    The above code says that this file must be loaded by Mambo framework and direct access to it is not allowed.

  • <?xml version="1.0" ?>

    This is to define this file as a valid XML file (it is recommended that template is written in XHTML).

  • <?php 
      if ($my->id) initEditor(); 
    ?>

    Initializes WYSIWYG editor for logged in user.

  • <?php 
      mosShowHead(); 
    ?>

    Prints HTML meta tags such as title, generator, and robots. When user is viewing a content item, keywords and description defined for that item will be appended to the site’s meta tags.

    Meta tags for content item

    Meta tags for content item

Pathway

<?php   
  mosPathWay(); 
?>
Pathway

Pathway

Pathway or breadcrumbs is the navigation string that tells you where you are within the site structure. mosPathWay() function is defined in installdir/includes/mambo.php.

Notice that almost all URLs on your site has ‘Itemid‘ variable in it? That variable is an indicator of the currently selected item (menu, content, component, etc) and used by Mambo to generate pathway.
Hint: another use of Itemid is to highlight selected menu item.

Pathway is displayed inside ‘<span class="pathway"></span>‘ tag. For separator between each item, Mambo will first look in your template’s image directory for a file called ‘arrow.png‘ (installdir/templates/template_name/images/arrow.png). If none is found, the default image ‘installdir/images/M_images/arrow.png‘ will be used.

Pages: 1 2 3 4