Developing joomla 1.6 templates


Published on

This is a presentation I gave on Joomla 1.6 template development for JoomlaDay DC 2010

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Talk a bit about who you are, where you’re from, etc… Ask about who your audience is. Who has built templates before? Does everyone know HTML?
  • So a big question that will likely come up and one tha t I’d like to address head on is, will joomla 1.5 template’s work in joomla 1.6?
  • The answer is no. but almost! Joomla 1.5 template’s will not be able to simply be installed in joomla 1.6 without making a few minor tweaks first. These tweaks are minor!
  • Some major differences between joomla 1.5 and 1.6 in the world of templating is some changes to the index.php file, and the template’s templateDetails.xml file. New features include the ability to save configurations as styles, and some advanced ACL controls.
  • Your templateDetails.xml file will have differences from 1.5 such as a required doctype, the 1.6 version number, and an entirely different setup for setting up template parameters, used to create different styles for the same template.
  • Differences in the index.php is ability to grab param.ini values with a getParams tag, and you should use the jdoc for the header.
  • Each template has a style, even if there’s only one. Styles save the configuration of the template’s parameters and can be assigned to different menus, users, or user groups.
  • You can save different styles as different names, which all have different settings in your template’s parameters. These styles can be assigned to menus – just like template’s in Joomla 1.5.X
  • You can save different styles as different names, which all have different settings in your template’s parameters. These styles can be assigned to menus – just like template’s in Joomla 1.5.X
  • There’s some basic tools that you will need to create a joomla template is some sort of host to install joomla and play with your code. A localhost is great because no hosting account is required and it’s easier to sort through directories. You’ll need some sort of code editor to edit your HTML, CSS, and a few lines of PHP. Some great tools are Dreamweaver (in code view), TextMate, and Notepad++ works great on Windows. If you do use a live host you’ll need an FTP Application. If you’re building your own template you’ll want to have some sort of design program to create images to use in your design. Photoshop, Fireworks, and Gimp will work great for this. Lastly you’ll need a fair amount of knowledge when it comes to writing basic HTML and CSS. Any PHP you’ll need you can easily copy and paste from existing templates.
  • A template comprises of these elements.
  • These are what the required files for a joomla template will be. Joomla looks for these files to put together a html page to then send to the user’s browser. Essentially joomla takes all these pieces of a page and puts them together.
  • And inside your index.php file you will have these elements. you are telling the Web browser what version of (X)HTML your Web page should be displayed in. Your header calls all your stylesheets, javscript or ajax libraies. Your body will contain all HTML such as div ids and classes for layout, and then also have Joomla API calls for displaying modules, your compmonent area, your user messages area such as login errors, and will be a place for you to put PHP code to dynamically load things like HTML based on whether or not a module position is being used.
  • The first line prevents the index.php page from being loaded directly by the browser – this is a security measure. Other things that will be in your index.php file will be calls to your template’s css file, any other libraries such as javascript, ajax, mootools etc..You’ll also call module positions, your component, and be able to use PHP to do conditional checks for loading different bits of code such as html for columns or positions.
  • Your templateDetails.xml file is the file that tells the Joomla template installer what to do. It tells it which files to find in the .zip package and where to put them. It also populates your “positions” drop down for module selection, and it’s where you will set up all your configuration options for your template’s styles.
  • The first line prevents the index.php page from being loaded directly by the browser – this is a security measure.
  • Your template.css file is going to hold all the css definitions to all your index.php’s html elements. You will also set up CSS in here or other CSS files to control your menus, links, and the HTML divs, spans, and paragraph html elements used in core joomla code.
  • You will define div classes, ids, span classes and ids, paragraph tags, link styles, menu styles, and all other HTML elements using CSS files. You do not have to use the name templat.css, but it is rather common. Alternatives might be layout.css, body.css, etc..
  • You should end up with a directory structure that looks identical to this. These are all the file’s we’ve talked about. If you want to distribute your
  • After you create a .zip file, you can log into your Joomla admin back end and install the template.
  • If everything goes well you’ll get this message – template successfully installed
  • You can check out these resources to info on
  • Developing joomla 1.6 templates

    1. 1. Developing Joomla 1.6 Templates Chad Windnagle [email_address] t
    2. 2. The Big Question: Do Joomla! 1.5 Templates = Joomla! 1.6 Templates ???
    3. 3. The Big Answer: No. But almost!
    4. 4. Few Differences: <ul><ul><ul><ul><li>Minor Code Changes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>New 1.6 Feature: Template Styles </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Advanced Style ACL </li></ul></ul></ul></ul>
    5. 5. Few Differences: <ul><li>Minor Modifications to templateDetails.xml </li></ul><ul><li>Add DocType Definition </li></ul><ul><li>Update install version number to 1.6 </li></ul><ul><li>Optional: Template configuration params (fieldsets - saved in params.ini) </li></ul>
    6. 6. Few Differences: <ul><li>Minor Modifications to index.php </li></ul><ul><li>New head jdoc include available </li></ul><ul><li>Optional: Ability to directly use param.ini values </li></ul>
    7. 7. Few Differences:
    8. 8. Editing Template Parameters
    9. 9. Editing Template Parameters
    10. 10. What is a template, anyway? “ The Joomla template is a series of files within the CMS that control the presentation of the content.” -Barrie North,
    11. 11. What Tools Do I Need? <ul><li>Localhost or Web Hosting </li></ul><ul><li>Local: MAMP (Mac), WAMP / XAMMP (PC) </li></ul><ul><li>HTML / CSS Editor </li></ul><ul><li>Dreamweaver, TextMate, Notepad++ </li></ul><ul><li>FTP Application </li></ul><ul><li>FileZilla (Mac/PC), Transmit (Mac) </li></ul><ul><li>Image Editor </li></ul><ul><li>Photoshop, Fireworks, Gimp (all platforms) </li></ul>
    12. 12. Template Elements <ul><li>PHP Code </li></ul><ul><li>CSS Code </li></ul><ul><li>Joomla API Code </li></ul><ul><li>Images </li></ul><ul><li>Additional Libraries (JS, JQuery, Ajax, etc.) </li></ul>
    13. 13. What, Where, & Why? <ul><li>index.php </li></ul><ul><li>index.html </li></ul><ul><li>params.ini </li></ul><ul><li>template_thumbnail.png </li></ul><ul><li>template_preview.png </li></ul><ul><li>templateDetails.xml </li></ul><ul><li>css </li></ul><ul><ul><li>template.css </li></ul></ul><ul><ul><li>index.html </li></ul></ul><ul><ul><li>css/* </li></ul></ul><ul><li>images </li></ul><ul><ul><li>index.html </li></ul></ul><ul><ul><li>images/* </li></ul></ul><JoomlaRoot>/templates/tmpl_sgo
    14. 14. index.php – contents <ul><li>DocType </li></ul><ul><li>Header </li></ul><ul><ul><li>Stylesheets </li></ul></ul><ul><ul><li>Libraries </li></ul></ul><ul><ul><li>Header Jdoc </li></ul></ul><ul><li>Body </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>Module Jdoc </li></ul></ul><ul><ul><li>Component Jdoc </li></ul></ul><ul><ul><li>Message Jdoc </li></ul></ul><ul><ul><li>PHP Code </li></ul></ul>
    15. 15. index.php
    16. 16. templateDetails.xml - contents <ul><li>DocType </li></ul><ul><li>Install Parameters </li></ul><ul><ul><li>Author Info </li></ul></ul><ul><ul><li>Define Directory Structure (files and folders) </li></ul></ul><ul><ul><li>Define all Module Positions </li></ul></ul><ul><ul><li>Define all Config Elements </li></ul></ul>Tells Joomla What To Do
    17. 17. templateDetails.xml
    18. 18. template.css - contents <ul><li>Body CSS </li></ul><ul><li>HTML Div Class / ID CSS </li></ul><ul><li>Menu CSS </li></ul>Controls the layout, look and feel
    19. 19. template.css
    20. 20. Packaging
    21. 21. Installing
    22. 22. Installing
    23. 23. Free Resources <ul><li> </li></ul><ul><li>Docs on all things templating </li></ul><ul><li> </li></ul><ul><li>Comprehensive template tutorial for Joomla 1.6, includes sample template files. </li></ul>