Joomla Day UK 2009 Basic Templates

Uploaded on

Joomla basic template modifications presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.

Joomla basic template modifications presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Joomla! Day UK 2009
  • 2. Joomla! Day UK 2009 Basic Template Modifications Providing a flexible platform for digital publishing and collaboration. Chris Davenport Joomla! Core Team
  • 3. Choosing a template Choose primarily for layout Ignore colour Ignore actual images, as long as image sizes are correct
  • 4. Core templates Milky Way Beez JA Purity
  • 5. Copying a core template
      • Tip: Never modify a core template – take a copy first, then modify the copy.
      • Bad news: There is no “Copy” button.
  • 6. How to copy a template 1 Each template lives in a separate directory in the [joomla-root]/templates directory Copy the template directory Then paste it under a new name
  • 7. How to copy a template 2 Copy xx-XX.tpl_[old-template].ini to xx-XX.tpl_[new-template].ini Look for language files in: [joomla-root]/language/xx-XX and [joomla-root]/administrator/language/xx-XX where xx-XX is the language code eg. en-GB is British English
      • Make copies of any language files needed.
  • 8. How to copy a template 3 <install version=&quot;1.5&quot; type=&quot;template&quot;> <name> rhuk_milkyway </name> <creationDate>11/20/06</creationDate> <author>Andy Miller</author> <authorEmail></authorEmail> <authorUrl></authorUrl> <copyright></copyright> <license>GNU/GPL</license> <version>1.0.2</version> <description>TPL_RHUK_MILKYWAY</description> Edit templateDetails.xml Change this to match the new directory name
  • 9. How to copy a template 4
    • Unfortunately, there are some places where the name of the template is hard-wired into the template code.
    • Edit index.php and replace “rhuk_milkyway” or “beez” with the new name of your template.
  • 10. Tools
  • 11. Web developer toolbar
  • 12. Template parameters
  • 13. Changing logos and images
    • Find the image you want to change.
    • Web Developer: Images -> View image information.
    • Create a new image the same size and the same name .
    • Copy your new image over the top of the old one.
    • Refresh your browser.
  • 14. Changing the favicon
    • Create a 16 x 16 pixel image.
    • Convert it to .ico format.
    • Place it in the Joomla root or the template root.
    • It's cached so you must do a browser refresh.
  • 15. Layout overrides
  • 16. Core CSS classes
    • Component layouts
    • Component layout overrides
    • Module layouts
    • Module layout overrides
    • Module chrome
    • Pagination overrides
    • Templates
  • 17. Component CSS classes .componentheading .contentheading .small .createdate .modifydate .readon .contentheading With Beez overrides, this becomes .createdby
  • 18. Use the tools
  • 19. Finding module positions http://localhost/index.php ?tp=1 If there are already query parameters: http://localhost/index.php?option=com_content........&Itemid=27 &tp=1 Module position name Module chrome styles
  • 20. Module chrome
  • 21. Core chrome styles <jdoc:include type=”modules” name=”left” style=”none” /> <jdoc:include type=”modules” name=”left” style=”xhtml” /> <jdoc:include type=”modules” name=”left” style=”rounded” /> <jdoc:include type=”modules” name=”left” /> <div class=&quot;moduletable&quot;> <h3>Module Title</h3> ... module output here ... </div> <div class=&quot;module&quot;> <div> <div> <div> <h3>Module Title</h3> ... module output here ... </div> </div> </div> </div>
  • 22. Module chrome in action Module chrome: xhtml CSS class: moduletable Module chrome: xhtml Suffix: _text CSS class: moduletable_text Module chrome: rounded CSS class: module Module chrome: rounded Suffix: _menu CSS class: module_menu
  • 23. Module Class Suffix <div class=”moduletable_text”> Module Manager -> Module: [Edit] Enter the suffix here Important: You can enter a leading space and it will be added to the DIV here
  • 24. Bits and pieces Adding a prefix to the page title. $this->setTitle( 'myprefix - ' . $this->getTitle() ); Removing the “Powered by Joomla!” link in the Milky Way and Beez templates Edit the template index.php and remove it. Removing the Joomla copyright notice at the bottom of all the core templates Disable the “Footer” module using the Module Manager. Note: You must not remove the copyright notice from the Joomla source code files Changing the “generator” tag in the HTML head. $this->setGenerator( 'my-generator-tag' );
  • 25. Template modification Questions?
  • 26. Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic Documentation License