Mambo CSS Template Tutorial
Mambo Template Tutorial
This tutorial covers:
- Cutting designs in Photoshop
- Implementing Mambo code via Dreamweaver
- Designing the layout using CSS
- Implementing a static CSS menu
- Code optimisation techniques
Why are we using CSS ?
- The entire Mambo template PHP file is less than 65 lines of code
- It's a better use of current technology than table based design
- It cuts down bandwidth usage when the template is running
- It saves people money in the long term
First, examine the mockup for ways to optimise cutting
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
It is forseeable that there are 5 main areas to the design.
They are as follows:
- Background color: 5 pixel image box of hex code #011629
- Header image
- The static menu
- The content area, including any sidebars
- The footer
Cut the header as a single image
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
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.
The content area does repeat, so it is easy to cut a single slice for the background of the content.
The footer is farly simple to cut as it is a unique image like the header.
A Mambo template is made up of the following files:
- index.php - the PHP file with all the Mambo code
- templateDetails.xml - the XML installer file for the template, listing all files
- /images - a directory for all your images
- /css - a directory with the CSS file in it
The naming convention for the CSS file is: template_css.css
- template_thumbnail.png - A thumbnail image of the template for the Mambo backend
- Additional you may have a /js directory listing any specific scripts implemented in the template
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.
Index.php: Head Code
Mambo 4.5.x is built around the XHTML 1.0 Transitional
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.
This code comes next:
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.
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
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
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
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