More Related Content
What's hot
What's hot (20)
Similar to Joomla Template Development
Similar to Joomla Template Development (20)
More from Linda Coonen
More from Linda Coonen (15)
Recently uploaded
Recently uploaded (20)
Joomla Template Development
- 1. TEMPLATE DEVELOPMENT Robert Jacobi, Arc Technology Group Tuesday, February 17, 2009 1
- 2. THE PIECES • Directory Structure • templateDetails.xml • params.ini • index.php • style.css Tuesday, February 17, 2009 2
- 3. DIRECTORY STRUCTURE • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla %21_template • Template Name for Root • css/ • images/ Tuesday, February 17, 2009 3
- 4. DIRECTORY STRUCTURE • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla %21_template • Template Name for Root • css/ • images/ Tuesday, February 17, 2009 3
- 5. IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
- 6. IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
- 7. TEMPLATEDETAILS.XML • <?xml version=quot;1.0quot; encoding=quot;utf-8quot;?> • <!DOCTYPE install PUBLIC quot;-//Joomla! 1.5//DTD template 1.0//ENquot; quot;http://dev.joomla.org/xml/1.5/template-install.dtdquot;> • <install version=quot;1.5quot; type=quot;templatequot;> Tuesday, February 17, 2009 5
- 8. DESCRIPTION ELEMENTS • <name>tba</name> • <creationDate>2009-02-01</creationDate> • <author>Arc Technology Group</author> • <authorEmail>solutions@arctg.com</authorEmail> • <authorUrl>http://www.arctg.com</authorUrl> • <copyright>Arc Technology Group</copyright> Tuesday, February 17, 2009 6
- 9. FILES AND POSITIONS • <files><filename>relative_path/file_name</filename></files> • <positions><position>name</position></positions> Tuesday, February 17, 2009 7
- 10. PARAMS • http://docs.joomla.org/Tutorial:Template_parameters • <params><param ...>...</param></params> Tuesday, February 17, 2009 8
- 11. PARAMS AND PARAMS.INI • <params> • <param name=quot;templateColorquot; type=quot;listquot; default=quot;whitequot; label=quot;Template Colorquot; description=quot;Choose the template color.quot;> <option value=quot;whitequot;>White</option> <option value=quot;blackquot;>Black</option> </param> • </params> Tuesday, February 17, 2009 9
- 12. PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10
- 13. PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10
- 14. INDEX.PHP • Restrict access and describe document • <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> • <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtdquot;> • <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;<? php echo $this->language; ?>quot; lang=quot;<?php echo $this- >language; ?>quot; > Tuesday, February 17, 2009 11
- 15. INDEX.PHP • Add header code and css • <head> • <jdoc:include type=quot;headquot; /> • <link rel=quot;stylesheetquot; href=quot;<?php echo $this->baseurl ?>/ templates/mynewtemplate/css/style.cssquot; type=quot;text/cssquot; /> • </head> Tuesday, February 17, 2009 12
- 16. INDEX.PHP • Add modules and component • <body> <jdoc:include type=quot;modulesquot; name=quot;topquot; /> • <jdoc:include type=quot;componentquot; /> • <jdoc:include type=quot;modulesquot; name=quot;footerquot; /> • • </body></html> Tuesday, February 17, 2009 13
- 17. INDEX.PHP • Add modules and component • <body> <jdoc:include type=quot;modulesquot; name=quot;topquot; /> • <jdoc:include type=quot;componentquot; /> • <jdoc:include type=quot;modulesquot; name=quot;footerquot; /> • • </body></html> Tuesday, February 17, 2009 13
- 18. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
- 19. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
- 20. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
- 21. TAYLOR BRUCE INDEX.PHP • Header changes from basic template • <link rel=quot;stylesheetquot; href=quot;<?php echo $this->baseurl . '/ templates/' . $this->template . '/css/style.css' ?>quot; type=quot;text/cssquot; /> • <link rel=quot;stylesheetquot; href=quot;<?php $tplColor = $this->params->get( 'templateColor' ); echo $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor . '.css'; ?>quot; type=quot;text/cssquot; /> Tuesday, February 17, 2009 15
- 22. TAYLOR BRUCE INDEX.PHP • <?php echo $this->baseurl . '/templates/' . $this->template . '/ images/taylor-bruce-logo.gif' ?> • <?php if($this->countModules('debug')) : ?> <jdoc:include type=quot;modulesquot; name=quot;debugquot; /> <?php endif; ?> • <?php echo JHTML::_('date', 'now', '%Y' ) ?> Tuesday, February 17, 2009 16
- 23. TAYLOR BRUCE INDEX.PHP • <?php echo $this->baseurl . '/templates/' . $this->template . '/ images/taylor-bruce-logo.gif' ?> • <?php if($this->countModules('debug')) : ?> <jdoc:include type=quot;modulesquot; name=quot;debugquot; /> <?php endif; ?> • <?php echo JHTML::_('date', 'now', '%Y' ) ?> Tuesday, February 17, 2009 16
- 24. ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
- 25. ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
- 26. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
- 27. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
- 28. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
- 29. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
- 30. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
- 31. TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
- 32. TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
- 33. ADVANCED TOPICS STYLES • Module Styles • none. Output the raw Module content with no wrapping. • table. Output the module in a table. • horz. Output the module as a table inside an outer table. • xhtml. Output the module wrapped in div tags. • rounded. Output the module wrapped in nested div tags to support rounded corners. Tuesday, February 17, 2009 20
- 34. ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
- 35. ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
- 36. ADVANCED TOPICS OUTPUT OVERRIDE • http://developer.joomla.org/tutorials/165-understanding- output-overrides-in-joomla.html • Component Overrides • Module Overrides Tuesday, February 17, 2009 22
- 37. THANK YOU Tuesday, February 17, 2009 23