Working With Mambo
Using Templates

One of the first things you'll want to do is to develop or edit a template. A template is basically what creates the Mambo site for you. Because working with templates involves image editing skills, and knowledge of HTML and PHP code, this part of the Working With Mambo series is not for total beginners. You can skip this section and try moving on to other sections if you want to use one of the templates that comes with Mambo without editing it.

Installing A Template

Before you can install templates, you need to be sure that the following directories are writeable (CHMOD 777). You'll probably want to log into your CGI server and set the permissions before you actually attempt to upload and install a template.

/administrator/templates/
/tempates/
/images/stories/

In the menu at the top, go to the Sites Menu -> Template Manager -> Install. In the Upload Package File box, click the Browse button and navigate to the .zip file that contains the template you would like to upload. Click the Upload File & Install button.

Alternatively, you can upload the template directory and it's files to Mambo's templates directory on your CGI server. If you are on the Site Templates page, refresh the page to see the new template added.

NOTE: If you're already in the Template Manager area, click the New icon at the top right to also go to the template installation page.

TIP: To see a preview of the template, hover your mouse over the template name. Note it may say the preview is not available until the image loads. If it still does not load after a few seconds, then there may not be a preview image for that template, or the template may be the wrong image file format. Template previews must be PNG images.

Removing A Template

To remove a template, go to Sites Menu -> Template Manager -> Site Templates and click the radio button next to the template name and then click the Delete icon at the top right of the page. Keep in mind that you can not delete a template that has a green checkmark by it indicating it's currently the default template. Select another template to use first before deleting it.

Setting The Template

Go to Sites Menu -> Template Manager -> Site Templates page. You'll see a green checkmark shows which template is in use. If you go to Sites Menu -> Preview -> In New Window, you'll see the site as a guest visitor would see it. Go back to the Mambo Administration Site Templates page again and click on a radio button next to a different template. Click the Default icon at the top right of the page. Now go back to the site preview and refresh the page to see the new template in use. You can use this method to determine which template you want to work with.

Editing Template Images and Files

Once you have decided which template to use, copy the files on your hard drive to another separate directory. This is the directory you'll work in. Or, you can create a new directory on your hard drive and download the files from your CGI server. Templates are found in the /templates/ directory.

In the actual template directory, you'll find several files and a directory:

First let's start with the templateDetails.xml file. Open this file in a text editor (not a word processor like Word, OpenOffice Writer, etc.) Make changes to suit the template. The tags are pretty much self-explianatory. Note that you may want to leave the original author's name and copyright intact, and just add your own name and date. Always give credit for the original template design.

Next, open the index.php file and change all instances of the old template name to the name of your new template. Any good text editor with search/replace functions should work.

Be sure to save your files. Now you can re-upload the files to the server under the new directory name. Any changes you make from now on, make sure to upload the changed file before refreshing and testing the template page. Note that all you need to do is upload the new template directory and it's files to the /templates/ directory. The template will show up in the Sites Menu -> Template Manager -> Site Templates page. If you're already on that page, refresh the page.

Now you can decide on a general color theme. Usually you can do this when creating the main banner of your template. In the images directory are the images that are shown in the template. If the template license allows, you can edit these any way you want, changing the color, pictures, or creating new images. Note that you will want to keep the image sizes and filenames exactly the same so that the template will work correctly. If you decide to change any filenames, also change the the old filenames wherever they appear in the templateDetails.xml, index.php and /css/template_css.css files. If you edited the arrow.png file to be another file format (like GIF, for example), then you'll also want to change that filename in the /includes/pathway.php file.

To change the other colors on the page, you want to edit the css/template_css.css file. Edit the colors found after the pound sign (#). It's helpful to have some kind of HTML color code tool to look these colors up. Some image and web page editors will show the HTML color code of a color in the palette. Grey tones can usually be left as-is unless you are changing from a light background to a dark one or a dark background to a light one. Grey tones are easy to spot. All numbers after the # sign are the same, (such as #888888), or repeating numbers in sequence (such as #C0C0C0).

Editing The Template

The index.php file is the main template. There may be times when you m ay need to edit this file. For example, title banner words may be hard-coded into this file, and you'll have to edit it to match your site name or slogan.

If you are creating a template from scratch, you can use the index.php file as a guide to see how one is constructed. Basic commands are listed below. You can add these commands into your code, for example:

<?php echo $mosConfig_sitename; ?>

Create A Preview

Once you have the template complete, load it into Mambo and do a screen grab, then reduce the image to around 200 x 150. Save as template_thumbnail.png. Keep in mind that the thumbnail must be a PNG image and no other format.

Create A Site Icon (FavIcon)

While this isn't actually a part of a site template, the Favorite Site Icon is part of the whole look of your site. By default, the icon that shows up in the browser address bar next to the site URL (and in tabs in tabbed browsers) is the mambo asterisk icon. You can change this by creating an icon and uploading it to the /images/ directory. Then go into Site Menu-Global Configuration and change the name of the icon in the Site tab, Favourites Site Icon text box. See Creating A Web Site FavIcon for more information on how to create an icon for your site.