Mambo CSS Template Tutorial

Lawrence Meckan

Mambo Template Tutorial

This tutorial covers: Why are we using CSS ?

Design: Mockup

First, examine the mockup for ways to optimise cutting
Design supplied by Prophecy
The inherent risk in using Photoshop and other design tools to auto-cut your design
is that you loose the ability to control which bits you don't need

Design: Analysis

It is forseeable that there are 5 main areas to the design.
They are as follows:

Design: Header/menu

Cut the header as a single image
Design supplied by Prophecy
Then cut the entire menu area out as one image.
The static menu will require recutting to lay out the various menu items.

Design: Static menu

Cut up the static menu to allow it to be built using CSS
Design supplied by Prophecy
Each piece will be linked directly from the stylesheet, so as to cut down HTTP requests.
The more HTTP requests you have, the longer your template will take to load.

Design: Content/footer

The content area does repeat, so it is easy to cut a single slice for the background of the content.
Design supplied by Prophecy
The footer is farly simple to cut as it is a unique image like the header.

Design: Template

A Mambo template is made up of the following files:

Design: Web editor

Now to get started coding. Open up your web editor (in this example, Dreamweaver).
Create a PHP document, preferrably with XHTML compliance. Design supplied by Prophecy

Index.php: Head Code

Mambo 4.5.x is built around the XHTML 1.0 Transitional document type.
The code between your header should be as follows:

You do not need an XML declaration above the document type as it forces IE into 'quirks mode'.

Index.php: Head Analysis

An explanation of of the head code:
This defines the PHP file as being able to be viewed by Mambo only.
This grabs the metadata and automatic page titling from Mambo, and tells it to render in text/hml with a specific language.
This enables the HTML content editor if a user chooses to log in from the frontend.
This gets the default CSS stylesheet and loads it to help present the layout.

Index.php: Container

This code comes next:

This code declares the start of the body, sets up a container to place everything, and sets up a header with a contextual header - h1.
All layers are going to be driven by the CSS, seen later in this tutorial.

Index.php: Container Analysis

An explanation of items at the start of the container:
This contextual header not only grabs the link to the frontpage of the live site through the $mosConfig_live_site, but also gives an accesskey to it. $mosConfig_sitename gives the site name.
This technique to display the header as an image and a link is known as Fahrner Image Replacement.

Index.php: Static menu

Adding the following code builds the static menu for us:
The "core" layer is for the overall layout, prewrapped into the "container" layer.
The "menu" numbered links are the images that go nowhere for the static menu.
All menu buttons have a unique id, which will be called by the CSS file to map the image to the link.

Index.php: Content

Next, we build the content, sidebar and pathway using Mambo and layers:
The "content" area handles the entire sidebar and article text.

Index.php: Content Analysis

An explanation of the content calls in Mambo:
This is the default call to declare a module area, in this case, left, in a template.
Other modules areas (e.g. right, top, bottom, user1, user2, inset) can be declared exactly the same way.
In Mambo 4.5.1 and above, -1 inside the PHP call gives a module without a table border and a title.
In Mambo 4.5.2 and above, -2 inside the PHP call gives a module inside a div layer, with a title, as per X-Mambo format.
In Mambo 4.5.3 and above, -3 inside the PHP call gives a module to allow for basic CSS rounded corners.
This sets up the pathway / breadcrumbs and displays it.
This displays whatever is in the article / main content area.

Index.php: Footer

Adding this code puts the footer in and closes off the entire PHP file.
The "footer" layer refers to the footer image previously seen in this tutorial.

Index.php: Final step

Now save the index.php and we can start work on the CSS file.

CSS file: Beginning

Create a file called template_css.css in your /css directory if you haven't already
Add the following to make sure the CSS works exactly the same on all browsers

This CSS reset means that you have to style each area of CSS specifically for margins and padding.

CSS file: Body

Next we style the body element with a single image, and set up the basic text and alignment. The text-align is centred to manage the next step of the CSS.
It tells all browsers that the body itself is in the center of the page.

CSS file: Container

To declare something referenced as an "id" in the PHP, use the # call and add the text: This tells the browser that the container itself is 800 pixels wide in the center of the page.

CSS file: Header

Next we add the header layer: The margin-top call pushes the entire layout down the page 50 pixels.
It is again centred using the same margin: auto calls seen in the container layer.

CSS file: Logo

Now here's the logo based on Fahrner Image Replacement: The top, left and no repeat calls stop the image repeating and give it the correct alignment inside the layer.

CSS file: Core

Now we get the start of the content area - defining the core. We no longer want centered text, so we change to left aligned text for the content.

CSS file: Static Menu 1

We define the static menu area, and place a workaround for having CSS images as rollovers Otherwise on IE, the menu images will disappear on hover states.

CSS file: Static Menu 2

Then we build the menu using CSS and floats to give the "effect" of tabling.

CSS file: Content

Next, we add the image for the repeating content background and style it The idea for this effect comes from A List Apart

CSS file: Content example

Here's what the content area should look like with the content and no sidebars. Design supplied by Prophecy

CSS file: Articles

Splitting the content using a float and two unique widths give us our sidebar and article text: Paragraph and font styling is partially handled here.

CSS file: Footer

Now here's the footer: There are still Mambo specific calls to account for, and a limited example follows..

CSS file: Mambo calls

Here's an example of basic Mambo specific calls needed to continue building the template: Apart from that, there is little left to do in the CSS file.

CSS file: Final step

Now save the template_css.css file and let's get to work on the XML file

XML file

Your XML file must be called templateDetails.xml and be in the same directory as index.php. Here's the one for Creation of New Worlds: Note the seperation between files, images and css. All images, CSS and scripts must be included in the XML.
Note also that this file is not referenced by itself.

XML file: Final step

Now save the revised templateDetails.xml file and let's get to work on the thumbnail file

Thumbnail: Specifications

Take a screen capture of the new template, resize to 250 by 140 pixels, and save it to the template directory as template_thumbnail.png

Tutorial Complete

Now archive your template directory using gzip or Winzip and upload it to your server via the Mambo template installer.
You can see the final template on our demo site.