HTML to Joomla Conversion

Convert HTML to Joomla Template: Process of 5 Simple Steps

Rating: star-active1star-active2star-active3star-active4star-active5

HTML to Joomla Template Conversion

Long gone are the days when it took immense time and efforts to convert PSD to HTML and other relevant and advanced technologies. Due to advance in technology, it has now become much easier to convert PSD to CSS and any other advanced technology. One such technology is PSD to Joomla, it is simple to develop a highly professional, flexible and user friendly website. In fact, the process of converting HTML to Joomla template is a simple one and is discussed below in five steps. If you follow the mentioned steps properly, you can easily create and start using a Joomla template. Moreover, it is always beneficial for you to learn this process as it can help you use a free HTML template for creating your own Joomla based website.


1.Template Preparation:

The first step is to prepare the template. It is important to ensure that the template is both (X)HTML and CSS compliant. You just need to search on the Internet and you will find plethora of HTML templates there. In Joomla, a template is filed under a directory called templates. You need to make sure that  HTML file, images and CSS file are all contained inside one single directory. And this directory should be created under templates folder

2.Changing the HTML Code:

In the second step, you need to change the HTML code before the body tag of the HTML file with appropriate code. There are few other changes as well that you need to make. Change “your_template_name” to any name you want to give your template. Similarly change “your_css_directory” to the name of your CSS directory. And lastly, change “” to the name you want to give to your CSS file. In case you have two or more CSS files, then you should declare them all. This also holds true for Javascript files. Declare them in the same way as CSS files.

3.Making Changes to Joomla Template:

One important thing you need to keep in mind is that a default Joomla template has a few module positions. These are left, right, breadcrumb, top, user1, user2, footer, debug, syndicate etc. now you need to create a module position. For this, you need to place the following code to appropriate position. The code is

<jdoc:include type=”modules” name=”your_module_position_name” />
After creating the module, you should place a component. Add the correct code for it.

4.Creating a Manifest File:

The fourth step is to create a manifest file. A manifest file is needed to list all the files you have used. It is important to create this file because if you do not create it, it will create error when you will install the template. Most importantly, you should not forget to enlist all your files used by you in the newly made template inside files tag. If you do not do it, then the files would not get copied to Joomla template directory during installation process. In order to declare the position name that you use in your template, position tag is used.


Last step is to package it. However, it is better to create a thumbnail of the template before you package it. You should keep in mind that the thumbnail should have 206px width and 150px height. Last but not the least, you should compress your template to a zip file. Now your template is ready and good to go.

These are the five simple steps that if followed properly will help you in converting HTML to Joomla template. However, it is imperative that you test the template before sharing it on the Internet. It will help you identify and rectify errors or loopholes, if any. By testing the template before sharing it, you can rest assured that your template will function in a smooth manner without any glitches and hence will give the best results.

Enjoyed the post? Then you’ll surely love getting our regular blog updates, too. Subscribe now! Or want to flush your doubts in Joomla? Talk to our PSD to Joomla experts now!

Avatar for Justin Spencer


Justin Spencer is a technology enthusiast. He loves to read the latest blogs on technology and design. He has a keen interest in small business and web development. Connect with him -

Google +

Category :

Leave a Reply

Your email address will not be published. Required fields are marked *

Custom Button Close

Request a
free quote

  • Non-Disclosure Agreement
  • 100% Satisfaction
  • 100% Moneyback Guarantee
  • 180 Days Free Support
for all Returning Customers

Guaranteed Response with in 24 Hours

Please fill in the details below . All * fields are mandatory.

  • Name Error
    e.g: John Smith
    Phone Error
    e.g: +1 1234567890
  • Select Error
  • abcd
    Accepted file Formats: .PSD, .JPG, .JPEG, .GIF, .PNG, .AI, .ZIP, .RAR, .PDF
    if the size is greater than 20MB, specify the URL here
    Drop HereBrowse