template creation - step 1 - tutorials - joomla tool...

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 stepswill 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 theadditional template files. - index.php - the primary page the indicates to Joomla the location of the component and allmodules. 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.xmlfile 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



<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, avast 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 yourtemplate - 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 tocreate 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 canalso be defined here - 'css/template.css' is an example. - The <positions> tag allows us to define the Joomla positions we will be using with ourtemplate. 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



<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 ourJoomla global configurations. With then specify the location of our template.css file using thebaseurl property of our template object. (The '$this->baseurl" is the Joomla framework methodof pulling the URL instead of using the JURI::base(true) method.) We then use "jdoc", theJoomla method of placing content, in two positions "top" and "bottom" and in between thecomponent content. We will learn how to place content using the administrator in subsequenttutorials.

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 tobe in a subdirectory called 'css'); zip up this directory. You are now ready to install - login toyour Joomla 1.6 administrator interface and click on the "Extensions -> Extension Manager" linkand you will see this screen:

3 / 8

http://docs.joomla.org/JURI/base



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



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

5 / 8



Your First Joomla Template!!! Whoo Hoo... Err OK - obviously not too exciting without any realstyling or any other bells and whistles. So lets take a look at how to really start to spruce up ourtemplate 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 websiteto a Joomla Template. To begin we are going to create a new homepage based on the 960Grid 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 willprovide the primary structure of our new site - we will now have to convert index.html toindex.php and include all the appropriate jdocs for a working Joomla! template. Our basicTemplate looks like this:

6 / 8



<!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



</body></html>

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

960-step1.zip

Joomla SEO by AceSEF

8 / 8

images/template-tutorial/960-step1.zip

http://www.joomace.net/joomla-extensions/acesef

template creation - step 1 - tutorials - joomla tool...

Documents