Joomla Day UK 2009 Basic Templates
Upcoming SlideShare
Loading in...5
×
 

Joomla Day UK 2009 Basic Templates

on

  • 3,200 views

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.

Statistics

Views

Total Views
3,200
Views on SlideShare
3,194
Embed Views
6

Actions

Likes
1
Downloads
66
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Joomla Day UK 2009 Basic Templates Joomla Day UK 2009 Basic Templates Presentation Transcript

  • Joomla! Day UK 2009
  • Joomla! Day UK 2009 Basic Template Modifications Providing a flexible platform for digital publishing and collaboration. Chris Davenport Joomla! Core Team
  • Choosing a template Choose primarily for layout Ignore colour Ignore actual images, as long as image sizes are correct
  • Core templates Milky Way Beez JA Purity
  • 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.
  • 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
  • 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.
  • 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
  • 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.
  • Tools
  • Web developer toolbar http://addons.mozilla.org/firefox/60/
  • Template parameters
  • 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.
  • Changing the favicon
    • Create a 16 x 16 pixel image.
    • Convert it to .ico format.
      • http://converticon.com/
      • http://www.favicongenerator.com/
      • http://www.htmlkit.com/services/favicon/
      • http://tools.dynamicdrive.com/favicon/
      • http://www.favicon.cc/
    • Place it in the Joomla root or the template root.
    • It's cached so you must do a browser refresh.
  • Layout overrides
  • Core CSS classes
    • Component layouts
    • Component layout overrides
    • Module layouts
    • Module layout overrides
    • Module chrome
    • Pagination overrides
    • Templates
  • Component CSS classes .componentheading .contentheading .small .createdate .modifydate .readon .contentheading With Beez overrides, this becomes .createdby
  • Use the tools
  • 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
  • Module chrome
  • 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>
  • 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
  • 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
  • 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' );
  • Template modification Questions?
  • Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic Documentation License http://docs.joomla.org/JEDL