Convert html to Joomla 1.5 template Rev 1.17 post shows you how to convert a html template into a joomla php file for your site.
Last Updated: October 9, 2020
Latest News: I fixed a broken link.
I have seen many tutorials on the internet on how to transform a html template into a Joomla 1.5 template. I have decided to add my own tutorial just for fun and hoping to help those who are new to Joomla and would like to use their old html templates. I also would like to thank all Joomla supporters out there who keep contributing free of charge information about Joomla.
This tutorial will focus on converting a html template into Joomla 1.5 template using kompoZer and pspad. You can use any number of editors like notepad. If you don’t much about KompoZer, check my KompoZer tutorial to help you started.
This tutorial assumes that you have basic HTML/CSS knowledge, enough to build a template that isn’t Joomla.
Who is this Tutorial For?
This tutorial is for people who have some html and css knowledge and have very little knowledge or no knowledge about Joomla 1.5. If you don’t have much html and css knowledge then I suggest that you do a few courses online and believe me there are thousands of tutorials on the internet that will help you. However you may continue even if you don’t know anything about css, html or Joomla as this is a very simple tutorial to follow. A good challenge is always good for the mind
Let’s begin;
We want to set up a tree structure as you see in the following image:
You can see three folders, CSS which contains template.css and other style sheets including ie_hack.css files, Images which contain all your template images and js which contains some java script files if you decide to add some. Then you have your typical index.php, template_thumbnail.png and templateDetaisl.xml. All these folders and files are very important and all must be included in your templateDetails.xml file.
A Joomla 1.5 Template is setup using ‘Positions’, a position in Joomla is an area like your Main Content, Left Navigation, Right Navigation, Header, Footer, User1, User2 etc. Of course there is more to modules and scripts that can be added but we are just going to focus on the basic setup and conversion from plain html template to Joomla 1.5 template.
Remember all Joomla 1.5 templates contain an xml file like the one previously mentioned. If you don’t include the xml file no file will be uploaded to Joomla 1.5 backend and it will display an error as you upload your template. Remember any file you add to the zip folder must be included in the templateDetails.xml file with the correct path i.e. <filename>images/back_container.gif</filename> contains a file name back_container.gif inside images folder.
Hint: Always remember to include all files and path in the templateDetails.xml file as I mentioned above.
Now that you have a fairly good idea on what a position is in Joomla 1.5, let me show you how you would create the positions in a Joomla 1.5 template from a html template.
Click on the following image
to view the layout. From this layout you will start to understand why each position has a unique name and why you add it to the position as shown in the image.
Positions that will be added:
- user 4
- search
- user 3
- breadcrumb
- left
- component
You can download a HTML template from www.oswd.org. I have removed the link to view the template live because version 1.5 is no longer secure. You can still download the zip folder found towards the end of this tutorial. It is recommended that you perform this tutorial on a local environment i.e. using wamp server on your laptop or desktop in using a Windows environment. Mac systems uses something similar.
Firsts lets have a look at plain html code shown below:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Page Document</title>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 800px;”>
<tr>
<td valign=”top” style=”width: 800px; background: #a1a1a1;” colspan=”2″>Header goes Here</td></tr>
<tr>
<td valign=”top” style=”width: 200px; background: #e2e2e2;”>Left nav goes here</td><td style=”width: 600px;”>Main content goes here</td>
</tr>
</table>
</body>
</html>
Or if you are using Div tags this is what it would look like:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Page Document</title>
</head>
<body>
<div id=”body”>
<div id=”header”>Header goes here</div>
<div id=”leftnav”>Left nav goes here</div>
<div id=contenthere”>Main content goes here</div>
</div>
</body>
</html>
I will be working with Div tags as they are the norm nowadays and most developers work with Div containers. Tables are still used but purely to develop tables not for developing main content webpages.
Looking at the code above lets add some Joomla modules.
We add php code to the very top of <html> tag to make sure the template is not called apart from Joomla and to set the proper language as:
<?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”>
Then we add the extra code within <html> tag, see below:
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language;?>”
lang=”<?php echo $this->language; ?>” >
Next, replace the title element and meta elements with the php code to generate them and we add it below the <head> tag:
<head>
<jdoc:include type=”head” />
Now we can add some css links:
<link rel=”stylesheet” href=”/joomla1/<?php echo $this->baseurl ?>/templates/system/css/system.css”
type=”text/css” />
<link rel=”stylesheet” href=”/joomla1/<?php echo $this->baseurl ?>/templates/system/css/general.css”
type=”text/css” />
<link rel=”stylesheet” href=”/joomla1/<?php echo $this->baseurl ?>/templates/yourtemplate/css/template.css”
type=”text/css” />
Remember to replace “yourtemplate” above with the name of your template.
I have added 2 files to hack internet explorer, 1 iepngfix.htc and 1 ie_hacks.css.
<!–[if lte IE 6]>
<style type=”text/css”> img { behavior: url(‘/joomla1/templates/<?php echo $this->template ?>/css/iepngfix.htc’); }</style>
<link rel=”stylesheet” type=”text/css” href=”/joomla1/templates/<?php echo $this->template ?>/css/ie_hacks.css” media=”screen, projection” />
<![endif]–>
Here I added 1 md_stylechanger.js file to change the size and colour of the font when you add this template to Joomla 1.5.
<script type=”text/javascript” src=”/joomla1/<?php echo $this->baseurl ?>/templates/coolblue/js/md_stylechanger.js”></script>
With the <body> tag I did not add any modules and left it as you see below. Of course you can add what ever module you think that could be implemented here and remember that you might have to change the css style sheet and the xml file.
<body>
<div id=”container”>
<div id=”banner”>
<!– Put the name of your site inside the following h1 element –>
<h1>Mbrsolution</h1>
<!– Start of meta navbar: place links which apply to the whole site here –>
<div id=”nav-meta”>
<div id=”fontsize”>
I have added the javascript to increase and decrease the font. You don’t have to add this code if you don’t want. I chose to add it.
<script type=”text/javascript”>
//<![CDATA[
document.write(‘<a href=”/joomla1/index.php” title=”<?php echo JText::_(‘Increase size’); ?>” onclick=”changeFontSize(2); return false;”><?php echo JText::_(‘A+’); ?></a><span> </span>’);
document.write(‘<a href=”/joomla1/index.php” title=”<?php echo JText::_(‘Decrease size’); ?>” onclick=”changeFontSize(-2); return false;”><?php echo JText::_(‘A-‘); ?></a><span> </span>’);
document.write(‘<a href=”/joomla1/index.php” title=”<?php echo JText::_(‘Revert styles to default’); ?>” onclick=”revertStyles(); return false;”><?php echo JText::_(‘reset’); ?></a></p>’);
//]]>
</script>
</div>
<jdoc:include type=”modules” name=”user4″ />
<jdoc:include type=”modules” name=”search” />
</div>
<!– End of meta navbar –>
As you can see from above I have also added two modules, “user4” and “search”, you can use any module that you like as long as the module name works for you i.e. search would be used to search within your site.
Now add the following modules as you see below:
<!– Start of top level navbar: put links to your major site sections here –>
<div id=”nav-main”>
<jdoc:include type=”modules” name=”user3″ />
</div>
<!– End of top level navbar –>
<!– Start of secondary navbar: put links to this section’s subsections here –>
<div id=”nav-section”>
<jdoc:include type=”modules” name=”breadcrumb” />
</div>
<!– End of secondary navbar –>
<!– Start of side panel: place additional links and information here –>
<div id=”sidebar”>
<h3>Main Menu </h3>
<!– I have added a style xhtml. Very important or else you wont see the header displayed on all the left menu –>
<jdoc:include type=”modules” name=”left” style=”xhtml” />
</div>
<!– End of side panel –>
<!– Start of main content section –>
<div id=”content”><a name=”contentstart” id=”contentstart”></a>
<h1>Heading 1</h1>
<br>
<jdoc:include type=”component” />
</div>
<!– End of main content section –>
<!– Start of footer type info –>
<div id=”info-site”>
<p id=”info-company”><a href=”#”>copyright</a> | <a href=”#”>privacy</a> | <a href=”#”>home</a></p>
<p id=”info-standards”>
<a href=”http://validator.w3.org/check?uri=referer”><img
src=”http://www.w3.org/Icons/valid-xhtml10-blue”
alt=”Valid XHTML 1.0 Strict” height=”31″ width=”88″ /></a>
</p>
<p>
Copyright © 2010 Mbrsolution. All Rights Reserved.<br>
Converted html to Joomal 1.5 by Manuel Ballesta Ruiz
</p>
</div>
<!– End of footer type info –>
</div>
</body>
</html>
This concludes this tutorial. There are some changes that I made to have it set up the way I wanted to. You can make what ever changes necessary to meet your needs. All you have to do is manipulate the code, especially the css style sheets and make sure you test it first on all the common browsers. I tested this on IE 8 and Firefox and works well. If you need help or want to leave a comment please do so. I will be adding more information later on. I Hope you learn something from this tutorial.
As you are aware Joomla 1.5.26 is discontinued. You might want to follow my tutorial on converting a Joomla 1.5.26 website to Joomla 2.5.x, click on the following link convert a site from joomla 1.5 to joomla 2.5 rev 1. I am sure that you will find it interesting and remember if you have any questions just leave a comment here ;)
Good luck.
I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.
Wonderful goods from you, man. I’ve take note your stuff prior to and you’re just too fantastic. I really like what you’ve got right here, certainly like what you’re stating and the way through which you say it. You’re making it entertaining and you still care for to stay it sensible. I can’t wait to read much more from you. That is actually a wonderful web site.
Thank you for your comment. If you have any questions let me know, it will be my pleasure to help you.
Thank you manuel.
but i want video type.
You are welcome and I understand. Thank you for your comment…..
Pls tell me how to create html page to joomla site
Hi Lakshmi, thank you for your question. Is your question in regards to creating a HTML static page in joomla?
Nice to have some good time with you…
Although i know nothing about joomla and css but your tutorial inspiring me a lot..
thanks for your html to joomla tutorial…
Thank you :)
i wnat add my html site in joomla how i can do e this
Hello Nil, thank you for your question. If you want to add your html site to joomla or in other words convert to Joomla, follow my instructions here and if you have any problems let me know. It can be a bit tricky if you don’t know much about html and css coding. However my instructions should put you on the right path.
Kind regards
Hi I am realy New to joomla and I am finding it realy hard to convert my XHTML site into joomla, would it be possible for somone to teach me and show me,
Thanks
Hello Chris, thank you for your question. Can you share with me how did you find my tutorial? Did it help you and put you on the correct path? Once you answer my questions then I will be able to help you with your questions.
Kind regards
nice
Its really a quite amazing blog.
Thanks for sharing your knowledge
Html5 Tutorial
Thank you Swapnil, I hope it helped you. If you have any questions please let me know.
Hello i’m Nina , i’m on your page for the first
time and i was searching about this topic , where to buy backlinks ,since 2 or 3 hours!
Many thanks you make my day!! Keep Writing, it’s so informative and cool news on Convert html to Joomla 1.5 template Rev 1.17.
Hello Nina thank you for your comment. If you go to my front page you will see an advertising banner to backlinks.com. I hope this helps you.
Kind regards
omg!
it was veryyyyyyyyyyyyyyyyyyyy usefulllll !
tanks a lotttttt
You are most welcome Mohammad.
How do I convert an exisitng html template to joomla…pls send me a tutorial on it.I am an expert in html and css.
Hi Anupam, thank you for your question. Did you read my tutorial above? Which version of Joomla are you trying to convert your HTML template too?
Regards