joomla template development
DESCRIPTION
How to develop a template using Joomla by Robert Jacobi, ARC Technology Group for JoomlaChicago User Group. February, 2009.TRANSCRIPT
TEMPLATE DEVELOPMENTRobert Jacobi, Arc Technology Group
1Tuesday, February 17, 2009
THE PIECES
• Directory Structure
• templateDetails.xml
• params.ini
• index.php
• style.css
2Tuesday, February 17, 2009
DIRECTORY STRUCTURE
• http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla%21_template
• Template Name for Root
• css/
• images/
3Tuesday, February 17, 2009
DIRECTORY STRUCTURE
• http://docs.joomla.org/Tutorial:Creating_a_basic_Joomla%21_template
• Template Name for Root
• css/
• images/
3Tuesday, February 17, 2009
IMPORTANT FILES
• templateDetails.xml*
• index.php*
• template_thumbnail.png
• params.ini
• style.css
• index.html
4Tuesday, February 17, 2009
IMPORTANT FILES
• templateDetails.xml*
• index.php*
• template_thumbnail.png
• params.ini
• style.css
• index.html
4Tuesday, February 17, 2009
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">
5Tuesday, February 17, 2009
DESCRIPTION ELEMENTS
• <name>tba</name>
• <creationDate>2009-02-01</creationDate>
• <author>Arc Technology Group</author>
• <authorEmail>[email protected]</authorEmail>
• <authorUrl>http://www.arctg.com</authorUrl>
• <copyright>Arc Technology Group</copyright>
6Tuesday, February 17, 2009
FILES AND POSITIONS
• <files><filename>relative_path/file_name</filename></files>
• <positions><position>name</position></positions>
7Tuesday, February 17, 2009
PARAMS
• http://docs.joomla.org/Tutorial:Template_parameters
• <params><param ...>...</param></params>
8Tuesday, February 17, 2009
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>
9Tuesday, February 17, 2009
PARAMS AND PARAMS.INI
• templateColor=white
10Tuesday, February 17, 2009
PARAMS AND PARAMS.INI
• templateColor=white
10Tuesday, February 17, 2009
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; ?>" >
11Tuesday, February 17, 2009
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>
12Tuesday, February 17, 2009
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>
13Tuesday, February 17, 2009
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>
13Tuesday, February 17, 2009
ZIP IT!
• Zip up the new template directory
• Install template on to your Joomla instance
14Tuesday, February 17, 2009
ZIP IT!
• Zip up the new template directory
• Install template on to your Joomla instance
14Tuesday, February 17, 2009
ZIP IT!
• Zip up the new template directory
• Install template on to your Joomla instance
14Tuesday, February 17, 2009
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" />
15Tuesday, February 17, 2009
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' ) ?>
16Tuesday, February 17, 2009
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' ) ?>
16Tuesday, February 17, 2009
ADD IMAGES
• Are these listed in templateDetails.xml?
17Tuesday, February 17, 2009
ADD IMAGES
• Are these listed in templateDetails.xml?
17Tuesday, February 17, 2009
ADD CSS
• Make sure about templateDetails.xml
• style.css
• black.css
• white.css
• editor.css
18Tuesday, February 17, 2009
ADD CSS
• Make sure about templateDetails.xml
• style.css
• black.css
• white.css
• editor.css
18Tuesday, February 17, 2009
ADD CSS
• Make sure about templateDetails.xml
• style.css
• black.css
• white.css
• editor.css
18Tuesday, February 17, 2009
ADD CSS
• Make sure about templateDetails.xml
• style.css
• black.css
• white.css
• editor.css
18Tuesday, February 17, 2009
ADD CSS
• Make sure about templateDetails.xml
• style.css
• black.css
• white.css
• editor.css
18Tuesday, February 17, 2009
TBA HOME PAGE
• FrontPage SlideShow (Commercial)
• Extended Menu (GPL)
19Tuesday, February 17, 2009
TBA HOME PAGE
• FrontPage SlideShow (Commercial)
• Extended Menu (GPL)
19Tuesday, February 17, 2009
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.
20Tuesday, February 17, 2009
ADVANCED TOPICS PARAMETERS
• For template customization
• Common in commercial templates
21Tuesday, February 17, 2009
ADVANCED TOPICS PARAMETERS
• For template customization
• Common in commercial templates
21Tuesday, February 17, 2009
ADVANCED TOPICSOUTPUT OVERRIDE
• http://developer.joomla.org/tutorials/165-understanding-output-overrides-in-joomla.html
• Component Overrides
• Module Overrides
22Tuesday, February 17, 2009
THANK YOU
23Tuesday, February 17, 2009