Tutorial: How to understand Joomla templates in five easy steps

Written by Steve Burge
Posted in Joomla tutorials - Joomla template tutorials

Tutorial: How to understand Joomla templates in five easy steps click to see full-size image

Open Source Training has been teaching people how to learn Joomla for several years now and have found hundreds of beginner Joomla books. There are numerous tutorials on how to add sections and categories or explaining the difference between components and modules.

However, there are very few tutorials on how to build templates. There are two books and a handful of other resources scattered around the web. So, we set out to build the very best template class we could. Here are first five sessions of the class: Joomla templates are not rocket science. You can learn how to build and modify them. We can show you how. Interested?

This is a guest post by Steve Burge of Open Source Training. Steve is also a member of the Open Source Matters board and a regular blogger at joomla.org.

In order to get started, you'll need to understand the five essential building blocks of every Joomla template. In the five tutorials below we guide you through them all:

These tutorials are part of our full Joomla Template Class available to all members. Click here to find out more.

Part 1: Template Setup and templateDetails.xml



Part 1: Session Notes

Copy and Paste:

<install version="1.5" type="template"> <name>test</name> <version>Alpha</version> <creationdate>10/16/09</creationdate> <author>My Name</author> </install>

Part 2: index.php



Part 2: Session Notes

Copy and Paste: 
 <jdoc:include type="component"> <jdoc:include type="modules" name="left">

Part 3: CSS - Cascading Style Sheets



Part 3: Session Notes

 body { background: #EF1789; color: #EFE717; }  a { color: #333; text-decoration: underline; } img { border: 0px; }

Part 3: CSS Tutorial Links

Part 4: Images



Part 4: Session Notes

bg.png
(Right Click - Save As - then save to your images directory for your template)

Code

 body { background: url('/../images/bg.png') repeat; }

Part 5: Security

We need to make sure that your template is secure and not easily hacked.

blocks

There are two essentials steps we need to make that happen:

  1. Add this line to the very, very top of index.php. This means that only Joomla can run commands on the file – no outside scripts: 
     <?php // no direct access
2.defined( '_JEXEC' ) or die( 'Restricted access' );?>
  2. Add a blank file called index.html to each folder. That means the main /test/ folder, plus /css/ and /images/. Why? To hide your folder contents. Without an index.html, anyone could see and browse all your files.

These tutorials you've just seen are part of our full Joomla Template Class available to all members. Click here to take your Joomla template skills to the next level.

Want more information like this?

Subscribe to get free, weekly Joomla tips, tutorials, news and special offers!

Steve Burge
Written on Wednesday, 30 June 2010 08:00
by Steve Burge

Viewed 1734 times so far.
Like this? Tweet it to your followers!

Comment Rules: Critical is fine, but if you're rude, I'll delete your stuff. Please do not put your URL in the comment text unless it's relevant to the post and please use your PERSONAL name, blogger name or initials and not your business name, as the latter comes off like spam. Have fun and thanks for adding to the conversation!

blog comments powered by Disqus
Published in Subscribe to the RSS feed of Joomla tutorials  Joomla tutorials / Subscribe to the RSS feed of Joomla template tutorials  Joomla template tutorials
back to top