Home Classroom Joomla Creating a website using Joomla – Part 6

Creating a website using Joomla – Part 6


Converting HTML Template to Joomla Template

Today we discuss how a HTML Template converts to Joomla Template. Converting a HTML template to a Joomla template is not as hard as you think. Only five easy steps and you can create and use your Joomla template.

Why you want to learn this? Because perhaps you stumble into beautiful free html templates while browsing on the net and really want to use it for your joomla based website.


Step 1

Prepare your template. The template should be (X) HTML&CSS compliant. There are lot of HTML templates on the Internet, just search them by using Google. Templates in Joomla are filed under a directory named templates. Ensure the HTML file, images and CSS file are inside one single directory created under templates folder. For example, take a look at the Joomla template structure below:


Joomla Template Directory Structure

Joomla will search index.php inside the template directory. So, rename the index.html file to index.php.


Step 2

Replace the HTML code before the body tag of your HTML file with this code.




// 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; ?>” >


<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/your_template_name/your_css_directory/your_css_file.css” type=”text/css” />



You should notice at this code:


<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css” type=”text/css” />


Change “your_template_name” to the name of your template, “your_css_directory” to name of your css directory, and the last, change “your_css_file.css” to the name of your css file. If you have more than one css file, you should declare them one by one.

If you have some javascript files, you should declare them with the same way.

The template contains the various files and folders that make up a Joomla template. These files must be placed in the /templates/ directory of a Joomla installation in their own folder. So if we had two templates installed, our directory would look something like the following:




Note that the directory names for the templates must be the same as the name of the template, in this case element and vmjoom. Obviously they are case sensitive and shouldn’t contain spaces.


Step 3

The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1, user2, user3, user4, footer, debug, and syndicate. The joomla module positions are shown below.



Joomla Module Position

To create a module position, we need to place this code <jdoc:include type=”modules” name=”your_module_position_name” /> to appropriate position. The name attribute is the module position name. The snippet code to create a module position is:

<div id=”header_r”>

<div id=”logo”></div>

<jdoc:include type=”modules” name=”top” />



After that, you need to place a component. The code is shown below.


<jdoc:include type=”component” />


If you need to include message, you only need to include this code:


<jdoc:include type=”message” />


Step 4

Create a manifest file. You need to create a manifest file to list all files you used. If you don’t create it, it will cause error while installing your template. Here is the sample of a manifest file:


<?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”>



<author>Harsha Gomes</author>






<description>template description goes here</description>
























Don’t forget to enlist all your files used in your newly made template inside files tag. If you missed, the files won’t be copied to Joomla template directory during installation process. Positions tag is used to declare the position name used in your template.


Step 5

Package it. You may create a thumbnail of your template before packing it. It should have 206px width and 150px height. And finally compress your template to a zip file and your template is ready to go. Don’t forget to test it before sharing it to the Internet in case you feel like it.

We highly appreciate your valuable comments after reading this article. Also, if you have any issues in joomla you could email to harsha@vishmitha.com or Supporting Forum to get our assist.

The next article will discuss about Site Management in Joomla.



Harsha Gomes is the Managing Director of Vishmitha.com and Winhost Inc. He is a past employee of CINTEC, Ministry of Economic Reforms&Science&Technology, Pathfinder Holdings (Pvt) Ltd, and Sannasa Media (Pvt) Ltd. He has experience in PHP,AJAX, Flex, HTML,CSS, Javascript, MySQL, Joomla, Payment Integration, Smarty, PHPBB, Magento, OS Commerce. He is an expert in developing websites using the CMS tool Joomla.


Leave a Reply