Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TEMPLATE DEVELOPMENT
                             Robert Jacobi, Arc Technology Group




Tuesday, February 17, 2009      ...
THE PIECES

    • Directory              Structure
    • templateDetails.xml

    • params.ini

    • index.php

    • sty...
DIRECTORY STRUCTURE


    • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla
        %21_template
    • Template   ...
DIRECTORY STRUCTURE


    • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla
        %21_template
    • Template   ...
IMPORTANT FILES

    • templateDetails.xml*

    • index.php*

    • template_thumbnail.png

    • params.ini

    • style...
IMPORTANT FILES

    • templateDetails.xml*

    • index.php*

    • template_thumbnail.png

    • params.ini

    • style...
TEMPLATEDETAILS.XML


    • <?xml              version=quot;1.0quot; encoding=quot;utf-8quot;?>
    • <!DOCTYPE       inst...
DESCRIPTION ELEMENTS

    • <name>tba</name>

    • <creationDate>2009-02-01</creationDate>

    • <author>Arc Technology ...
FILES AND POSITIONS



    • <files><filename>relative_path/file_name</filename></files>

    • <positions><position>name<...
PARAMS



    • http://docs.joomla.org/Tutorial:Template_parameters

    • <params><param         ...>...</param></params>...
PARAMS AND PARAMS.INI

    • <params>

    • <param     name=quot;templateColorquot; type=quot;listquot; default=quot;whit...
PARAMS AND PARAMS.INI



    • templateColor=white




Tuesday, February 17, 2009               10
PARAMS AND PARAMS.INI



    • templateColor=white




Tuesday, February 17, 2009               10
INDEX.PHP

    • Restrict               access and describe document
    • <?php              defined( '_JEXEC' ) or die( ...
INDEX.PHP

    • Add            header code and css
    • <head>

    • <jdoc:include          type=quot;headquot; />
    ...
INDEX.PHP

    • Add            modules and component
    • <body>

                   <jdoc:include type=quot;modulesquot...
INDEX.PHP

    • Add            modules and component
    • <body>

                   <jdoc:include type=quot;modulesquot...
ZIP IT!



    • Zip         up the new template directory
    • Install           template on to your Joomla instance



...
ZIP IT!



    • Zip         up the new template directory
    • Install           template on to your Joomla instance



...
ZIP IT!



    • Zip         up the new template directory
    • Install           template on to your Joomla instance



...
TAYLOR BRUCE INDEX.PHP

    • Header                 changes from basic template
    • <link  rel=quot;stylesheetquot; hre...
TAYLOR BRUCE INDEX.PHP


    • <?php   echo $this->baseurl . '/templates/' . $this->template . '/
        images/taylor-br...
TAYLOR BRUCE INDEX.PHP


    • <?php   echo $this->baseurl . '/templates/' . $this->template . '/
        images/taylor-br...
ADD IMAGES



    • Are          these listed in templateDetails.xml?




Tuesday, February 17, 2009                      ...
ADD IMAGES



    • Are          these listed in templateDetails.xml?




Tuesday, February 17, 2009                      ...
ADD CSS

    • Make             sure about templateDetails.xml
    • style.css

    • black.css

    • white.css

    • ed...
ADD CSS

    • Make             sure about templateDetails.xml
    • style.css

    • black.css

    • white.css

    • ed...
ADD CSS

    • Make             sure about templateDetails.xml
    • style.css

    • black.css

    • white.css

    • ed...
ADD CSS

    • Make             sure about templateDetails.xml
    • style.css

    • black.css

    • white.css

    • ed...
ADD CSS

    • Make             sure about templateDetails.xml
    • style.css

    • black.css

    • white.css

    • ed...
TBA HOME PAGE



    • FrontPage              SlideShow (Commercial)
    • Extended               Menu (GPL)




Tuesday, ...
TBA HOME PAGE



    • FrontPage              SlideShow (Commercial)
    • Extended               Menu (GPL)




Tuesday, ...
ADVANCED TOPICS STYLES

    • Module                 Styles
         • none. Output               the raw Module content w...
ADVANCED TOPICS
                               PARAMETERS


    • For         template customization
    • Common         ...
ADVANCED TOPICS
                               PARAMETERS


    • For         template customization
    • Common         ...
ADVANCED TOPICS
                              OUTPUT OVERRIDE


    • http://developer.joomla.org/tutorials/165-understand...
THANK YOU




Tuesday, February 17, 2009               23
Upcoming SlideShare
Loading in …5
×

Joomla Template Development

11,858 views

Published on

How to develop a template using Joomla by Robert Jacobi, ARC Technology Group for JoomlaChicago User Group. February, 2009.

Published in: Technology
  • good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice tutorial, cover the very basics to build a joomla template =)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • how to acces module override...?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Joomla Template Development

  1. 1. TEMPLATE DEVELOPMENT Robert Jacobi, Arc Technology Group Tuesday, February 17, 2009 1
  2. 2. THE PIECES • Directory Structure • templateDetails.xml • params.ini • index.php • style.css Tuesday, February 17, 2009 2
  3. 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. 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. 5. IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
  6. 6. IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
  7. 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. 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. 9. FILES AND POSITIONS • <files><filename>relative_path/file_name</filename></files> • <positions><position>name</position></positions> Tuesday, February 17, 2009 7
  10. 10. PARAMS • http://docs.joomla.org/Tutorial:Template_parameters • <params><param ...>...</param></params> Tuesday, February 17, 2009 8
  11. 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. 12. PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10
  13. 13. PARAMS AND PARAMS.INI • templateColor=white Tuesday, February 17, 2009 10
  14. 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. 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. 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. 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. 18. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
  19. 19. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
  20. 20. ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
  21. 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. 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. 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. 24. ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
  25. 25. ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
  26. 26. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
  27. 27. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
  28. 28. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
  29. 29. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
  30. 30. ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
  31. 31. TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
  32. 32. TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
  33. 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. 34. ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
  35. 35. ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
  36. 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. 37. THANK YOU Tuesday, February 17, 2009 23

×