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

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

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

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>rhuk@rockettheme.com.com</authorEmail> <authorUrl>http://www.rockettheme.com</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

10. Tools

11. Web developer toolbar http://addons.mozilla.org/firefox/60/

12. Template parameters

15. Layout overrides

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 http://docs.joomla.org/JEDL