5 Easy Steps Converting HTML Template to Joomla Template

By Dani in Tutorial | 71 Comments

4 February 2009


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

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.

Tags:

Top

71 Responses to “5 Easy Steps Converting HTML Template to Joomla Template”

  1. Joomla Themes February 5, 2009 at 6:01 pm

    I bookmarked this great tutorial. Thank you for sharing this.

  2. Dan February 7, 2009 at 10:29 am

    Cool!! dude..u rawk!!
    I’m gonna visit ur site oftenly after dis..

  3. Satanux February 21, 2009 at 6:06 am

    Amazing… bookmarking… great tutorial…

  4. Dick March 4, 2009 at 3:47 am

    Excellent. Thank you very much. That’s a bookmark to keep…

    A quicky like that on module would be so great.

  5. sulabh March 8, 2009 at 10:08 pm

    Hi,

    good work dude… i got the solution in 5 mins..

  6. Mayank April 23, 2009 at 1:32 pm

    Just what I was looking for. Nicely explained how to create and customize templates in Joomla.
    Keep up the good work.

  7. bruno May 13, 2009 at 1:37 am

    cool, but i have some question about the step 4, i need create a file with how name?

  8. Mark May 21, 2009 at 1:55 pm

    Awesome tutorial. Thanks! I have bookmarked this.

  9. buragas June 29, 2009 at 4:44 pm

    great tutorial.bookmarking.thanks.

  10. Santiago June 30, 2009 at 12:16 pm

    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???

  11. mike stevens July 3, 2009 at 11:48 am

    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

  12. JOOMLA TEMPLATE July 4, 2009 at 9:15 am

    it was a very amazing tutorials u have here im gonna use it for my deisgn to look more fantastic…. especially the joomla template…

  13. Francisco July 19, 2009 at 12:54 pm

    Amazing tutorial, thanks.

  14. Установка CMS July 31, 2009 at 8:17 pm

    Выполняю установку и настройку различных CMS систем.
    Предоплата 50% стоимость работы от 400р.
    Оплата Web Main или Яndex деньги.
    Информация для связи ISQ 429606266 Александр.

  15. satish August 6, 2009 at 11:55 pm

    Ohoo@ it is that I was searching for
    Thank you

  16. AnimeezDotCom August 7, 2009 at 6:22 am

    thanks for this great tutorial man.After this I can now be able to convert my psd to joomla…thanks

  17. deePea August 19, 2009 at 7:15 pm

    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.

  18. Cron August 24, 2009 at 6:47 am

    Awesome. Bookmarked!

  19. jason August 26, 2009 at 6:51 am

    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…

  20. Santanu September 13, 2009 at 2:08 pm

    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?

  21. Santanu September 13, 2009 at 2:09 pm

    thanks for this great tutorial man.After this I can now be able to convert my psd to joomla…thanks

  22. bala September 14, 2009 at 6:55 pm

    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…

  23. kang Wawan September 28, 2009 at 2:33 pm

    Thank you for this article.

    To “bala”, there may be any mistake in file templatedetails.xml. Please check again.

  24. Amit Rathiesh October 9, 2009 at 1:10 am

    Thanks for the article. Was of great help to me

  25. visitor October 23, 2009 at 6:39 pm

    Tutorila is so so.

  26. andrew October 23, 2009 at 6:40 pm

    Very nice tutorial

  27. thomson October 23, 2009 at 6:40 pm

    Can u give us more tutorial like how to convert html to joomla.
    Thanks in advanced

  28. Aldrin D'Souza October 31, 2009 at 12:31 am

    Very nice way of explaining. Add some more details to make it a complete TUTORIAL’.
    Thank you, wish you great success.

  29. nomadd November 5, 2009 at 5:34 am

    the mainfest file can be called also templatedetail. and can i use the same exmple as well ?

  30. ferly November 19, 2009 at 12:41 pm

    i’ve problem,
    how can i solve it??
    please!

    JInstaller::install: File ‘C:\xampp\htdocs\Joomla\tmp\install_4b04d9a69cbd2\templateku\html’ does not exist.

  31. srisoftwarez November 20, 2009 at 7:53 pm

    Thanks for this Great Tutorial

  32. srisoftwarez November 20, 2009 at 7:54 pm

    Thanks for this great Tutorial.

  33. Hyderabad December 4, 2009 at 2:19 am

    Hi,
    Thanks a lot for your useful tips. It helped me lot.

    Thanks
    Assam

  34. Rafiul Alam December 19, 2009 at 5:13 pm

    Helped me a lot. Now, I can create professional themes for joomla.

  35. metallihead January 5, 2010 at 8:18 pm

    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?

  36. kemal January 7, 2010 at 12:31 am

    thank u sharingg.. good article..

  37. help January 11, 2010 at 9:20 pm

    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.

  38. Alexkiernan January 17, 2010 at 5:22 am

    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.

  39. Alexkiernan January 17, 2010 at 6:39 am

    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.

  40. jeff January 31, 2010 at 5:45 am

    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?

  41. Killo February 2, 2010 at 8:21 pm

    Dude this is owsome…..!!

    You need to have a forum

  42. Sajid Holy February 12, 2010 at 11:11 pm

    Excellent Tutorials on Joomla. Regards from Active Computech

  43. kanagaraj February 20, 2010 at 7:30 am

    its nice, but u want to explain in depth…

  44. Priyanka February 22, 2010 at 5:55 pm

    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!!

  45. zakka maroney February 26, 2010 at 2:11 pm

    How does this work when you have 5 html pages
    and a flash header with sources

  46. Saurabh February 26, 2010 at 8:56 pm

    Hey Man…. Nice Tutorial..
    I m newbee….
    anu forward me further advanced tutorials for joomla template conversion from html

  48. Marshall March 6, 2010 at 3:10 am

    Hi,
    Thank you for the tutorial

  49. Coeugh April 6, 2010 at 9:54 pm

    Hi, i didnt understand step 3 and 4 can u please explain ? or give me an exemple ?? and if there is anyone who can help me converting my template into joomla template it will be real great thank you

  50. Maheswar Reddy @ Hyderabad April 8, 2010 at 11:00 am

    Hi
    This is Tutorial helped me a lot , But Iam not getting 100 % Output,
    Can u help me. My Contact number is : 9985403632. Mail id: maheswarreddy.n@gmail.com…

