Create Your Own Mambo Template

Templates are located in the directory /templates . The following is a typical structure for a template directory:

/templates
/basic_template
/css
template_css.css
/images
index.php
template_thumbnail.png
templateDetails.xml

where each file is for:

index.php
    template layout file.
template_css.css
    css stylesheet for the template.
templateDetails.xml
    metadata file in XML format.
template_thumbnail.png
    reduced screenshot of the template (140px wide x 90px high)

To make a template, the minimum set of files needed are the index.php and the templateDetails.xml.

To make it easy to preview the template in the template administration, or via the template switcher module, it is recommended to create template_thumbnail.png.

Best practices recommends you put all your styling in a CSS file. Standard Mambo practice has historically been to call the css file template_css.css, however, nothing stops you from calling your css file any way you want, as long as you reference that name in your template's head.

Historically, the core script of MOS expected these files names. Note that while there are no images shown in the /images directory, this is typically where you would place any supporting images for your template, like backgrounds, banners, etc.

Create the Template Files

Some basic files are needed for a Mambo template to function properly.

Begin with creating a folder for your template in your sites templates-directory. Call it something appropriate, e.g. "myfirst" or "corporate_yellow" (anything goes), and open it. This is the root folder of your template.

templateDetails.xml

Then create a file called "templateDetails.xml". This file contains all technical info about your template, and should look something like this for now (it will be expanded later):

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template">
   <name>Myfirst</name>
   <creationDate>16/04/2005</creationDate>
   <author>Your name</author>
   <copyright>GPL</copyright>
   <authorEmail>mail@something.com</authorEmail>
   <authorUrl>www.yourhomepage.com</authorUrl>
   <version>1.0</version>
   <description>A little description.</description>
   <files>
       <filename>index.php</filename>
       <filename>template_thumbnail.png</filename>
   </files>
   <images>
       <filename>images/image.gif</filename>
   </images>
   <css>
       <filename>css/template_css.css</filename>
   </css>
</mosinstall>

This file is the reference for Mambo, and shows the name of the template and the name of all the other files. As you can see, there are references to a php-file, some images and a CSS-file.

Not all fields here are required, but use as many of them as you can.

index.php

Now, you can start with the index.php-file. This is where you shall place all HTML code and this will be the template's main source of output. Create the file called index.php and open it. This is the basic content of the file which is required for Mambo operation:

<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant \_ISO
$iso = explode( '=', \_ISO );
?>
<\!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
    initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; 
<?php echo \_ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>
/templates/my_template/css/template_css.css" rel="stylesheet" type="text/css"/>

</head>
<body>
</body>
</html>

As I assume you know basic HTML, you should know that the content and the template itself is to be placed in the <body>-tags of the template. Here you can use whatever method you like for content organization, e.g., div tags or tables. I'll use tables in this example.

This is an example layout:

This is an example HTML code for this layout to be placed in the body-tags:

<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
    <td height="50" colspan="3">SITE NAME </td>
</tr>
<tr align="center">
    <td colspan="3">Pathway/breadcrumb</td>
</tr>
<tr>
    <td width="150" valign="top">Left modules</td>
    <td width="400" valign="top"><p>Main content</p>
    <p>More main content</p></td>
    <td width="150" valign="top">Right modules </td>
</tr>
<tr align="center">
    <td colspan="3">Some footer text. </td>
</tr>
</table>

You can see that this layout has some simple static text in it, such as "left modules" and "Some footer text." Now I will replace this text with dynamic Mambo variables.

Site name

Mambo has a variable for the site name, and this variable is mainly used in the page title and when sending e-mails etc with Mambo. This variable can also be echoed in the template, and this is what will be done here. Of course, you can also write the name of the site directly into the template, but it is more appropriate to use this variable, as it makes the template more dynamic.

This is what the variable looks like:

$mosConfig_live_site

Now, when entering php code into a template, you'll need to use the php-tags for this, so that PHP will render the variable into what it is. Then it will look like this:

<?php echo $mosConfig_live_site;?>

Place this line in the template, instead of the SITE NAME-text that is there now.

Pathway

The pathway uses a similar function. Mambo has a pathway function, which shows you where in the hierarchy you are, e.g " Home > News > Latest news ". Mambo has a pre-defined variable for that too, and this is what should be put in the template:

<?php mosPathWay(); ?>

Modules

In the layout you can see something called left and right modules. This is a core function of Mambo, and is used to place small "boxes", or modules, that can be e.g. a mainmenu, user login, newsflashes, most viewed items and so on. The term left and right is simply different module positions, and they can be chosen in Mambo.

Anyway, here is the code:

Replace the "Left modules" text with this:

<?php mosLoadModules ( 'left' ); ?>

The right modules are very similar:

<?php mosLoadModules ( 'right' ); ?>

The Main Body Content

I will not explain much here, other than the way to do this is the same as with the above things; insert this where you want the main content to appear:

<?php mosMainBody(); ?>

The footer

Mambo also has a function for a footer. This footer contains credits to Mambo, stating that it is powered by Mambo Open Source. This is not mandatory, although many say so. It is recommended to have this, though, to support Mambo and inform others about it.

This is the code:

<?php include_once('includes/footer.php'); ?>

Download a blank template file here blank_template.php.txt, edit it to create your own template and save as index.php.