5 Easy Steps Converting HTML Template to Joomla Template
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.
224 Responses to “5 Easy Steps Converting HTML Template to Joomla Template”
A Team with years of experience in developing web applications. Our expertise are in HTML,CSS,PHP,Javascript,SQL and Wordpress.
Dont hesitate to drop us an email for project quotation.
Thanks, mate, converted every single bit of my website. You’re the best!
This website has very good content. Thank you for the great article I did enjoyed reading it; I will be sure to bookmark your blog and definitely will come back from again
very very thanks sir really you solve my problem. i can do this you save my time . Because i am learner in this field.
u made my day
I needed to thank you for this fantastic read!! I absolutely loved every little bit of it.
I have you bookmarked to check out new stuff you post…
I agree with you. This post is truly inspiring. I like your post and everything you share with us is current and very informative, I want to bookmark the page so I can return here from you that you have done a fantastic job
I am preparing my assignment paper and gathering information on this topic. Your post is one of the better that I have read. Thank you for putting this information into one place.
Genial idea! Good job on the guide
[...] http://www.tobacamp.com/tutorial/5-easy-steps-converting-html-template-to-joomla-template/ [...]
This posting, “5 Easy Steps Converting HTML
Template to Joomla Template | Tobacamp Development” was
in fact very good. I’m making out a replicate to show my pals.
Many thanks-Charlene
wedsu local host
I loved up to you’ll receive performed right here. The caricature is attractive, your authored subject matter stylish. however, you command get bought an shakiness over that you want be delivering the following. unwell undoubtedly come more previously again since exactly the similar just about a lot incessantly within case you shield this hike.
Dear friend.. I wanted to send you a message but didn’t find your contact so I am commenting here.. I am learning wordpress development.. do you have any resource or tutorial regarding to convert static html css site to wordpress site? Please help me in this regards.
Many thanks.
Thiѕ іs very fаscіnating, You’re an excessively skilled blogger. I’νe
joineԁ yοur feеԁ and loοk ahead tο looκing fоr moгe of your
excellent poѕt. Additionallу, I hаvе shaгed your ѕite іn my socіal netwοrκs
Oh Amazing Tutorial ,
thanks a lot
This blog Osam..we want more details on this..can you put more about menus and extension Thanks for this blog.
How to get ride the html markup for specific element e.g article list ? so it can match and look exactly as html template.
this very helpful tutorials for how html site convert in joomla.it is very efficiency for novice.
Thankѕ for sharing youг thοughts
аbоut joomla. Regards
Fantaѕtic blοg! Do you have any helpful hints for asρiring writerѕ?
ӏ’m planning to start my own site soon but I’m a littlе lost
on eveгythіng. Would you aԁνise starting with a free platform like
Woгdpress or go for a paid option? Τhere are so many chоiсes out theге
thаt I’m completely overwhelmed .. Any tips? Thanks!
Its a nice formula to easy conversion of html site to joomla one…
What a crock of shite!
Seriously guys you want web designers to build your site. the reason why 50,000 sites fail a day is because not enough skill on the part of the owner that thinks he can be a great designer .
To succeed you need a web designer, PHP mechanic and a good SEO company
So suck it up guys and put your hands in your pockets.
I converted html template into joomla template as u mentioned above.But is is not installing while uploading.I am not getting the errors.What is the the problem.
Thanks for the tut. A code page with a completed basic index.php would help a lot.