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 (11)

Add your comment

Posted by bala, on 19-08-2008 19:56, IP 157.24.190.30, Guest 1. Help about inserting data to mysql data hi,    i need one help about how to insert data to mysql through joomla interface? i try tried to module and component through php code but i am not going success..   » Reply to this comment... » See all 1 replie(s) Posted by Robin Jakobsson, on 18-08-2008 17:32, IP 83.241.243.94, Guest 2. Thank you! Thank you for this quick overview! It helped me.  /Robin   » Reply to this comment... » See all 1 replie(s) Posted by Pellumb, on 07-08-2008 18:56, IP 82.114.94.13, Guest 3. Best Tutorial for Joomla I was searching the net for Joomla tutorials , and i think this would have been the best if it were complete   » Reply to this comment... Posted by bala, on 06-08-2008 01:11, IP 157.24.190.30, Guest 4. Thanks thanks, its very helpful. The matter you have published is really in proper sequence so the that novice can get more than enough. Great Job   » Reply to this comment... Posted by viz, on 30-07-2008 05:24, IP 125.24.196.167, Guest 5. a beginner Thanks. I like the way you put it together. I am very new about template building. When is part 3 available?   » Reply to this comment... Posted by no it didn't, on 22-07-2008 08:10, IP 12.216.227.114, Guest 6. no it didn't It didn't help me. It is just like the tip of an iceberg.   » Reply to this comment... Posted by MiniMe, on 04-06-2008 23:06, IP 193.41.135.69, Guest 7. Suggestion Somehow I would love to see some example files, with comments inside the code for the real beginner.... um... me :o)   » Reply to this comment... Posted by Jonah Dempcy, on 18-05-2008 10:05, IP 24.143.70.245, Guest 8. follow ups coming? Good post! I like that the XML isn't anything too crazy complex. I've done some Java/JSP programming before where the XML was extensive.    My appetite for building a Joomla template is whetted, are you going to write some follow-ups exploring the Joomla variables that are used and so on?    I'm learning PHP since up to this point, most of my time has been spent on the front end. have a front-end web development blog which focuses on JavaScript and CSS:    http:/www.thetruetribe.com   » Reply to this comment... Posted by :-: S€zæR ->, on 14-05-2008 10:25, IP 88.228.138.53, Guest 9. css web design css web template page (example) -- http://www.css- lessons.ucoz.com/css-template- page.htm   » Reply to this comment... » See all 1 replie(s) Posted by dave, on 30-04-2008 04:11, IP 138.163.160.42, Guest 10. perfect This is exactly what I have been looking for. Most other articles don't explain what each file is for or what it does, they just say you have to paste this code here to get it to work. I like the fact that I now understand what is needed and what isn't. I am looking forward to more tutorials.   » Reply to this comment...