Joomla! Day UK 2009 Basic Templates

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="1.5" type="template"> <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="moduletable"> <h3>Module Title</h3> ... module output here ... </div> <div class="module"> <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?