How to make your own Joomla template

Here is a tutorial for making your own Joomla templates. Note before reading, you should have some existing knowledge of web development using HTML and CSS.

1. Design Layout

Design your template in a graphics program like Adobe PhotoShop or Corel Draw for example (use whichever is your preference).

2. Isolate Images

Save important design pictures (header, background, footer, menu, etc.) in some folder (for example: "images").

3. Create Directory for your new Joomla Template

Open Joomla templates directory and make a new folder ("mytemplate") in it.

4. Create File/Folder Structure for your new Joomla Template

In "mytemplate" folder create some new files: "index.php", "template_thumbnail.png" and "templateDetails.xml".
Then, make another two folders, "images" and "css". In images folder, paste your pictures from step 2, and in css, create a new "style.css" file.

5. The Joomla Template Details XML

Now, open templateDetails.xml file with any code editor like NotePad++ or DreamWeaver for example (as with graphic design, it doesn't matter which one you choose as that is your preference).
Then, write this code, changing the information between the tags appropriately (e.g., "TEMPLATE NAME") and then save the 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>TEMPLATE NAME</name>
                        <creationDate>07/01/2010</creationDate>
                        <author>YOUR NAME</author>
                        <authorEmail>YOUR E-MAIL</authorEmail>
                        <authorUrl>YOUR WEBSITE</authorUrl>
                        <copyright>&nbsp;</copyright>
                        <license>gnu/gpl</license>
                        <version>1.0.0</version>
                        <description>No description</description>
                        <files>
                          <filename>index.php</filename>
                          <filename>templateDetails.xml</filename>
                          <filename>template_thumbnail.png</filename>
                          <filename>css/style.css</filename>                
                        </files>
                        <positions>
                          <position>left-column</position>
                          <position>main-column</position>
                          <position>right-column</position>
                        </positions>
                      </install>

Open in new window

6. The Joomla Template Index Page

Open index.php using your text/code editor and add HTML code like the following example for your template, then save it!

<!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="en" lang="en" >
                      <head>
                        <link rel="stylesheet" type="text/css" href="/templates/mytemplate/css/style.css" />
                      </head>
                      <body>
                        <div id="header">&nbsp;</div>
                        <div id="columns">
                          <div id="left">
                            <jdoc:include type="modules" name="left-column" />
                          </div>
                          <div id="main">
                            <jdoc:include type="component" />
                            <jdoc:include type="modules" name="main-column" />
                          </div>
                          <div id="right">
                            <jdoc:include type="modules" name="right-column" />
                          </div>
                        </div>
                        <div id="footer">&nbsp;</div>
                      </body>
                      </head>

Open in new window

Note: <jdoc:include type="modules" name="main-column" /> means that there is the "main-column" module position that you will find in Joomla administration panel. The name of the module position must be the same in the "templateDetails.xml" and "index.php" files (e.g. main-column).

7. The Joomla Template StyleSheet

Open the style.css file and add some CSS code for your template. I will not put examples for this, but as stated earlier you should already know some CSS and so you can write some simple test styles yourself here.

8. Activate Your Template!

Open your Joomla administrator panel and go to the template manager. You will see your own template's name which you can now set to the default and try it out!

I hope this will help you to make your websites better.