• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Joomla Template Development
 

Joomla Template Development

on

  • 16,850 views

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

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

Statistics

Views

Total Views
16,850
Views on SlideShare
16,012
Embed Views
838

Actions

Likes
6
Downloads
596
Comments
3

17 Embeds 838

http://jmsgjoomla.blogspot.com 439
http://stks.or.th 70
http://jmsgtecnologias.blogspot.com 65
http://www.slideshare.net 63
http://www.djoomla.com 59
http://jmsgjoomla.blogspot.com.es 56
http://joomlachicago.com 34
http://jmsgjoomla.blogspot.mx 19
http://djoomla.com 8
http://www.joomlachicago.com 7
http://jmsgjoomla.blogspot.com.ar 6
http://www.e-presentations.us 3
http://www.stks.or.th 3
http://lj-toys.com 2
http://jmsgtecnologias.blogspot.com.es 2
http://translate.googleusercontent.com 1
http://jmsgtecnologias.blogspot.com.ar 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • good
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice tutorial, cover the very basics to build a joomla template =)
    Are you sure you want to
    Your message goes here
    Processing…
  • how to acces module override...?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Joomla Template Development Joomla Template Development Presentation Transcript

    • TEMPLATE DEVELOPMENT Robert Jacobi, Arc Technology Group Tuesday, February 17, 2009 1
    • THE PIECES • Directory Structure • templateDetails.xml • params.ini • index.php • style.css Tuesday, February 17, 2009 2
    • DIRECTORY STRUCTURE • http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla %21_template • Template Name for Root • css/ • images/ Tuesday, February 17, 2009 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
    • IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
    • IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4
    • 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
    • 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
    • FILES AND POSITIONS • <files><filename>relative_path/file_name</filename></files> • <positions><position>name</position></positions> Tuesday, February 17, 2009 7
    • PARAMS • http://docs.joomla.org/Tutorial:Template_parameters • <params><param ...>...</param></params> Tuesday, February 17, 2009 8
    • 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
    • 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( '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
    • 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
    • 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
    • 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
    • ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
    • ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
    • ZIP IT! • Zip up the new template directory • Install template on to your Joomla instance Tuesday, February 17, 2009 14
    • 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
    • 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
    • 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
    • ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
    • ADD IMAGES • Are these listed in templateDetails.xml? Tuesday, February 17, 2009 17
    • ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
    • ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
    • ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
    • ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
    • ADD CSS • Make sure about templateDetails.xml • style.css • black.css • white.css • editor.css Tuesday, February 17, 2009 18
    • TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
    • TBA HOME PAGE • FrontPage SlideShow (Commercial) • Extended Menu (GPL) Tuesday, February 17, 2009 19
    • 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
    • ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
    • ADVANCED TOPICS PARAMETERS • For template customization • Common in commercial templates Tuesday, February 17, 2009 21
    • 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
    • THANK YOU Tuesday, February 17, 2009 23