create a file called
index.php, and another named
templateDetails.xml. Then create a folder
named css and in it - a new file name template.css
index.php - Specifies the available module positions and the path to your Stylesheet file. This is the main "section" of your
template;
templateDetails.xml - This is a system file that provides information about your template to the Joomla application;
css/template.css - The stylesheet file of your template. It defines the looks of your website;
The index.php file should start with:
<?php
// no direct access
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/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/default.css" type="text/css" />
</head>
Next, we have to add the "body" part of your website:
<body>
<jdoc:include type="component" />
</body>
This page includes only your articles without any styling or modules displayed. Now, let's add some module positions. Edit your
index.php file and change the lines between <body> and </body> to:
<div id="container">
<div id="header"> <jdoc:include type="modules" name="top" /> </div>
<div id="sidebar_left" class="float"> <jdoc:include type="modules" name="left" /> </div>
<div id="content" class="float"> <jdoc:include type="component" /></div>
<div id="sidebar_right"class="float"> <jdoc:include type="modules" name="right" /> </div>
<div id="footer" class="clear"> <jdoc:include type="modules" name="footer" /> </div>
</div>
The <jdoc:include type="modules" name="left" /> line tells the Joomla application where to insert the modules
published in the "left" position. We have just added the top, left, right and footer positions to your template.
Note that we have surrounded those in <div> tags and added information about their classes and ID's. In addition, we have
wrapped everything in a div with ID "container" which allows us to set the basic dimensions of your page. The div classes will
be defined in the template.css file once we create it. At this point, however, your index.php should look like this:
Now we have to edit the templateDetails.xml file. In it, paste the following lines:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>tutorial_template</name>
<creationDate>02/2011</creationDate>
<author>Somehowblog11</author>
<authorEmail>janina@yahoo.com</authorEmail>
<authorUrl>http://www.somehowblog11.blogspot.com</authorUrl>
<copyright>somehowblog11</copyright>
<license>AMI</license>
<version>1.0.0</version>
<description>Basic Joomla Template</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions>
</install>
Let's take a more detailed look on the lines of the templateDetails.xml file:
<install version="1.5" type="template"> It will allow the Joomla template installer to correctly install your template if you decide to make an archive of the template and use it on a different Joomla instance.
<name>tutorial_template</name> - This line defines the name of your template. For the purpose of this tutorial, we are using "tutorial_template";
<creationDate>02/2011</creationDate> - This line displays the creation date of your template;
<author>somehowblog11</author> - This line defines the author of the template;
<authorEmail>janina@yahoo.com</authorEmail> - Add your e-mail in this line;
<authorUrl>http://www.somehowblog11.blogspot.com</authorUrl> - This line specifies the website of the template creator;
<copyright>somehowblog11</copyright> - You should add the copyright information for your template in this line;
<license>AMI</license> - This line specifies the type of license your template is published under;
<version>1.0.0</version> - This line defines the version of your template;
<description>Basic Joomla Template</description> - Here you can add additional information for your template;
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/template.css</filename>
</files> - Those lines specify all the files that your template uses.
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
</positions> - Those lines define the positions you have enabled in your template.
