Joomla Template Tutorial - Parts of a Joomla Template

engineachooInternet and Web Development

Dec 4, 2013 (3 years and 8 months ago)

84 views

Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
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>
1 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
<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>
2 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
<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:
3 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
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.
4 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
Now open up your Joomla website and you will see you new template, it will look something like
this:
5 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
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:
6 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
<!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>
7 / 8
Template Creation - Step 1 - Tutorials - Joomla Tool Shop
Written by Jay Murphy
           
</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

Joomla SEO by AceSEF
8 / 8