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 whichmodifies the look and feel of a webs...
The HTML TemplateCreate a basic HTML page, CSS and images and place them in a folder.Name this folder whatever you want, b...
Creating a Joomla templateMake a copy of the folder of your finished HTML template;Change the index.html file extension from...
templateDetails.xmlWithout a templateDetails.xml, Joomla will not recognize the template;The best way to create a new temp...
templateDetails.xmlA basic templateDetails.xml contains information on:  XML version of the file;  the template;  files used...
templateDetails.xml
index.phpA basic index.php contains:  the HTML of the template;  module positions codes;  content position code;  specific ...
index.php
Module Positions Modules are assigned to positions and menu itens. In the template we must tell where these positions are,...
Module ChromeBy using module chrome, you can modify the layout of your module asmuch or as little as needed. These are the...
Discovering position modulesGo to Extensions > Template Manager > Options;Under Templates > Preview Module Positions, chec...
Installing the template - method 1Upload all files to the templates folder in your Joomla installation;Go to Extensions > E...
Installing the template - method 2Turn your new Joomla Template into a .ZIP file;Go to Extensions > Extensions Manager > In...
Thank You!e-mail: me@hlvcdesign.comhttp://www.hlvcdesign.com
Turning a static HTML page into a Joomla Template
Turning a static HTML page into a Joomla Template
Turning a static HTML page into a Joomla Template
Turning a static HTML page into a Joomla Template
Upcoming SlideShare
Loading in …5
×

Turning a static HTML page into a Joomla Template

33,722 views

Published on

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
  • hello , thank you for this tutorial , i have a problem in the step 13 i cliked discover but i didn't see my template .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
33,722
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Turning a static HTML page into a Joomla Template

    1. 1. Turning a static HTML templateinto a Joomla TemplateJoomla Day New York 2012Helvecio “Elvis” da Silva
    2. 2. What is a template?A template is one of the differente types of Joomla extensions whichmodifies 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.
    3. 3. 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 file can be named index.html;Put your CSS code in a separate file inside a folder named css. Name ittemplate.css;Put all your image files inside a folder named images;Be as creative as you want!
    4. 4. Creating a Joomla templateMake 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 filecalled 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. 5. templateDetails.xmlWithout a templateDetails.xml, Joomla will not recognize the template;The best way to create a new templateDetails.xml file for the first time is tocopy the file from another template installation and make necessaryadjustments.
    6. 6. templateDetails.xmlA basic templateDetails.xml contains information on: XML version of the file; the template; files used by the template; positions used by the template.
    7. 7. templateDetails.xml
    8. 8. index.phpA 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. 9. index.php
    10. 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. 11. 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.
    12. 12. 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.
    13. 13. Installing the template - method 1Upload 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.
    14. 14. Installing the template - method 2Turn your new Joomla Template into a .ZIP file;Go to Extensions > Extensions Manager > Install;Browse for your package .ZIP file;Upload and install it.
    15. 15. Thank You!e-mail: me@hlvcdesign.comhttp://www.hlvcdesign.com

    ×