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.
Our Genuine motorcycle apparel from hookahs to plus size leather jacket are effective for both work and play. You can buy large variety of mens designer jackets and hooded trench coat at our online Superstore.
164 Responses to “5 Easy Steps Converting HTML Template to Joomla Template”
Trackbacks/Pingbacks
Leave a Reply
Visitors
3,361 | Unique Visitors |
Hi
Priyanka , i hope that u did reasearch on template convertion.
Can u please help me , iam not getting 100 % output, thanks in
advance
Very useful guide…
Thanks dude. That is quite helpful!
It’s very useful but I can suggest using also utils like Artisteer http://www.artisteer.com/ awesome software!
no crean nada de lo que sale aqui todo es una farsa es men tira, osea babi
it is useful. however, needs more time to digest. anyway, thanks for the contribution!
best for you, buy adipex, [url= http://www.scam.com/member.php?u=154204 ]buy adipex[/url], %OO,
Great post makes converting to joomla so easy, thanks for sharing!
You thief! Teaching us hijacking others template. I love u bro!
Any Idea How to make these module positions collapsible?
thanks a lot for the tutorial, nice.
It is not as easy as you think.
we are looking a simple template in joomla code
Thanks its really nice tutorial.
Regards
Gadhavi
http://www.gadhavitechnologies.com/how-to-convert-psd-into-joomla-template.html
and if you can’t do it by yourself, someone who did it for our company in a perfect way, from scratch and screendesign:
dynamind can do it for you
“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.”
i am stuck on this part can any one help me out. i am unable to connect my css with that of the php code
<link rel="stylesheet" href="baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css” type=”text/css” />
i have template in folder named htmlJoomla inside it are all the file you asked me to create (css folder(has default.css in it), images folder(has all the images of the tenmplate), index.php, favicon,templateDetails.xml) i have copied and replaced index.php with my template one and replaced the code as you specified but the index doesnt seem to understand the command as it cannot connect my my default.css file in css folder.my line code is like this
<link rel="stylesheet" href="baseurl ?>/templates/htmlJoomla/css/default.css” type=”text/css” />
what am i doing wrong here please help me.
To make question short which folder is considered by this
line as root folder.
a.htmlJoomla
b.index.php
<link rel="stylesheet" href="baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css” type=”text/css” />
really great job just what i needed =D
good jod there
Thensk but how comes notifications such as your details have been mailed to you and you will have to confirm them before login in do not appear in the template?
gracias…
me ayudo mucho, lo andaba buscado
saludos
Great tutorial;
All is write till I install my template, but when I click to view it no images is display only the articles.
Can you help me please.
thanks
very very helpful, i followed you step by step and got results more than expectations..thnx a lot..
Gr8 Tutorial. Helped in creating the basic template.
But the headings/titles of the modules in the left and right sides are not showing. Any suggestions Y??
Awaresome guide, look like easy, but when i try to real, get error alost
thanks
I have download one free HTML template from web site and tried to convert it in to joomla according to above notes but i am unable can you any body give some more detail with example.
Thanks
Pankaj
Hi,
This is a wonderful article for who nedds to upgrade thier skills. Can u provide online joomla classes for me.
plz let me know
wah makasih tutornya mas, lagi belajar joomla neh …
Thanks a lot.Its very useful.Keep putting these types
of articles….
nice tut ..
its really good…….thanks for that! {:-)}
I had to change the manifest file name to templateDetails.xml for it to work. It didnt appear in the templates list with any other name
The gold rush download movie
Very Very Very GOOOOOOOd Posting…!
I Love You… Very Much
hi,
i go through ur steps that was very helpful for us,but i got a error when install my template..
the error like this
(Error:Could not find a Joomla XML setup file in the Package)
how to solve this error
pls sent me the answer of this question advance thanks….
By
VICKY
GUI Designer…………..
hi,
i go through ur steps that was very helpful for us,but i got a error when install my template..
the error like this
(Error:Could not find a Joomla XML setup file in the Package)
how to solve this error
pls sent me the answer of this question advance thanks….
By
VICKY
GUI Designer…………..
I am new with joomla. This posting helped me alot…
Thanks alot
Hassan
BabyGini Technologies
Thanks for this useful tutorial. Helped me alot in terms of converting existing html sites to joomla.
I am new to joomla but this guide has been really useful.
Cool. I will try it.
I’m very new to joomla. What do you mean package it? Already followed your tutorial but i can’t find it in the admin page.
Very useful resource!
Thanks
Very nice…really helpful for a beginner
This is an excellent tutorial but The component section is showing an article where does this article come from and which component is in use.
What if you want to make a current html/css driven site a joomla 1.6 site?? Is it different then this?
Thank for tut & I can not understand the part
“After that, you need to place a component. The code is shown below.”
Is that component code insert after the module position code?
—————————————–
———————————————
Or what? Please help me.
Thanks
YOU ARE THE BEST ACROSS THE INTERNET… SIMPLE…FAST…EASY
TOTAL… THANKS!!
thanks for this….as iam a starter this is going to b a great beginning!
Excellent work ….tx for the posting.
Nice ..
helpful for a beginner