Joomla! Day UK 2009
Joomla! Day UK 2009 Template Design Providing a flexible platform for digital publishing and collaboration. Chris Davenpor...
Understanding templates Joomla has an incredibly powerful template system, yet surprisingly few template designers actuall...
Use a reset script <ul><ul><li>Tip: Always use a browser reset script. </li></ul></ul><ul><ul><li>eg. Eric Meyer's reset.c...
Or use a CSS framework Examples: http://www.blueprintcss.org http://developer.yahoo.com/yui/grids/ http://elements.project...
Template execution Template execution is a two-phase process. Phase 1: All PHP code is executed. <?php ..... ?> Phase 2: A...
Template execution <?php if ($this->countModules( 'left' )) : ?> <div id=&quot;leftcolumn&quot;> <jdoc:include type=&quot;...
<div id=&quot;leftcolumn&quot;> <div class=&quot;module_menu&quot;> <div> <div> <div><h3>Main Menu</h3> <ul class=&quot;me...
What does it mean? <ul><li>Calls to $this->addScript() and similar API calls can be placed anywhere in the template. </li>...
Module execution order <ul><li>Modules are generally executed in the reverse order in which they appear in the template. <...
Module chrome <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;rounded&quot; /> <jdoc:include type...
Module chrome – xhtml <div class=&quot;rightcolumn&quot;> <div class=&quot;moduletable&quot;> <h3>Popular</h3> <ul class=&...
Module chrome – rounded <div id=&quot;left&quot;> <div class=&quot;module&quot;> <div> <div> <div><h3>Main Menu</h3> <ul c...
Module chrome
Module chrome
Module chrome / ** * Custom module chrome, echos the whole module in a <div> and the header in <h{x}>. The level of * the ...
Module chrome <jdoc:include type=”modules” name=”left” style=”beezDivision” /> In the Beez template index.php: But try: <j...
Module chrome
Cascading module chrome function modChrome_sliders( $module, &$params, &$attribs ) { jimport('joomla.html.pane'); if ($att...
What can you access? JDocumentHTML Layout overrides have access to all variables in component and module views JSite JFact...
Template parameters <?php if ($this->params->get( 'showComponent' )) : ?> <jdoc:include type=&quot;component&quot; /> <?ph...
Document properties <ul><li>Base URL ($this->baseurl) </li></ul><ul><li>Template path ($this->template) </li></ul><ul><li>...
Collapsing module positions <?php if ($this->countModules( 'user1 or user2' )) : ?> <div class=&quot;user1user2&quot;> <jd...
Collapsing module positions <?php if ($this->countModules( 'user1 or user2' )) : ?> <div class=&quot;user1user2&quot;> <jd...
Using the application <?php $menu = & JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) { echo 'This is the...
Sections and categories $id = JRequest::getInt( 'id' ); $db =& JFactory::getDBO(); $query = 'SELECT cat.alias, sec.alias '...
Framework API Always use JFactory where you can. $doc =& JFactory::getDocument(); Use  http://api.joomla.org and  http://d...
JFactory <ul><li>Application (getApplication) </li></ul><ul><li>configuration.php variables (getConfig) </li></ul><ul><li>...
Other useful API classes <ul><li>JBrowser </li></ul><ul><li>JError </li></ul><ul><li>JRequest </li></ul><ul><li>JRoute </l...
Joomla template design Questions?
Copyright and Licence Copyright © 2009 Chris Davenport This presentation is available for use under the Joomla! Electronic...
Upcoming SlideShare
Loading in …5
×

Joomla! Day UK 2009 Template Design

2,798 views
2,726 views

Published on

Chris Davenport's presentation on Template Design from this year's Joomla! Day UK event

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,798
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
112
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Joomla! Day UK 2009 Template Design

  1. 1. Joomla! Day UK 2009
  2. 2. Joomla! Day UK 2009 Template Design Providing a flexible platform for digital publishing and collaboration. Chris Davenport Joomla! Core Team
  3. 3. Understanding templates Joomla has an incredibly powerful template system, yet surprisingly few template designers actually make use of this power.
  4. 4. Use a reset script <ul><ul><li>Tip: Always use a browser reset script. </li></ul></ul><ul><ul><li>eg. Eric Meyer's reset.css </li></ul></ul><ul><ul><li>http://meyerweb.com/eric/tools/css/reset/ </li></ul></ul>You can be clever and use the Joomla API: $reset = '/templates/' . $this->template . '/css/reset.css'; $this->addStylesheet( $this->baseurl . $reset );
  5. 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. 6. Template execution Template execution is a two-phase process. Phase 1: All PHP code is executed. <?php ..... ?> Phase 2: All jdoc:include statements are replaced. <jdoc:include type=”...” /> See: http://docs.joomla.org/How_are_templates_executed%3F
  7. 7. Template execution <?php if ($this->countModules( 'left' )) : ?> <div id=&quot;leftcolumn&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;rounded&quot; /> </div> <?php endif; ?> <div id=&quot;leftcolumn&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;rounded&quot; /> </div> 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. 8. <div id=&quot;leftcolumn&quot;> <div class=&quot;module_menu&quot;> <div> <div> <div><h3>Main Menu</h3> <ul class=&quot;menu&quot;><li id=&quot;current&quot; class=&quot;active item1&quot;> ...... other HTML omitted ...... </div> </div> </div> </div> </div> Template execution After Phase 2
  9. 9. What does it mean? <ul><li>Calls to $this->addScript() and similar API calls can be placed anywhere in the template. </li></ul><ul><li>jdoc:include statements can be constructed programmatically. </li></ul>Example: <jdoc:include type=&quot;modules&quot; name=&quot;<?php echo $module_position; ?>&quot; /> More interesting example: <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=”xhtml” attribs=”<?php echo $attribs; ?>” /> These attributes will be passed into the module chrome.
  10. 10. Module execution order <ul><li>Modules are generally executed in the reverse order in which they appear in the template. </li></ul><ul><li>This means you can add stuff to the <head> from within a module. </li></ul><ul><li>But you can't add or modify a jdoc:include from within a module. </li></ul>
  11. 11. Module chrome <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;rounded&quot; /> <jdoc:include type=&quot;module&quot; name=&quot;mymenu&quot; style=&quot;rounded&quot; /> Applies to a module position Name of the module position Module chrome Applies to an individual module Name of the module
  12. 12. Module chrome – xhtml <div class=&quot;rightcolumn&quot;> <div class=&quot;moduletable&quot;> <h3>Popular</h3> <ul class=&quot;mostread&quot;> <li class=&quot;mostread&quot;> .... other HTML omitted .... </div> </div> In black is the raw module output In red is the chrome “wrapper”
  13. 13. Module chrome – rounded <div id=&quot;left&quot;> <div class=&quot;module&quot;> <div> <div> <div><h3>Main Menu</h3> <ul class=&quot;menu&quot;><li id=&quot;current&quot; class=&quot;active item1&quot;> ...... other HTML omitted ...... </div> </div> </div> </div> </div> In black is the raw module output In red is the chrome “wrapper”
  14. 14. Module chrome
  15. 15. Module chrome
  16. 16. Module chrome / ** * Custom module chrome, echos the whole module in a <div> and the header in <h{x}>. The level of * the header can be configured through a 'headerLevel' attribute of the <jdoc:include /> tag. * Defaults to <h3> if none given */ function modChrome_beezDivision($module, &$params, &$attribs) { $headerLevel = isset($attribs['headerLevel']) ? (int) $attribs['headerLevel'] : 3; if (!empty ($module->content)) : ?> <div class=&quot;moduletable<?php echo $params->get('moduleclass_sfx'); ?>&quot;> <?php if ($module->showtitle) : ?> <h<?php echo $headerLevel; ?>><?php echo $module->title; ?></h<?php echo $headerLevel; ?>> <?php endif; ?> <?php echo $module->content; ?> </div> <?php endif; } Gets header level from headerLevel attribute Applies header level to header tag
  17. 17. Module chrome <jdoc:include type=”modules” name=”left” style=”beezDivision” /> In the Beez template index.php: But try: <jdoc:include type=”modules” name=”left” style=”beezDivision” headerLevel=”2” /> This will give exactly the same output as style=”xhtml” This will wrap the title in <h2> tags instead of <h3> tags. To use this in your template just copy [joomla-root]/templates/beez/html/modules.php to [joomla-root]/template/[your-template]/html/modules.php If you already have a modules.php file, then just copy-paste the modChrome_beezDivision function into it.
  18. 18. Module chrome
  19. 19. Cascading module chrome function modChrome_sliders( $module, &$params, &$attribs ) { jimport('joomla.html.pane'); if ($attribs['allowAllClose'] == 'false') $attribs['allowAllClose'] = false; if ($attribs['startTransition'] == 'false') $attribs['startTransition'] = false; $sliders = &JPane::getInstance( 'sliders', $attribs ); echo $sliders->startPanel( $module->title, 'module' . $module->id ); echo $module->content; echo $sliders->endPanel(); } <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;sliders rounded&quot; /> Extra module chrome style added here
  20. 20. What can you access? JDocumentHTML Layout overrides have access to all variables in component and module views JSite JFactory The whole Framework API
  21. 21. Template parameters <?php if ($this->params->get( 'showComponent' )) : ?> <jdoc:include type=&quot;component&quot; /> <?php endif; ?> 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. 22. Document properties <ul><li>Base URL ($this->baseurl) </li></ul><ul><li>Template path ($this->template) </li></ul><ul><li>Language code ($this->language) </li></ul><ul><li>Right-to-left? ($this->direction) </li></ul><ul><li>Title ($this->title) </li></ul><ul><li>Description ($this->description) </li></ul>
  23. 23. Collapsing module positions <?php if ($this->countModules( 'user1 or user2' )) : ?> <div class=&quot;user1user2&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;user1&quot; style=&quot;xhtml&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;user2&quot; style=&quot;xhtml&quot; /> </div> <?php endif; ?> Two module positions. Collapse only if neither module position has any modules enabled in it.
  24. 24. Collapsing module positions <?php if ($this->countModules( 'user1 or user2' )) : ?> <div class=&quot;user1user2&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;user1&quot; style=&quot;xhtml&quot; /> <?php if ($this->countModules( 'user1 and user2' )) : ?> <div class=&quot;divider&quot;></div> <?php endif; ?> <jdoc:include type=&quot;modules&quot; name=&quot;user2&quot; style=&quot;xhtml&quot; /> </div> <?php endif; ?> 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. 25. Using the application <?php $menu = & JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) { echo 'This is the front page'; } ?> How to determine if the user is viewing the front page <?php $menu = & JSite::getMenu(); if ($menu->getActive() == $menu->getDefault()) : ?> <div id=&quot;leftcolumn&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; style=&quot;rounded&quot; /> </div> <?php endif; ?>
  26. 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]; } <?php if ($sec == 'the-cms') : ?> <div id=&quot;thecms&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;thecms&quot; /> </div> <?php endif; ?>
  27. 27. Framework API Always use JFactory where you can. $doc =& JFactory::getDocument(); Use http://api.joomla.org and http://docs.joomla.org/Framework
  28. 28. JFactory <ul><li>Application (getApplication) </li></ul><ul><li>configuration.php variables (getConfig) </li></ul><ul><li>Database (getDBO) </li></ul><ul><li>Session (getSession) </li></ul><ul><li>URI (getURI) </li></ul><ul><li>User (getUser) </li></ul><ul><li>Others: http://docs.joomla.org/JFactory </li></ul>
  29. 29. Other useful API classes <ul><li>JBrowser </li></ul><ul><li>JError </li></ul><ul><li>JRequest </li></ul><ul><li>JRoute </li></ul><ul><li>JText </li></ul><ul><li>JArrayHelper </li></ul><ul><li>JDate </li></ul><ul><li>JPane </li></ul>
  30. 30. Joomla template design Questions?
  31. 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

×