Creating a joomla template

Creating a Simple Template: Step 1

To understand the contents of a template, let’s start by looking at a blank Joomla template.

Template File Components

This section reviews the manual process of setting up template ﬁles. Normally, you would install the template using the Joomla installer, which takes care of all these steps.
When constructing your own templates, you need to set up several ﬁles and folders in a coordinated manner. A template needs to contain various ﬁles and folders. These ﬁles must be placed in the /templates/ directory of a Joomla installation, each in a folder designated for that template. If you had two templates installed called Element and Voodoo, your directory would look something like this:

/templates/element
/templates/voodoo

Note that the directory name for a template must be the same as the name of the template—in this case, element and voodoo. These names are case-sensitive and shouldn’t contain spaces.
Within the directory of a template, there are two key ﬁles:

/element/templateDetails.xml
/element/index.php

These ﬁlenames and locations must match exactly because this is how they are called by the Joomla core script.The ﬁrst of these is the template XML ﬁle.
This is an XML-format metadata ﬁle that tells Joomla what other ﬁles are needed when it loads a web page that uses this template. (Note the uppercase D.) It also details the author, copyright, and what ﬁles make up the template (including any images used).
The last use of this ﬁle is for unpacking and installing a template when using the extension installer in the administrative backend.
The second key ﬁle is the primary template ﬁle that generates pages, the index.php.
This ﬁle is the most important in a Joomla template. It lays out the site and tells the Joomla CMS where to put the different components and modules. It is a combination of PHP and HTML.
Almost all templates use additional ﬁles. It is conventional (although not required by the Joomla core) to name and locate them as shown here for a template called Element.

/element/template_thumbnail.png
/element/params.ini
/element/css/template.css
/element/images/logo.png

These are just examples. Some of the commonly found files in a template are shown below
/element/template_thumbnail.png — A web browser screenshot of the template (usually reduced to around 140 pixels wide by 90 pixels high). After the template has been installed, this functions as a preview image that is visible in the Joomla administration Template Manager.
/element/params.ini –A text file that would store the values of any parameters the template has.
/element/css/template.css — The CSS of the template. The folder location is optional, but you have to specify where it is in the index.php file. You can call it what you want. Usually, the name shown is used, but you will see later that there are advantages to having other CSS files, too.
/element/images/logo.png– Any images that go with the template. Again for organization reasons, most designers put them in an images folder. Here we have an image file called logo.png as an example.

templateDetails.xml

The templateDetails.xml ﬁle acts as a manifest, or packing list, that includes a list of all the ﬁles or folders that are part of the template. It also includes information such as the author and copyright. Some of these details are shown in the administrative backend in the Template Manager. An example of an XML ﬁle is shown here:

view plain copy to clipboard print ?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN"
"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
<install version="1.6" type="template">
<name>960TemplateTutorialStep1</name>
<creationDate>1/10/10</creationDate>
<author>Barrie North</author>
<authorEmail>contact@compassdesigns.net</authorEmail>
<authorUrl>http://www.compassdesigns.net</authorUrl>
<copyright>Copyright (C) 2005 - 2010 Barrie North</copyright>
<license>GPL</license>
<version>1.6.0</version>
<description>The first of 4 tutorial templates from
Joomla 1.6 - A User's Guide</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions>
<config>
<fields name="params">
<fieldset name="basic">
<field
name="colorVariation"
type="list"
default="white"
label="Color Variation"
description="Base Color of template">
<option
value="blue">blue</option>
<option
value="red">red</option>
</field>
</fieldset>
</fields>
</config>
</install>

Let’s look at what some of these lines mean:

