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.

neerajtemplate

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


STEP
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>
<pre lang="enc__xml"><?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>NEERAJ GOSWAMI</author>
<authorEmail>neerajgoswami9@yahoo.in</authorEmail>
<authorUrl>https://neerajpro.wordpress.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>

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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s