Funding for 'IT Lab' Project, Phase 1: Progress of sticker sales. Purchase a sticker to help us reach our target.Updated: 2010-02-28 11:53
Creating a website using Joomla
by Harsha Gomes
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.
<?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.
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:
/templates/digit
/templates/vmjoom
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" />
</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>20/07/2009</creationDate>
<author>Harsha Gomes</author>
<authorEmail>harsha@vishmitha.com</authorEmail>
<authorUrl>http://vishmitha.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 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.
Post new comment