<install version="1.6" type="template">—The contents of the XML document are instructions for the backend installer. The option type="template" tells the installer that you are installing a template and that it is for Joomla 1.6.
<name>960TemplateTutorialStep1 </name>—This line defines the name of your template. The name you enter here will also be used to create the directory within the templates directory. Therefore, it should not contain any characters that the file system cannot handle, such as spaces. If you’re installing manually, you need to create a directory whose name is identical to the template name.
<creationDate>—This is the date the template was created. It is a free-form field and can be anything such as May 2005, 08-June-1978, 01/01/2004, and so on.
<author>—This is the name of the author of this template—most likely your name.
<copyright>—Any copyright information goes in this element.
<authorEmail>—This is the email address at which the author of this template can be reached.
<authorUrl>—This is the URL of the author’s website.
<version>—This is the version of the template.
<files></files>—This is a list of various files used in the template. The files
used in the template are laid out with <filename> and <folder> tags, like this:
1. <files>
2. <filename>index.php</filename>
3. <filename>templateDetails.xml</filename>
4. <filename>params.ini</filename>
5. <folder>images</folder>
6. <folder>css</folder>
7. </files>
The "files" sections contain all generic files, such as the PHP source for the template or the thumbnail image for the template preview. Each file listed in this section is enclosed by <filename> </filename>tags. You can also include whole folders, such as an image folder, by using the <folder> tag.
<positions>—This shows the module positions available in the template. It is the list of page locations, such as top, left, and right, defined in the template in which modules can be set to appear, using the Position drop-down of the Module Manager. The position names in this list must precisely match the PHP code that generates content for each listed position inside index.php.
<config>—This section describes the parameters that can be set in the backend and passed as global variables to allow advanced template functions, such as changing the color scheme of the template.

`index.php`

What is actually in an index.php ﬁle? It is a combination of HTML and PHP that determines everything about the layout and presentation of the pages.
Let’s look at a critical part of achieving valid templates: the DOCTYPE at the top of the index.php ﬁle. This is the bit of code that goes at the top of every web page. At the top of our page, put this in the template:

view plain copy to clipboard print ?

<?php
/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The ﬁrst PHP statement simply shows the copyright/license and makes sure the ﬁle is not accessed directly for security.
A web page DOCTYPE is one of the fundamental components of how a web page is shown by a browser—how various HTML tags are handled and, more importantly, how the browser interprets CSS. The following observation from A List Apart should clarify things:

You can use several DOCTYPEs. Basically, the DOCTYPE tells the browser what version of HTML was used to design the page, whether it has some legacy code or also contains XML, and therefore how to interpret the page.

Here the words strict and transitional start getting ﬂoated around (float:left and float:right usually) to indicate whether legacy code was included. Essentially, ever since the Web started, different browsers have had different levels of support for various HTML tags and versions of CSS. For example, Internet Explorer 6 or less won’t understand the min-width command to set a minimum page width. To duplicate an effect so that it displays the same in all browsers, you sometimes have to use browser-speciﬁc “hacks” in the CSS that make up for shortcomings in each browser’s adherence to the published standards.
Strict means the HTML will be interpreted exactly as dictated by standards. A transitional DOCTYPE means that the page will be allowed a few agreed upon differences from the standards (for example, continued use of discontinued tags).
To complicate things, there is something called “quirks” mode. If the DOCTYPE is wrong, outdated, or not there, the browser goes into quirks mode. This is an attempt to be backward compatible, so Internet Explorer 6, for example, will render the page as if it were Internet Explorer 4.
Unfortunately, people sometimes end up in quirks mode accidentally. It usually happens in two ways:

They use the DOCTYPE declaration straight from the WC3 web page, and the link ends up as DTD/xhtml1-strict.dtd, which is a relative link on the WC3 server. You need the full path, as shown earlier.
Microsoft set up Internet Explorer 6 so you could have valid pages but be in quirks mode. This happens when you have an xml declaration put before instead of after the DOCTYPE.

Next is an XML statement (after the DOCTYPE):

view plain copy to clipboard print ?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

The information I just gave you about Internet Explorer 6 quirks mode is important. In this tutorial, you’re designing only for Internet Explorer 6 and later, and you need to make sure that it’s running in standards mode to minimize the hacks you have to do later on.
Let’s look at the structure of the index.php ﬁle header; you want it to be as minimal as possible but still have enough for a production site. The header information you will use is as follows:

