Make a Joomla 1.7 Template

Joomla 1.7 Template Tutorial

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 1.7 Template.

Before You Begin

---

- Download the above source files.
- Template conversion can be done on request, just contact me

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 1.7 will populate your web site for you.

Step 2

---

Next you must download the following files which has a pre-defined Joomla 1.7 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 1.7 blank 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.

Step 6

---

Congratulations, you have now created a working Joomla 1.7 template, however. You are not finished yet, you now have to assign positions.
Now open your index.php file from the Joomla 1.7 template.
You must find where you are going to place the main navigation menu and insert the following line where it should be. (the below line indicates a module position)

<jdoc:include type="modules" name="navigation" style="raw" />

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.

<jdoc:include type="message" />
<jdoc:include type="component" />

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.

<jdoc:include type="modules" name="INSERT NAME HERE" style="xhtml" />

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

<position>INSERT NAME HERE</position>

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

**PLEASE NOTE - IF YOU HAVE CREATED MORE FOLDERS, E.G. SUB FOLDERS INSIDE THE IMAGES DIRECTORY, YOU MUST LIST THESE IN THE TEMPLATEDETAILS.XML FILE ALSO, OTHERWISE THE TEMPLATE WILL NOT INSTALL CORRECTLY**

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 1.7 template file you downloaded. Please ensure all your image links in your css and html files are set up correctly.

Step 8

---

Make the entire site folder a .zip file, and use the extensions manager within Joomla administrator to install the zip. Your template is now created, dont forget to set it as the default template!