5 Easy Steps Converting HTML Template to Joomla Template

- July 07, 2009

Converting an 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 uncle Google. Templates in Joomla is 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.

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

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.

Step 3

The default Joomla template has a few module positions such as breadcrumb, left, right, top, user1,user2, user3, user4, footer, debug, 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 apropriate 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" />
</div>

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">
<name>your_template_name</name>
<creationDate>25/01/2009</creationDate>
<author>Dani Gunawan</author>
<authorEmail>dani.gunawan@yahoo.com</authorEmail>
<authorUrl>http://tobacamp.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>template description goes here</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/arrow.png</filename>
<filename>images/logo.png</filename>
<filename>css/template.css</filename>
</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
<position>debug</position>
<position>syndicate</position>
</positions>
</install>

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 are ready to go. Don't forget to test it before sharing it to the Internet in case you feel like it.

Search This Blog

Web Star Dot Star