Trackbacks/Pingbacks

  1. Joomla tema yap says:
    May 23, 2009 at 3:51 pm

    [...] yap

  2. In choosing a CMS: 40+ Great CMS Theming Tutorials | Noupe says:
    July 21, 2009 at 7:35 am

    [...] 5 Easy Steps Converting HTML Template to Joomla Template [...]

  3. Tutorials, Resources and Tips for Joomla! Template Development : Speckyboy Design Magazine says:
    August 14, 2009 at 7:38 pm

    [...] 5 Easy Steps Converting HTML Template to Joomla! [...]

  4. Collection of Tutorials, Resources and Tips for Joomla Template Developers. | guidesigner.net says:
    August 16, 2009 at 1:32 pm

    [...] 5 Easy Steps Converting HTML Template to Joomla! [...]

  5. Collection of Tutorials, Resources and Tips for Joomla Template Developers. | Web Design GroundBreak says:
    August 18, 2009 at 8:44 am

    [...] 5 Easy Steps Converting HTML Template to Joomla! [...]

  6. Tutorial: Converter um tema HTML para Joomla - F says:
    August 26, 2009 at 12:52 am

    [...] html templates while browsing on the net and really want to use it for your joomla based website 5 Easy Steps Converting HTML Template to Joomla Template | Tobacamp Development __________________ FAQs & Tutoriais – [...]

  7. Joomla Template / Theme – Tutorials - Hidden Pixels says:
    September 15, 2009 at 7:42 pm

    [...] 5 Easy Steps Converting HTML Template to Joomla Template [...]

  8. Html bir tema Joomla temaya dönüşür mü? | newpageflip I blog says:
    January 4, 2010 at 6:36 pm

    [...] başarılı olamayacaksınız büyük bir ihtimalle ama, sonuç hoşunuza gidecektir. Hadi buradangiriş yapın ve başlayın. Etiketler: html, joomla Bu yazıyı [...]

  9. Templates Joomla 1.5 says:
    July 7, 2010 at 5:50 pm

    [...] [...]

Leave a Reply