Joomla Template Development

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

IMPORTANT FILES • templateDetails.xml* • index.php* • template_thumbnail.png • params.ini • style.css • index.html Tuesday, February 17, 2009 4

TEMPLATEDETAILS.XML • <?xml version=\"1.0\" encoding=\"utf-8\"?> • <!DOCTYPE install PUBLIC \"-//Joomla! 1.5//DTD template 1.0//EN\" \"http://dev.joomla.org/xml/1.5/template-install.dtd\"> • <install version=\"1.5\" type=\"template\"> 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=\"templateColor\" type=\"list\" default=\"white\" label=\"Template Color\" description=\"Choose the template color.\"> <option value=\"white\">White</option> <option value=\"black\">Black</option> </param> • </params> Tuesday, February 17, 2009 9

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 \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd\"> • <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"<? php echo $this->language; ?>\" lang=\"<?php echo $this- >language; ?>\" > Tuesday, February 17, 2009 11

INDEX.PHP • Add header code and css • <head> • <jdoc:include type=\"head\" /> • <link rel=\"stylesheet\" href=\"<?php echo $this->baseurl ?>/ templates/mynewtemplate/css/style.css\" type=\"text/css\" /> • </head> Tuesday, February 17, 2009 12

INDEX.PHP • Add modules and component • <body> <jdoc:include type=\"modules\" name=\"top\" /> • <jdoc:include type=\"component\" /> • <jdoc:include type=\"modules\" name=\"footer\" /> • • </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

TAYLOR BRUCE INDEX.PHP • Header changes from basic template • <link rel=\"stylesheet\" href=\"<?php echo $this->baseurl . '/ templates/' . $this->template . '/css/style.css' ?>\" type=\"text/css\" /> • <link rel=\"stylesheet\" href=\"<?php $tplColor = $this->params->get( 'templateColor' ); echo $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor . '.css'; ?>\" type=\"text/css\" /> 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=\"modules\" name=\"debug\" /> <?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 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

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 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

Joomla Template Development

2 comments

Notes on slide 1

2 Favorites