1. Turning a static HTML template
into a Joomla Template
Joomla Day New York 2012
Helvecio “Elvis” da Silva

2. What is a template?
A template is one of the differente types of Joomla extensions which
modifies the look and feel of a website;
Joomla uses one template for the Front-End (the site itself) and another to
the Back-End (the administrator area);
In general, there’s a concern on changing the Front-End template only.

3. The HTML Template
Create a basic HTML page, CSS and images and place them in a folder.
Name this folder whatever you want, but it’s a good start to name it after
your future template name. For example: joomla_template;
The main HTML file can be named index.html;
Put your CSS code in a separate file inside a folder named css. Name it
template.css;
Put all your image files inside a folder named images;
Be as creative as you want!

4. Creating a Joomla template
Make a copy of the folder of your finished HTML template;
Change the index.html file extension from .html(or .htm) to .php;
Use a text editor or whatever is your choice to create an empty HTML file
called index.html. It should be placed at the same level of index.php;
Use a text editor to create an empty file named templateDetails.xml.
Note the capital D in the file name.

5. templateDetails.xml
Without a templateDetails.xml, Joomla will not recognize the template;
The best way to create a new templateDetails.xml file for the first time is to
copy the file from another template installation and make necessary
adjustments.

6. templateDetails.xml
A basic templateDetails.xml contains information on:
XML version of the file;
the template;
files used by the template;
positions used by the template.

7. templateDetails.xml

8. index.php
A basic index.php contains:
the HTML of the template;
module positions codes;
content position code;
specific code to be used by Joomla, e.g., the site title.

9. index.php

10. Module Positions
Modules are assigned to positions and menu itens. In the template we
must tell where these positions are, thus Joomla knows where to insert the
modules.
This is an example of a position in the template:
<jdoc:include type="modules" name="position-1" style="container" />

11. Module Chrome
By using module chrome, you can modify the layout of your module as
much or as little as needed. These are the styles available for 2.5.x:
none - outputs raw module content. Module title is not displayed;
table - outputs the module in table. Module title is surrounded by <th>
tags;
horz - outputs module as a table inside an outter table;
html - outputs module in <div> tags. Title is surrounded by <h3> tags;
rounded - outputs module in nested <div> tags to create rounded corners;
outline - outputs module with a border. Used to preview module positions;
custom modules can also be created.

12. Discovering position modules
Go to Extensions > Template Manager > Options;
Under Templates > Preview Module Positions, check Enabled;
Click Save & Close, then View Site;
Add ?tp=1 at the end of your site URL;
You will be able to see the position where modules are;
Module positions can also be found under Extensions > Module Manager.

13. Installing the template - method 1
Upload all files to the templates folder in your Joomla installation;
Go to Extensions > Extensions Manager;
Click the tab Discover, then click on the icon Discover above, to the right;
The name of the new template will be listed;
Check the box to the left of the template name;
Click on the icon Install above, to the right;
If everything is OK a successful installation message will appear.

17. Installing the template - method 2
Turn your new Joomla Template into a .ZIP file;
Go to Extensions > Extensions Manager > Install;
Browse for your package .ZIP file;
Upload and install it.

19. Thank You!
e-mail: me@hlvcdesign.com
http://www.hlvcdesign.com