Channels ▼
RSS

Tools

Joomla Templates


Alexander (Sasha) Sirotkin works on the LTE (Long Term Evolution) Project at Comsys Mobile. Alexander can be reached via e-mail at sasha.sirotkin@gmail.com.


Joomla is an open source content management system (CMS) that has all the functionality that you would expect -- banners, contacts, RSS feeds, polls, and much more. Because it was designed to be extensible, there are hundreds if not thousands of modules and components written for Joomla. It is mostly written in PHP, uses MySQL database as a back end, and released under GPL.

Joomla has a flexible and powerful template system which has a huge number of both free and commercial templates available for it. Unfortunately Joomla templates tend to be too colorful with a bit non-professional and childish look, which is generally not what you would want for a commercial website. I came across this problem while working on one of my projects. After checking literally hundreds of templates I had to consider ordering a custom template from one of the companies specializing in this area or creating one myself. While the former is probably the option that most commercial companies would chose, I decided to go with the latter mainly because all I needed was a plain and simple Google-style template and I figured out that it might be fun to learn something new in the process of writing it. For both of the above reasons I did not want to modify an existing template but rather preferred to write a new one entirely from scratch. As it turned out, it is indeed surprisingly simple and fun.

With this in mind, in this article I show how to write a minimal, yet functional Joomla template from scratch, starting with Joomla 1.0.x then 1.0.x templates to Joomla 1.5x which has a very different API.

Joomla Templates

Joomla templates consist of a number of XML, PHP, CSS, and image files that control the presentation of the web site content. Templates allow for the separation between content and presentation, allowing the web designer to concentrate on the web site look and feel and forget about the content. This abstraction works well for typical Joomla-based sites that use standard components only. However, if you plan on having something more than a newsfeed and forum, you will probably need to do some tweaking. After all, it is probably too much to expect from an existing template that was created by somebody who has no idea about some special features of your web site to write a good looking visual representation for them.

According to the World Wide Web Consortium (W3C) standards the document presentation (that is, the template), should be written entirely using Cascading Style Sheets (CSS) and the content in HTML (or another language which generates HTML code dynamically, such as PHP). For various reasons, however, Joomla templates do not entirely follow this paradigm, requiring some PHP and HTML coding in addition to CSS.

Each Joomla template resides in a separate directory under "templates/". Later I will show you how to create an installation file, but for now (and during your template design process) it is more convenient to place all template files under the templates/example/ directory. The minimal template I present consists of three files -- templateDetails.xml, index.php, and css/template_css.css.

templateDetails.xml is an XML file that contains meta data which describes your template, such as the template author, the version and the creation date. The most basic file should contain at least the following fields:


<mosinstall type="template">
        <name>example</name>
        <files>
                <filename>index.php</filename>
        </files>
        <css>
                <filename>css/template_css.css</filename>
        </css>
</mosinstall>

The above file specifies the template name "example" and points to the two files which contain the actual template definitions -- index.php and css/template_css.css.

Roughly speaking, index.php defines which content elements (Joomla modules, etc.) are going to be displayed and css/template_css.css defines their look and feel. While the latter is pure CSS template, writing the former requires some knowledge of Joomla internals because is has to actually output the Joomla content using Joomla API. The most basic index.php file is:


<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<head>
<?php mosShowHead(); ?> 
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="left-sidebar">
<?php mosLoadModules('left');?>
</div>

<div id="content">
<?php mosLoadModules('top');?>
<?php mosMainBody();?>
</div>

<div id="right-sidebar">
<?php mosLoadModules('right');?>
</div>

</body>
</html>

The most important lines are thos that call void mosLoadModules ( [ string $position [, int $style ]] ) PHP function which is Joomla API that loads (and outputs) the module in the position specified by it's argument. The code in this example loads modules that were assigned "top", "left" and "right" positions in the Joomla Module Manager (accessible via Joomla Administration web page -> Modules -> Site Modules). Front page content is loaded separately by calling the void mosMainBody ( ) API. In this example, the content was logically divided using CSS div tags into three groups -- left-sidebar, content, and right-sidebar. This will be used later in the CSS file to define different layout and for each of these groups.

The rest of the file is just standard Joomla code -- the first line prevents direct access to this page, the third line with the call to void mosShowHead ( ) displays HTML header and the fourth line includes the CSS template, which will be described below. Note that even without any CSS code, with just two-file template (and an empty css/template_css.css file) you can already see the content of your website, although it would not be very usable at this stage.

The following minimal css/template_css.css defines what I think is the most logical layout for the above Joomla content elements:


#left-sidebar {float:left;width:20%;}
#content {float:left;width:60%;}
#right-sidebar {float:left;width:20%;}

Main content element is in the middle, and surprisingly enough -- left sidebar is on the left and right sidebar is on the right. That's it. You've just created your first simple but functional and useful Joomla template. Simple and clean (not to say spartan) design, as you can see here:

Minimal Joomla template.

While an in-depth CSS tutorial is beyond the scope of this article, an explanation of the above CSS code is in order. Any CSS file is a list of CSS rules which consist of a selector followed by a declaration block. Let's take a look at the first rule with #left-sidebar selector (which selects the div tag named left-sidebar that was defined above in index.php file) and a declaration inside the curly braces. A declaration consists of a property name, followed by a colon, followed by a value. The above example sets two properties -- float and width. The float property specifies that the content element should float to the left, i.e. all the rest of the content will flow to the right of this element. The width property specifies the content width in percentage with respect to the width of the containing block, the whole HTML page in our case.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video