view plain copy to clipboard print ?

<?php
/**
* @copyrightCopyright (C) 2005 - 2010 Barrie North.
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!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/template.css" type="text/css" />
</head>

What does all this mean?
We already discussed the implications of the DOCTYPE statement in the index.php ﬁle. The <?php echo $this->language; ?< code pulls the language from the site’s language setting in Global Conﬁguration.
$app = Jfactory::getApplication(); is a variable that allows you to grab various parameters, like the name of the site and use them in the template.The next line is for including more header information: <jdoc:include type="head" />
This code snippet inserts in the generated page (that is, your frontend) all the header information that is set in the Global Conﬁguration. In a default installation, it includes the tags shown here:

view plain copy to clipboard print ?

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="rights" content="" />
<meta name="language" content="en-GB" />
<meta name="description" content="Joomla! -
the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.6 -
Open Source Content Management" />
<title>Home</title>
<link href="/Joomla_1.6/index.php?format=feed&type=rss" rel="alternate"
type="application/rss+xml" title="RSS 2.0" />
<link href="/Joomla_1.6/index.php?format=feed&type=atom"
rel="alternate" type="application/atom+xml" title="Atom 1.0" />

Much of this header information is created on-the–ﬂy, speciﬁc to the page (article) that someone is viewing. It includes a number of metatags, and any RSS-feed URLs.
The last lines in the header provide links to CSS ﬁles for Joomla-generated pages in general and also in this template:

view plain copy to clipboard print ?

<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/template.css" type="text/css" />

The ﬁrst two ﬁles, system.css and general.css, contain some generic Joomla styles. The last one is all the CSS for the template, here called template.css. The PHP code <?php echo $this->template ?> returns the name of the current template. Writing it in this way rather than writing the actual path makes the code more generic. When you create a new template, you can just copy this line (along with the whole header code) and not worry about editing anything.
The template CSS can include any number of ﬁles, such as conditional ones for different browsers and for different media, such as print. For example, the following code detects and adds an additional CSS ﬁle that targets the quirks of Internet Explorer 6 (we’ll leave it out of our working example here):

view plain copy to clipboard print ?

<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ieonly.css"
rel="stylesheet" type="text/css" />
<![endif]-->

The next example is part of a technique for using a template parameter. In this case, a color scheme selected as a parameter in the Template Manager is loading a CSS ﬁle that has the same name as the selected color:

view plain copy to clipboard print ?

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/<?php echo $this->params-
>get('colorVariation'); ?>.css" type="text/css" />

It might generate this:

view plain copy to clipboard print ?

<link rel="stylesheet" href="/templates/960TemplateTutorialStep1/css/red.css"
type="text/css" />

The Joomla! Page Body

Still in the index.php ﬁle, now that the <head> part of the page is set up, we can move on to the body tag. Creating your ﬁrst template will be easy! Ready?
To create the template, all you need to do is use Joomla statements that insert the contents of the main body, plus any modules you want:

view plain copy to clipboard print ?

<body>
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body>

The template contains the following, in reasonably logical viewer order:

The name of the site
The top modules
The left modules
A breadcrumb bar
The main content
The right modules
The footer modules
A debug module

At this point (if you preview it, make sure it’s the default template), the site does not look very awe inspiring.

You want to come as close to semantic markup as possible. From a web point of view, this means a page can be read by anyone—a browser, a spider, or a screen reader. Semantic layout is the cornerstone of accessibility.
Notice that you use the ﬁrst of a number of commands speciﬁc to Joomla to create this output:

view plain copy to clipboard print ?

<body>
<?php echo $app->getCfg('sitename');?><br />
<jdoc:include type="modules" name="top" />
<jdoc:include type="modules" name="left" />
<jdoc:include type="modules" name="breadcrumbs" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" />
<jdoc:include type="modules" name="footer" />
<jdoc:include type="modules" name="debug" />
</body>

The PHP echo statement simply outputs a string from the configuration.php ﬁle. Here, you use the site name; you could as easily use the following:

view plain copy to clipboard print ?

The name of this site is <?php echo $mainframe->getCfg('sitename');?><br />
The administrator email is <?php echo $mainframe->getCfg('mailfrom');?><br />
This template is in the <?php echo $this->template?> directory<br />
The URL is <?php echo JURI::base();?>

The jdoc statement inserts various types of HTML output, from either modules or components.
This line inserts the output from a component. What component it is will be determined by the linked menu item: <jdoc:include type="component" />
This line inserts the output for a module location: <jdoc:include type="modules" name="right" />
This line generates content for all modules that have their position set to right. The content generated for those modules is placed in the page in the order set in the Order column of the Module Manager. This is the full syntax:

view plain copy to clipboard print ?

<jdoc:include type="modules" name="location" style="option" />

Using CSS to Create a Tableless Layout: CSS Template Tutorial – Step 2

In this section, you will use pure CSS to make a three-column layout for the Joomla template. You will also be making it a “ﬁxed” layout. There are three main types of web page layouts—ﬁxed, ﬂuid, and jello — and they all refer to how the width of the page is controlled.

A ﬁxed layout has the width set to some ﬁxed value.
A ﬂuid layout can grow and shrink to the browser window.
A jello layout is ﬂuid but between some minimum and maximum values.

A few years ago, ﬂuid width templates were all the rage. Accessibility guys loved them, and it was cool to grab the corner of your browser window and see all that content slide around.
But now, I don’t make ﬂuid templates, but focus on ﬁxed width templates. I ﬁrmly believe they are the best ﬁt on today’s Web. Four years ago, many people were still using 800px width screens. The main point of a ﬂuid width was that you could have a web page that looked okay in a 1024px screen, but still could shrink down to the smaller screens still used.

Now, the trend in screens is the opposite. People are getting huge screens; 32% of people browsing Joomlashack.com are doing so with resolutions over 1024px.

With these big screens and a 960px width layout, you get a new problem—readability. Studies have shown that readability onscreen drops off as you go over 960px. So a ﬂuid width will ﬁll that big screen and a) look daft and b) slow down your reading.
A typical design might use tables to lay out the page. Tables are useful as a quick solution in that you just have to set the width of the columns as percentages. However, tables also have several drawbacks. For example, tables have a lot of extra code com-pared to CSS layouts. This leads to longer load times (which surfers don’t like) and poorer performance in search engines. The code can roughly double in size, not just with markup but also with “spacer GIFs,” which are 1×1 transparent images placed in each cell of the table to keep the cells from collapsing. Even big companies sometimes fall into the table trap.

Issues with Table-Based Layouts

They are difficult to maintain. To change something, you have to figure out what all the table tags, such as tr and td, are doing. With CSS, there are just a few lines to inspect.
The content cannot be source ordered. Many web surfers do not see web pages on a browser. Those viewing with a text browser or screen reader read the page from the top-left corner to the bottom right. This means that they first view everything in the header and left column (for a three-column layout) before they get to the middle column, where the important stuff is located. A CSS layout, on the other hand, allows for “source-ordered” content, which means the content can be rearranged in the code/source. Perhaps your most important site visitor is Google, and it uses a screen reader for all intents and purposes.

When it comes to CSS layouts, there has been a trend toward what have been coined frameworks. The idea is that a consistent set of CSS is used to create the layout, and then that set is maintained for various issues like browser compatibility. For this template we are going to adopt the 960 grid system developed by Nathan Smith. It’s still not very exciting, but let’s look at what the different parts are all about.
With the 960 grid system, you merely have to specify with a class how big you want the grid to be. In this example, I am using a 12-column grid, so for the header to run across the full width of 960px, in the index.php use:

view plain copy to clipboard print ?

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

Bhushan Dhumane

Search This Blog