Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Joomla Template Development
Semelhante a Joomla Template Development (20)
Mais de Linda Coonen
Mais de Linda Coonen (15)
Último
Último (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