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.
I bookmarked this great tutorial. Thank you for sharing this.
Cool!! dude..u rawk!!
I’m gonna visit ur site oftenly after dis..
Amazing… bookmarking… great tutorial…
Excellent. Thank you very much. That’s a bookmark to keep…
A quicky like that on module would be so great.
Hi,
good work dude… i got the solution in 5 mins..
Just what I was looking for. Nicely explained how to create and customize templates in Joomla.
Keep up the good work.
cool, but i have some question about the step 4, i need create a file with how name?
Awesome tutorial. Thanks! I have bookmarked this.
great tutorial.bookmarking.thanks.
Hey men, excelent tutorial, but i have a problem!!! mi HTML desing was made in Photoshop, is practicly all images and layers, it actually works as a HTML template, but i have no CSS file… i just gave color an size tu leters and bg old style, like in MS Word XD.
what can i do to solve this???
This is a great, thanks…I think an extra section like “FAQ” about this topic might be a good idea..Example..Step 3, do we delete whatever is on the HTMl template portion and leave it blank when adding the position? Step 4, What extension do we save the Manifest files as? PHP?…Thanks
it was a very amazing tutorials u have here im gonna use it for my deisgn to look more fantastic…. especially the joomla template…
Amazing tutorial, thanks.
Выполняю установку и настройку различных CMS систем.
Предоплата 50% стоимость работы от 400р.
Оплата Web Main или Яndex деньги.
Информация для связи ISQ 429606266 Александр.
Ohoo@ it is that I was searching for
Thank you
thanks for this great tutorial man.After this I can now be able to convert my psd to joomla…thanks
Amazing tutorial, bookmarked, but now i have a small problem, i have stuff that i have written in php and i dont want to loose it when i put everything on Joomla, do i need to declare these as well,
You response will be highly appreciated.
Awesome. Bookmarked!
uhhhhh….yeah thats cool but what do you name the manifest file???
i think it should be xml type of file?
you need to include more specifics in your tutorials…
after 5th step then how to call my index page and what is the procedure? plz i m new in zoomla
plz give me the soluation i make 5 step but afte 5th step what i wll do?
thanks for this great tutorial man.After this I can now be able to convert my psd to joomla…thanks
thank you. this 5 step helped a lot but the problem is that the template is not displayed on the template manager…. i am new to joomla… the installation is good can u help me…
Thank you for this article.
To “bala”, there may be any mistake in file templatedetails.xml. Please check again.
Thanks for the article. Was of great help to me
Tutorila is so so.
Very nice tutorial
Can u give us more tutorial like how to convert html to joomla.
Thanks in advanced
Very nice way of explaining. Add some more details to make it a complete TUTORIAL’.
Thank you, wish you great success.
the mainfest file can be called also templatedetail. and can i use the same exmple as well ?
i’ve problem,
how can i solve it??
please!
JInstaller::install: File ‘C:\xampp\htdocs\Joomla\tmp\install_4b04d9a69cbd2\templateku\html’ does not exist.
Thanks for this Great Tutorial
Thanks for this great Tutorial.
Hi,
Thanks a lot for your useful tips. It helped me lot.
Thanks
Assam
Helped me a lot. Now, I can create professional themes for joomla.
the tutorial is really great but although i include the images folder with its contents in the xml file,the images dont seem to load in joomla….can anyone help me pls?
thank u sharingg.. good article..
i am making a site but i just cant make the template to work. could someone plz help me to make a template or make it for me.
metallihead, in step 2 only delete/replace code from the tag and upwards, instead of and upwards as in some cases the link to the css document is located above the tag.
Opps, sorry metallihead, I meant to say:
in step 2 only delete/replace code from the tag
‘head’ and upwards, instead of ‘body’ and upwards as in some cases the link to the css document is located above there.
Wish I found your site sooner, it has the best explanation on how to make the template I’ve read so far. I’ve just got my template up into Joomla, but the problem I’m having now is how to do 2 things:
1) I have 3 areas where I want to put regular content (not modules). The component tag can only be used once & that’s where content is placed from the Article Manager page. How do I place HTML content into the other DIV areas? If it’s done with the custom HTML module, then I’ll be forced to create 2 additional content modules for every page of my site, which means I have to create custom names for each & it’ll make editing my site very labor intensive. Is there a better way?
2) The modules that you add to the template within Joomla’s module manager don’t match with the design of the site. I saw a tutorial on editing the style, but it only referred to one of the default templates & the CSS and HTML code is not presented anywhere in order to copy & paste it into the custom template. In the template manager, it only lists the style sheet I created, not the other two that are referenced in the header of the index.php and .xml files.
How do you style the modules using a custom template?
Dude this is owsome…..!!
You need to have a forum
Excellent Tutorials on Joomla. Regards from Active Computech
its nice, but u want to explain in depth…
There is one mistake, while doing this process I came to know that, STEP 1: you know need to put your template folder into Joomla Template folder that can make automatically while installing temp after necessary modifications.
Few step are also can included this is not the whole step, people get confuse.
Otherwise good info, In a short way to install your temp on Joomla.
Good keep it up!!
How does this work when you have 5 html pages
and a flash header with sources
Hey Man…. Nice Tutorial..
I m newbee….
anu forward me further advanced tutorials for joomla template conversion from html
nice
Hi,
Thank you for the tutorial
hi
thanks for this tutorial .