Template Creation - Step 1

  • PDF

Joomla Template Tutorial - Parts of a Joomla Template

The following tutorial will step you through the process of creating a complete Joomla Template. Our first step will be to create all the basic components of the template.  The subsequent steps will involve expanding our sample template until we have a fully functioning Joomla template.

Files that make up a Joomla Template

A standard Joomla template contains several files these include:

  • TemplateDetails.xml - a file that provides basic template meta data and indentifies all the additional template files.
  • index.php - the primary page the indicates to Joomla the location of the component and all modules.  It also defines the styles that are applied to each component or module.
  • template.css - the CSS file that contains the template styles.

These are the basic files for creating our initial template.  The format of the TemplateDetails.xml file is:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<extension version="1.6" type="template">
  <name>helloworldtemplate</name>
  <creationDate>2011-06-09</creationDate>
  <author></author>
  <authorEmail></authorEmail>
  <authorUrl></authorUrl>
  <copyright></copyright>
  <license></license>
  <version>1.0.0</version>
  <description>Hello World Template</description>
  <files>
    <filename>index.php</filename>
    <filename>templateDetails.xml</filename>
    <filename>css/template.css</filename>
  </files>
  <positions>
    <position>top</position>
    <position>footer</position>
  </positions>
</extension>
 

The tags in the TemplateDetails.xml file include these:

  • <extension> tag used to define the Joomla version supported.  (This tag replaces the <install> tag used in Joomla 1.5 - this new tag allows for updating extensions in Joomla 1.6, a vast improvement over the old process of deleting and then installing extension updates.)
  • There are a range of meta-tags that allow you to define additional information for your template - these tags are self explanatory.
  • <version> tag allows the author to make updates for re-distribution.
  • <name> tag used to describe the internal name of the template, this name will be used to create a directory in the Joomla template directory for holding all the other template files.
  • <files> tag defines all the files included in the template.  The sub-directory location can also be defined here - 'css/template.css' is an example.
  • The <positions> tag allows us to define the Joomla positions we will be using with our template.  For now we'll put in top and footer - we'll come back to these later.

Now that we have a TemplateDetails.xml file - we'll need an index.php and a template.css file. 

Here is a barebones index.php:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" />
</head>
<body>
<div class='top-position'>
 <jdoc:include type="modules" name="top" />
</div>
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
</html>
 

This index.php does the basics.  In the head we are pulling our default language from our Joomla global configurations.  With then specify the location of our template.css file using the baseurl property of our template object.  (The '$this->baseurl" is the Joomla framework method of pulling the URL instead of using the JURI::base(true) method.) We then use "jdoc", the Joomla method of placing content, in two positions "top" and "bottom" and in between the component content.  We will learn how to place content using the administrator in subsequent tutorials.

Finally we create our template.css file - we will keep it simple for now:

#top-position
{
 margin:0 0 20px 20px;
 overflow:hidden
}

Save the files in a directory called helloworldtemplate (remember that template.css is going to be in a subdirectory called 'css'); zip up this directory.  You are now ready to install - login to your Joomla 1.6 administrator interface and click on the "Extensions -> Extension Manager" link and you will see this screen:

Screen shot of the Joomla 1.6 extension manager upload file screen

Next we'll open up the Template screen by clicking on the "Extensions -> Template Manager" link.  On this screen select the "helloworldtemplate" and click on the"Make Default" button.

Joomla 1.6 Template Manager Screen

Now open up your Joomla website and you will see you new template, it will look something like this:

Hello World Template - Part 1

Your First Joomla Template!!!  Whoo Hoo...  Err OK - obviously not too exciting without any real styling or any other bells and whistles.  So lets take a look at how to really start to spruce up our template by adding more styling and then learn more about the Joomla jdoc statement.

Generating a New Template from an Existing HTML/CSS Site

Now we will walk through the complete process for converting an exisiting HTML/CSS website to a Joomla Template.  To begin we are going to create a new homepage based on the 960 Grid system - see 960.gs for background and a quick HTML layout generator.

When we are done with 960.gs we have an index.html and style.css for our layout.  This will provide the primary structure of our new site - we will now have to convert index.html to index.php and include all the appropriate jdocs for a working Joomla! template.  Our basic Template looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
               

<div id="header" class="container_12">

<div id="" class="grid_4 logo">
</div>

<div id="" class="grid_8 header">
</div>

</div>

               

<div id="content" class="container_12">

<div id="" class="grid_3 left-menu">
</div>

<div id="" class="grid_1 separator">
</div>

<div id="" class="grid_8 content">
</div>

</div>

               

<div id="footer" class="container_12">

<div id="" class="grid_6 left-footer">
</div>

<div id="" class="grid_6 right-footer">
</div>

</div>

           
</body>
</html>

The 'div's defined in the template layout the various locations in our template - and will be the place where we place our module and component positions.  The exact HTML and CSS is included in the zip file below.

960-step1.zip