"Coral Sea"

... stop the rush and treasure the life ...

Making of the Steampunk Joomla! template

I was assign with the task to create the design and Joomla! template for the main SteampukGames website. The guidelines were to create a simple and professional design. So, first thing I've done was to surf the web for inspiration the websites of the big companies. My attention was attracted on several websites and I gradually started to create my own vision of the future template.

Using Adobe Photoshop CS3, the idea started to take shape. Taking advantage of the wide posibilities of the filter gallery and brushes from Photoshop CS3 I've created the background image. And then, layers over layers, the "main panel", this is how I've called the main page that is floating over the background, was brought to life. All the time I had in mind to keep the design simple and professional, easy to implement in html using css properties.
After completing the website mock-up and being approved I focused my work on implementing it in html. Using a template for a CMS, as Joomla does, has a number of advantages and disadvantages:

• There is a complete separation of content and presentation, especially when CSS is used for layout (as opposed to having tables in the index.php file). This is one of the main criteria for a site that meets modern web standards.
• A new template, and hence a completely new look to a web site can be applied instantly. This can even have different locations/positioning of content as well as colors and graphics.
• If different layouts are called for within one web site, it is difficult to achieve. Although different templates can be applied to different pages, this built in functionality is not reliable. Most designers choose to use various PHP code to show/hide columns depending if there is any content published in that location (discussed in tips and tricks).

For this implementation I used Joomla! 1.5, the lastest stable version of Joomla! CMS. The 1.5 version brings clearly a pretty good forward leap. The only down side comparing with the 1.0 version is the lack of documentation, but this will dissipate really soon.
In order to understand the contents of a template, I started by looking at a blank Joomla! template. In this file are the various files and folders that make up a Joomla template. These files must be placed in the /templates directory of a Joomla installation. So, for the Stempunk template, the directory looks like this:

/templates/steampunkGames

Within the directory of a template, there are a number of key files:

/templates/steampunkGames/templateDetails.xml
/templates/steampinkGames/index.php

These two filenames and location must be matched exactly as this is how they are called by the Joomla! core script.

templateDetails.xml
An XML format metadata file that tells Joomla! what other files are needed when loading a web page that uses this template. It also details the author, copyright and what files make up the template (including any images used).
index.php
This file is the most important. It lays out the site and tells the Joomla! CMS where to put the different components and modules. It is a combination of PHP and (X)HTML. In almost all templates, additional files are used.

After implementing the template in the Joomla! structure, the fun part begun. The accent felt over the CSS part. Using CSS is simple and fun, but sometimes the differences at the compatibility level between IE and Mozilla, newer versions and older ones can give you headaches. As crazy it seems, for this time I worked only with Notepad++, an text editor that recognizes a large variety of languages, from C/C++ to HTML and CSS. It was a nice experience. I strongly recommend Notepad++, it is a very strong, simple and fast code editor. This way is an effective method when working with pages that includes lots of php scripts and massive CSS styling.

Related links
StempunkGames
CSS references
Notepad++
Joomla!
Abobe