Joomla Day UK 2009 Basic Templates


Published on

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

Published in: Technology, Business
  • Be the first to comment

Joomla Day UK 2009 Basic Templates

  1. 1. Joomla! Day UK 2009
  2. 2. Joomla! Day UK 2009 Basic Template Modifications Providing a flexible platform for digital publishing and collaboration. Chris Davenport Joomla! Core Team
  3. 3. Choosing a template Choose primarily for layout Ignore colour Ignore actual images, as long as image sizes are correct
  4. 4. Core templates Milky Way Beez JA Purity
  5. 5. Copying a core template <ul><ul><li>Tip: Never modify a core template – take a copy first, then modify the copy. </li></ul></ul><ul><ul><li>Bad news: There is no “Copy” button. </li></ul></ul>
  6. 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. 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 <ul><ul><li>Make copies of any language files needed. </li></ul></ul>
  8. 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. 9. How to copy a template 4 <ul><li>Unfortunately, there are some places where the name of the template is hard-wired into the template code. </li></ul><ul><li>Edit index.php and replace “rhuk_milkyway” or “beez” with the new name of your template. </li></ul>
  10. 10. Tools
  11. 11. Web developer toolbar
  12. 12. Template parameters
  13. 13. Changing logos and images <ul><li>Find the image you want to change. </li></ul><ul><li>Web Developer: Images -> View image information. </li></ul><ul><li>Create a new image the same size and the same name . </li></ul><ul><li>Copy your new image over the top of the old one. </li></ul><ul><li>Refresh your browser. </li></ul>
  14. 14. Changing the favicon <ul><li>Create a 16 x 16 pixel image. </li></ul><ul><li>Convert it to .ico format. </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Place it in the Joomla root or the template root. </li></ul><ul><li>It's cached so you must do a browser refresh. </li></ul>
  15. 15. Layout overrides
  16. 16. Core CSS classes <ul><li>Component layouts </li></ul><ul><li>Component layout overrides </li></ul><ul><li>Module layouts </li></ul><ul><li>Module layout overrides </li></ul><ul><li>Module chrome </li></ul><ul><li>Pagination overrides </li></ul><ul><li>Templates </li></ul>
  17. 17. Component CSS classes .componentheading .contentheading .small .createdate .modifydate .readon .contentheading With Beez overrides, this becomes .createdby
  18. 18. Use the tools
  19. 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. 20. Module chrome
  21. 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. 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. 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. 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. 25. Template modification Questions?
  26. 26. Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic Documentation License