The Joomla! Template

When you install Joomla!, it comes with one or two built-in templates. In my version 1.0.8 installation, MadeYourWeb by Mark Hinse and rhuk_solarflare_ii by rhuk, are the two available. If you have a different version, you may have different templates available to you.

We’ll use the rhuk_solarflare_ii template to review the basic parts of a Joomla! template that you’ll need to think about as you create your visual design.

First, let’s look at the following figure to see how our basic template affects the Joomla! PHP output:

What Your XHTML does to the template layout.

You’ll recall that the PHP code for the footer, sitename, pathway, and MainBody are not module position slots. These functions load in the required information that helps Joomla! to run, display standard footer information, and load the actual site content from the Joomla! MySQL databases.

Top, left, and right are module position slots, which can be assigned site modules. Site modules are what contain navigation links, form elements, and Joomla! status information that will be displayed to your visitors such as: Who’s Online or Who’s Logged In. You can assign site modules to any of the module position slots and even load multiple site modules into these position slots by assigning an ascending numerical order to them. You do this in the Module Manager [Site] by going to Modules | Site Modules in the administration panel.

Site Modules panel in Joomla!’s admin panel.

As shown in the following figure, you can assign up to 50 module position slots to place in your template layout. Go to Site | Template Manager | Module Positions to view the standard module positions Joomla! provides.

Module Positions panel in Joomla’s admin panel.

Now that we have a deeper understanding of how the template, module position slots, and site modules work, let’s take a look at how these three elements come together through the rhuk_solar_flare_ii template. The module position slot name is on the left, the content module name is on the right, and the assigned order, if any, is underneath.

Example of modules assigned to Module Positions

Using this example, you can now start thinking of how you’re going to construct your template design. Let’s move on to creating your design.

Considerations to be Made

First off, let’s get to the most important consideration What modules will be used in your site? Thus, what modules do you need to design for?

Go through your Joomla! installation and review all the modules your site will be using. There’s the obvious top menu, main menu, and user menus, but will you be displaying the login form or a poll? If so, do you want to change their display? Will your site be displaying banners? Will your site require any special or add-on modules or components such as an image gallery or shopping cart?

Make a list of each module or special component that your site will be displaying and take special note of their elements: Do they have headers or special text areas? Would you like anything to be highlighted with a background image? Do the modules have items that should be standard buttons or icons? All these things should be included in your list.

When you begin work on your design in Photoshop, you’ll want to compare your mock-up against your module checklist and make sure you’ve designed for all your modules.

Refining the Wheel

The next consideration is whether you are going to work from an existing template or from scratch? The more you work with Joomla! and learn all its quirks, the more you’ll see that sometimes starting from scratch is best. However, while being a CSS and XHTML “wiz” is awesome, you don’t always need to reinvent the wheel!

Take a look at what happens to the standard rhuk template when all we do is change the color scheme and fonts.

rhuk_solarflare_ii template with CSS changes to color and fonts

Now, check out what happens in the following figure when we change the graphics.

rhuk_solarflare_ii template with image changes

And last, see what happens in the following figure when we use the Module Manager to swap module placements around.

rhuk_solarflare_ii template with module swaps

By thinking of this design in terms of leveraging the existing rhuk_solarflar_ii template, we effectively created a whole new template and module layout which is completely unique. And we only had to minimally edit the CSS to get it to work. Everything else was done in the Joomla! admin panel without touching any code.

If you’re going to work from an existing template, it’s best to review that template’s HTML output (right-click or Alt-click and chose View Source) and pull the image names from each page that you’ll be replacing with your own images. It’s also helpful to go through that template’s image directory and just note each image: which ones you’re going to change, leave alone, re-size, and so on as you work with your design mock-up. Make sure to note the specific file names that are going to be overwritten in your module check list so that you have them handy when it is time to export your image slices.

So, when is it best to start from scratch? It’s up to your site’s specific needs. For instance, the Joomla! in-built templates comes with use tables to hold their layout structure together. If you want an all semantic, valid XHTML markup with CSS layout, you’ll need to create it yourself from scratch.

Whichever road you take, as you continue to design and build Joomla! templates, you’ll find over time that you have your own “master” template—files you’ve generated or got to know so well—you understand how all their parts work together. You’ll see how applying any new modules or components will affect the files and how they should be incorporated. It will become easy for you to work with this favorite or “master” template and easily massage it into any new creation you can imagine.