Joomla template design presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.
2. Joomla! Day UK 2009 Template Design Providing a flexible
platform for digital publishing and collaboration. Chris Davenport
Joomla! Core Team 3. Understanding templates Joomla has an
incredibly powerful template system, yet surprisingly few template
designers actually make use of this power. 4. Use a reset
script
-
- Tip: Always use a browser reset script.
-
- eg. Eric Meyer's reset.css
-
- http://meyerweb.com/eric/tools/css/reset/
You can be clever and use the Joomla API: $reset = '/templates/'
. $this->template . '/css/reset.css'; $this->addStylesheet(
$this->baseurl . $reset ); 5. Or use a CSS framework Examples:
http://www.blueprintcss.org http://developer.yahoo.com/yui/grids/
http://elements.projectdesigns.org/ http://www.wymstyle.org/en/
http://www.yaml.de/en/ http://code.google.com/p/css-boilerplate/ 6.
Template execution Template execution is a two-phase process. Phase
1: All PHP code is executed. Phase 2: All jdoc:include statements
are replaced.
See:http://docs.joomla.org/How_are_templates_executed%3F 7.
Template execution
Before execution After Phase 1 In phase 1 all the PHP code is
executed In phase 2 all the jdoc:include statements are replaced
8.
Main Menu
- ...... other HTML omitted ......
Template execution After Phase 2 9. What does it mean?
- Calls to $this->addScript() and similar API calls can be
placed anywhere in the template.
- jdoc:include statements can be constructed
programmatically.
Example: " /> More interesting example: /> These
attributes will be passed into the module chrome. 10. Module
execution order
- Modules are generally executed in the reverse order in which
they appear in the template.
- This means you can add stuff to the from within a module.
- But you can't add or modify a jdoc:include from within a
module.
11. Module chrome Applies to a module position Name of the
module position Module chrome Applies to an individual moduleName
of the module 12. Module chrome xhtml
Popular
- .... other HTML omitted ....
In black is the raw module output In red is the chrome wrapper
13. Module chrome rounded
Main Menu
- ...... other HTML omitted ......
In black is the raw module output In red is the chrome wrapper
14. Module chrome 15. Module chrome 16. Module chrome / ** * Custom
module chrome, echos the whole module in a
and the header in . The level of * the header can be
configured through a 'headerLevel' attribute of the tag. * Defaults
to if none given */ function modChrome_beezDivision($module,
&$params, &$attribs) { $headerLevel =
isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3;
if (!empty ($module->content)) : ?>
get('moduleclass_sfx'); ?>"> >>
You can access the template parameters using
$this->params->get( 'param-name' ); $this in a template is a
JDocumentHTML object. http://docs.joomla.org/JDocumentHTML 22.
Document properties
- Base URL ($this->baseurl)
- Template path ($this->template)
- Language code ($this->language)
- Right-to-left? ($this->direction)
- Description ($this->description)
23. Collapsing module positions Two module positions. Collapse only
if neither module position has any modules enabled in it. 24.
Collapsing module positions Two module positions with a separator
between them. Collapse only if neither module position has any
modules enabled in it. But you only want the divider if both module
positions have modules. 25. Using the application How to determine
if the user is viewing the front page 26. Sections and categories
$id = JRequest::getInt( 'id' ); $db =& JFactory::getDBO();
$query = 'SELECT cat.alias, sec.alias ' . 'FROM #__categories AS
cat ' . 'LEFT JOIN #__content AS cont ON cat.id = cont.catid ' .
'LEFT JOIN #__sections AS sec ON sec.id = cont.sectionid ' . 'WHERE
cont.id=' . (int)$id; $db->setQuery( $query ); $result =
$db->loadRow(); if (is_array( $result )) { $cat = $result[0];
$sec = $result[1]; } 27. Framework API Always use JFactory where
you can. $doc =& JFactory::getDocument();
Usehttp://api.joomla.org andhttp://docs.joomla.org/Framework 28.
JFactory
- Application (getApplication)
- configuration.php variables (getConfig)
- Others:http://docs.joomla.org/JFactory
29. Other useful API classes
30. Joomla template design Questions? 31. Copyright and Licence
Copyright 2009 Chris Davenport This presentation is available for
use under the Joomla! Electronic Documentation License
http://docs.joomla.org/JEDL
