Mambo Open Source/Create your own template

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:</P> /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 contentMore 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