Joomla basic template modifications presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.
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 rhuk_milkyway 11/20/06Andy
[email protected]://www.rockettheme.comGNU/GPL1.0.2TPL_RHUK_MILKYWAY
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
http://addons.mozilla.org/firefox/60/ 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 thesame sizeand thesame name .
- Copy your new image over the top of the old one.
14. Changing the favicon
- Create a 16 x 16 pixel image.
- Convert it to .ico format.
-
- http://www.favicongenerator.com/
-
- http://www.htmlkit.com/services/favicon/
-
- http://tools.dynamicdrive.com/favicon/
- 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 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
Module Title ... module output here ...
Module Title ... module output here ...
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
Module Manager -> Module: [Edit] Enter the suffix here
Important: Youcanenter 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
