Joomla Template Tutorial Part 2 - Joomla Template Elements

What is a Joomla Template? A quick recap.

A Joomla template is simply a directory located within your Joomla installations "template" directory, which Joomla uses to apply a pre-defined look or theme to your Joomla web site. Template developers create these files, package them all up into a nice little package which allows a Joomla website owner to quickly change the overall look and layout of their website.

So a template isn't simply one file, but a few. A read-to-install Joomla template will most likely be in a compressed file (eg. zip file). Once installed, your template files will be uploaded to your Joomla installation: <joomla installation directory>/templates/YOURTEMPLATENAME/<template files would go here>.

An important thing to note is that there are very few requirements of a Joomla template as far as the code goes. For the sake of simplicity, think of a Joomla template as a pizza. While there are many different types of pizza, your typical pizza has:

1. Crust
2. Sauce
3. Toppings

I could take this much further at the risk of boring you all to death, but I think you get the idea. Just like a pizza, a Joomla template must have a basic composition. The rest is left to the creators imagination.

The Joomla Template Composition

Lets take a quick moment to look at the "must haves" of a Joomla template.

1. index.php - This is the main template file which defines the Joomla structure.
2. TemplateDetails.XML - This xml file defines the templates parameters such as template name, type, its author, its included files, etc. Without this file, you cannot install a Joomla template, or get Joomla to recognize your templates existance.

That covers the "must haves". Now lets take that one step further and I will lay out what you "should have". Once again, you can build a template with just two files, but its in your best interest to structure it a bit better and add some additional files as described below.

1. index.php - Must have
2. templateDetails.xml - Must have
3. template_thumbnail.png - This is completely optional, its basically a thumbnail of your template that will be viewable in the Joomla back-end or through the module "template chooser".
4. Directory named "css" - for the sake of organization
   1. template_css.css - This is where you will keep your template css styles.
5. Directory named "images" - for the sake of organization
   1. Any images used in your template would go here.

90% of Joomla 1.x templates follow this structure. Most of your 1.5 templates do too, but you should note that in 1.5 the new standard for naming your template's CSS file would be "styles.css".

index.php - The Blueprint

This essential Joomla template file is nothing more than a standard HTML file with some PHP tags inserted in strategic locations. Think of the index.php as the file that tells Joomla where to load certain elements of your Joomla site. It basically says:

• Load my content here!
• Load my module positions here!
• Load my components here!

On the third part of this Joomla template tutorial I will begin digging deeper into the index.php, but for now - just remember that this file structures your Joomla template.

templateDetails.xml - The Coordinator

Without your templateDetails, Joomla just thinks you have uploaded a bunch of miscellaneous files to your server. The templateDetails.xml (notice the uppercase "D") tells Joomla all the information it needs to know about the template. Not so much how the template works, but simply the information related to the template (such as its author, its version, date of creation, and files included with it). Also note that the templateDetails.xml information allows your Joomla template to be installed through the template installer.

Lets take a look at the bare minimums:

<mosinstall type="template" version="1.0.x">
<name></name>
<creationDate></creationDate>
<author></author>
<copyright></copyright>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<version></version>
<description></description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
</files>
<images>
<filename>images/example_image01.jpg</filename>
<filename>images/example_image02.jpg</filename>
</images>
<css><filename>css/template_css.css</filename>
</css>
</mosinstall>

Pretty simple stuff eh? If you were to build a template on your Joomla site (meaning uploading the files to the live or local server in the proper (/templates/YOURTEMPLATENAME/ ) directory, all you would need is the above to get Joomla to recognize your templates existence. Sure, Joomla wouldn't know the name of it, but you could still select this new template in the Joomla administration as your "default" template.

Note that if you do build a template using this very bare minimum templateDetails.xml, you wont be able to package it up and install it elsewhere. When you upload a template package through Joomla's back-end (administration), Joomla checks this file against all the files you have just attempted to upload. So the <files> portion of it must be accurate in order for Joomla to successfully install your template package.

Finally, there are plenty of free programs out there that will AUTOMATICALLY create this file for you. These programs ask you to fill out a simple form then direct it to your template files. Simply Google joomla templateDetails.xml generator.

template_css.css - The Template Stylesheet

While the template_css.css is NOT manditory (or CSS at all for that matter), you will do much better off by including it. If you've read the previous template tutorial, you should understand how important I really think it is.

This file simply defines all of the css styles that are applied to your template design. Things such as:

• Font colors and sizes
• Page widths and backgrounds
• Link colors and behaviors

If you have no clue what CSS is, thats fine, well work on that later. For now - just know that its important, and it is standard practice in Joomla template development to include a /css/template_css.css.

Conclusion

Now that you understand the essential pieces to the puzzle and what they do, we can look further into the process in following Joomla template tutorials. While at first some things may seem complex, its really not too bad! I feel that while there are a good handful of template tutorials out there, many try and force everything down at once - hopefully my approach makes the fundamental elements easier to digest.

Hope it helps!

---

Users' Comments (30)

Add your comment