Joomla Tutorials!! Convert HTML Template to Joomla Template

STEP 1. Prepare your template.The template must be HTML & CSS compliant.There are so many HTML Template on the Internet.Download it rename the index.HTML to index.php .Joomla will search for index.php in the template directory.


STEP 2. Replace the HTML code before the body tag of your file(index.php) with this code:

<!--?php //no direct access  defined('_JEXEC')or die('Restricted access'); ?-->
<! Doctype html Public"_ 1.dtd">
<head><jdoc:include type="head"/>
<link rel="stylesheet href=" />baseurl?>/template/system/css/system.css" type="text/css"/></head>

all we need to do is to make minor changes in the code shown below

<link rel="stylesheet href=" />baseurl?>/template/your_template_name/your_css_directory/your_css_filename.css" type="text/css"/>

STEP 3. Now we have place various module positions inside your(index.php) file

<jdoc:include type="modules" name="your_module_position_name"/>

to appropriate position.The name attribute is the module position name snippet code is given below:-
Suppose there is a module known as logo .just make changes like this

<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" />

4.Now we will create a manifest file.We need to create a manifest file to list all files we used.
If we don’t create it, it will cause error while installing our template. Here is the sample of a manifest file:

<pre lang="enc__xml"><?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "">
<install version="1.5" type="template">
<author>NEERAJ GOSWAMI</author>
<description>template description goes here</description>

STEP 5: Nothing to do now.just zip it and install it.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s