# 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:
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):
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:
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:
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:
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:
Place this line in the template, instead of the SITE NAME-text that is there now.

#### Pathway

The pathway uses a similar dsg:

#### 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:
The right modules are very similar:

#### 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: