There are many tutorials online which explain how to make an fully working HTML template. I however find these tutorials tend to over-complicate what is in fact a relatively simple task, providing you have a good understanding of xHTML and CSS.

With this tutorial I intend to create a step by step guide on how to convert your web site, or any other template into a fully working Joomla Template.

Step 1

The majority of web designers should use a template which they designed on their own. At this point I am assuming you have already designed your template, and coded it up using CSS and xHTML, ready to go as a static web page. Your template does not require any content, purely because Joomla will populate your web site for you.

Step 2

Next you must download the following files which has a pre-defined Joomla Template layout included, you will use this file in order to create your template.

Step 3

Next you must open your html editor, I use Dreamweaver. Open the following files:

From your template:

• your main layout page, usually index.html
• your main css stylesheet

From the pre-made Joomla template:

• index.php
• css/template.css

Step 4

From your main layout page (index.html), select all of the content from inside the body tags. Below is the example text I took from BarryFlood.com when it was in development.

Next you must paste your copied text in between the body tags of the index.php file which you downloaded earlier.

Step 5

You must now open your CSS stylesheet and copy all of its content. Next paste all of its content into the css/template.php file, under the line "@import url(forms.css);"

Step 6

Congratulations, you have now created a working Joomla template, however. You are not finished yet, you now have to assign positions.

Now open your index.php file from the Joomla template. you must find where you are going to place the main navigation menu and insert the following line where it should be.

you must also decide where the start of your many content body should be located, once you find it, insert the following two lines of code.

you may also have secondary positions for inserting modules to your web site, for example a footer. In order to do this insert the following line of code and replace "INSERT NAME HERE" with the name of your position, e.g. footer.

to enable your secondary name to appear in the list, you must open templateDetails.xml in your html editor. Scroll to the bottom and under <position>mainmenu</position>create a new line called

You can do this as many times as required, for as many positions as required, these will be accessible when setting up modules in Joomla.

Step 7

Now this is another simple step, take all of the images from your original folder, and copy/paste them into the images folder in the Joomla template file you downloaded. Please ensure all your image links in your css and html files are set up correctly.

Step 8

You have now finished your template, simply upload the entire template directory in the templates folder via your ftp.