Turning a static HTML templateinto a Joomla TemplateJoomla Day New York 2012Helvecio “Elvis” da Silva
What is a template?A template is one of the differente types of Joomla extensions whichmodiﬁes the look and feel of a website;Joomla uses one template for the Front-End (the site itself) and another tothe Back-End (the administrator area);In general, there’s a concern on changing the Front-End template only.
The HTML TemplateCreate 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 afteryour future template name. For example: joomla_template;The main HTML ﬁle can be named index.html;Put your CSS code in a separate ﬁle inside a folder named css. Name ittemplate.css;Put all your image ﬁles inside a folder named images;Be as creative as you want!
Creating a Joomla templateMake a copy of the folder of your ﬁnished HTML template;Change the index.html ﬁle extension from .html(or .htm) to .php;Use a text editor or whatever is your choice to create an empty HTML ﬁlecalled index.html. It should be placed at the same level of index.php;Use a text editor to create an empty ﬁle named templateDetails.xml.Note the capital D in the ﬁle name.
templateDetails.xmlWithout a templateDetails.xml, Joomla will not recognize the template;The best way to create a new templateDetails.xml ﬁle for the ﬁrst time is tocopy the ﬁle from another template installation and make necessaryadjustments.
templateDetails.xmlA basic templateDetails.xml contains information on: XML version of the ﬁle; the template; ﬁles used by the template; positions used by the template.
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" />
Module ChromeBy using module chrome, you can modify the layout of your module asmuch 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.
Discovering position modulesGo 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.
Installing the template - method 1Upload all ﬁles 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.
Installing the template - method 2Turn your new Joomla Template into a .ZIP ﬁle;Go to Extensions > Extensions Manager > Install;Browse for your package .ZIP ﬁle;Upload and install it.