Your SlideShare is downloading. ×
0
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,202

Published on

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

Published in: Technology
3 Comments
6 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total Views
11,202
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
600
Comments
3
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×