joomla day uk 2009 template design presentation
DESCRIPTION
Joomla template design presentation given at Joomla Day UK 2009 in Maidstone, Kent, UK.TRANSCRIPT
- 1. Joomla! Day UK 2009
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.
- ...... 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
- .... other HTML omitted ....
In black is the raw module output In red is the chrome wrapper 13. Module chrome rounded
- ...... 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
- Base URL ($this->baseurl)
- Template path ($this->template)
- Language code ($this->language)
- Right-to-left? ($this->direction)
- Title ($this->title)
- Description ($this->description)
- Application (getApplication)
- configuration.php variables (getConfig)
- Database (getDBO)
- Session (getSession)
- URI (getURI)
- User (getUser)
- Others:http://docs.joomla.org/JFactory
- JBrowser
- JError
- JRequest
- JRoute
- JText
- JArrayHelper
- JDate
- JPane