Slide 1
Joomla! Day UK 2009
Joomla! Day UK 2009
Basic Template Modifications
Chris Davenport
Joomla! Core Team
Providing a flexible platform for digital publishing and
collaboration.
Choosing a template
Choose primarily for layoutIgnore colourIgnore 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 directoryin the
[joomla-root]/templates directoryCopy the template directoryThen
paste it under a new name
How to copy a template 2
Copy xx-XX.tpl_[old-template].inito
xx-XX.tpl_[new-template].ini
Look for language files in:[joomla-root]/language/xx-XX
and[joomla-root]/administrator/language/xx-XXwhere xx-XX is the
language codeeg. en-GB is British English
Make copies of any language files needed.
How to copy a template 3
rhuk_milkyway11/20/06Andy
[email protected]://www.rockettheme.comGNU/GPL1.0.2TPL_RHUK_MILKYWAY
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.contentheadingWith
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 nameModule chrome styles
Module chrome
Core chrome styles
Module Title ... module output here ...
Module Title ... module output here ...
Module chrome in action
Module chrome: xhtmlCSS class: moduletableModule chrome:
xhtmlSuffix: _textCSS class: moduletable_textModule chrome:
roundedCSS class: moduleModule chrome: roundedSuffix: _menuCSS
class: module_menu
Module Class Suffix
Enter the suffix hereImportant: You can enter a leading
space
Module Manager Module: [Edit]
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 theJoomla!
Electronic Documentation Licensehttp://docs.joomla.org/JEDL
Click to edit Subject titleClick to edit Speaker Name
Click to edit Speaker Company
Click to edit Position
Click to edit Joomla! Community Position
