Mambo Open Source/Create your own template

TOC
Chapters
Home
Configuration
Design
Content
Development
Miscellaneous

This article is a tutorial on how to create a template from scratch.

Templates are located in the directory /mambo_dir/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 this is the minimum set of files needed. The core script of MOS expects 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 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.' );
$iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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 if ( $my->id ) initEditor(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
    <link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/yourtemplatesname/css/template_css.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 my planned layout:

SITE NAME
Pathway/breadcrumb
Left modules	Main content More main content	Right modules
Footer with copyright info

This is the 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:

$GLOBALS[mosConfig_sitename]

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 $GLOBALS[mosConfig_sitename] ?>

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

Pathway

The pathway uses a similar dsg:

<?php dsf?>

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 main menu, 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 codes:

Replace the "Left modules"-text with this:

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

The right modules are very similar:

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

The main 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