SlideShare a Scribd company logo

Joomla Day Austin Part 3

Download as PPT, PDF
Kyle Ledbetter, profile picture
Kyle Ledbetter

Joomla Day Austin Texas 2011 - Part 3

TechnologyNews & Politics
1 of 49
Downloaded 47 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
 
Template Time! - index.php from index.html - component.php - templateDetails.xml
index.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?> <?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; >
index.php head <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head>
Replace Placeholders w/ Joomla Tags <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quot;> <a href=&quot;#&quot;>Home</a> </li> <li class=&quot;item-2&quot;> <a href=&quot;#&quot;>Minis</a> </li> <li class=&quot;item-3&quot;> <a href=&quot;#&quot;>Programs</a> </li> <li class=&quot;item-13&quot;> <a href=&quot;#&quot;>Facebook</a> </li> <li class=&quot;item-14&quot;> <a href=&quot;#&quot;>Twitter</a> </li> </ul><!--End Placeholder--> Becomes: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; />
Module Tag Styles Menus don’t need div wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; /> Banners need the wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; />
Simple Conditionals <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?>
Conent/Component Code <div id=&quot;content&quot; class=&quot;width-65&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;before&quot; style=&quot;xhtml&quot; /> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;after&quot; style=&quot;xhtml&quot; /> <div class=&quot;clr&quot;></div> </div>
Don’t forget debug! Place a debug module position right before the </body> <jdoc:include type=&quot;modules&quot; name=&quot;debug&quot; style=&quot;xhtml&quot; />
Content Conditional If Sidebar “ width-65” will make the content smaller and float left, so only use if there’s a module in sidebar: <div id=&quot;content&quot; class=&quot;width-65&quot;> becomes: <div id=&quot;content&quot; <?php if($this->countModules('sidebar')) : ?> class=&quot;width-65&quot; <?php endif; ?>>
Dynamic Copyright <p>&copy; 2011 Minis and Friends. All rights reserved.</p> becomes: <p>&copy; <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. All rights reserved.</p>
Useful Variables /* The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JRequest::getCmd('view', '');$layout = JRequest::getCmd('layout', '');$task = JRequest::getCmd('task', '');$itemid = JRequest::getCmd('Itemid', '');/* The following 6 lines set a variable to true if we're on the site default menu item (home) */$menu = & JSite::getMenu();if ($menu->getActive() == $menu->getDefault()) :$active = &quot;homepage&quot;;else:$active = &quot;subpage&quot;;endif;
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
Echo Variables as Body Classes <body id=&quot;site&quot; class=&quot;<?php echo $option . &quot; view-&quot; . $view . &quot; layout-&quot; . $layout . &quot; task-&quot; . $task . &quot; itemid-&quot; . $itemid . &quot; &quot; . $active;?>&quot;> which will result in something like: <body id=&quot;site&quot; class=&quot;com_content view-category layout-blog task- itemid-65 homepage&quot;> which can be extremely useful styling hooks when the markup of the page lacks taxonomy
template_preview.png 640x384px .png
template_thumbnail.png 206x150px .png
Language Files create directories: /language/en-GB/ 2 files: en-GB.tpl_ minis .ini (language for template) en-GB.tpl_ minis .sys.ini (language for parameters)
templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> </extension>
templateDetails.xml <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Co pyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description>
templateDetails.xml <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files>
templateDetails.xml <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages>
templateDetails.xml <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> < these match these >
templateDetails.xml <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config>
Complete templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Copyright 2011 Minis and Frien ds. All rights reserved.</ copyright> <description>Minis and Friends Template</description> <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files> <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages> <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config> </extension>
Create favicon.gif
Favicon Generator
Template Directory
Zip it up!
Install & Cross Fingers
Success!
HTML Template Overrides - Don’t hack the core! - Change views from MVC components
Change a core output I don’t want an edit icon and I want it to float next to the title
Find the view
Copy into your template
Edit to your liking
Andy’s Alternate “Templatization” Start from scratch? Start with a Template Framework? Development Options:
Pros for “Starting from Scratch” “Starting from Scratch” Fast development process if design is simple Don’t need to learn a framework Faster performance No design restrictions
Pros for “Starting with Framework” “ Starting with Framework” Faster development if you are already familiar with the template framework Built in styling taken care off Lots of functionality for free Base template to start from
 
 
index.php
 
templateDetails.xml
template-options.xml
style configuration
 
 

More Related Content

PPT
CSS Technieken Toegelicht
Tweepixels
 
PPT
Joomla Day Austin Part 2
Kyle Ledbetter
 
PPT
Creación aplicación Web base struts2
Pablo Andres Cáceres Ferreira
 
PPT
Manual al-aire
toponerae
 
PPT
Ph pmysql
Mhail Djie
 
PDF
Thinking about CSS Architecture
拓樹 谷
 
ODP
Form refactoring
Manuel Baldassarri
 
PDF
CSS設計の理想と現実
拓樹 谷
 
CSS Technieken Toegelicht
Tweepixels
 
Joomla Day Austin Part 2
Kyle Ledbetter
 
Creación aplicación Web base struts2
Pablo Andres Cáceres Ferreira
 
Manual al-aire
toponerae
 
Ph pmysql
Mhail Djie
 
Thinking about CSS Architecture
拓樹 谷
 
Form refactoring
Manuel Baldassarri
 
CSS設計の理想と現実
拓樹 谷
 

What's hot (15)

PDF
Professional Web Development
Joseph Chiang
 
PPT
Presentation1
Tom Flo
 
PPTX
Html5
Mirko Fichtner
 
PPT
Yurany presentacion
yurany1016
 
PDF
メンテナブルでありつづけるためのCSS設計
拓樹 谷
 
DOCX
Valle San Giovanni
Stefano Ulissi
 
PPTX
Taller de PHP + Code Igniter
Crysfel Villa
 
PPT
Spring Capitulo 04
Diego Pacheco
 
PDF
CSS Components
拓樹 谷
 
PDF
Why Sass?
拓樹 谷
 
PPS
Mario Benedetti. No te rindas
Manuel Gimon
 
PDF
My four preferences in Perl Web practices
Andrew Shitov
 
ODP
Drupal Theming Hans Rossel
Hans Rossel
 
PPT
databaseapplication.ppt
webhostingguy
 
PDF
Basic HTML
Md Rubel Hossain
 
Professional Web Development
Joseph Chiang
 
Presentation1
Tom Flo
 
Html5
Mirko Fichtner
 
Yurany presentacion
yurany1016
 
メンテナブルでありつづけるためのCSS設計
拓樹 谷
 
Valle San Giovanni
Stefano Ulissi
 
Taller de PHP + Code Igniter
Crysfel Villa
 
Spring Capitulo 04
Diego Pacheco
 
CSS Components
拓樹 谷
 
Why Sass?
拓樹 谷
 
Mario Benedetti. No te rindas
Manuel Gimon
 
My four preferences in Perl Web practices
Andrew Shitov
 
Drupal Theming Hans Rossel
Hans Rossel
 
databaseapplication.ppt
webhostingguy
 
Basic HTML
Md Rubel Hossain
 
Ad

More from Kyle Ledbetter (13)

PDF
Joomla 3.0 Keynote
Kyle Ledbetter
 
PDF
Bootstrapping Joomla 3.0
Kyle Ledbetter
 
PDF
Projectfork 4.0
Kyle Ledbetter
 
ZIP
Joomla User eXperience - Joomla Day NYC 2011
Kyle Ledbetter
 
PPT
Joomla Day Austin Part 4
Kyle Ledbetter
 
PPT
Joomla Day Austin Part 1
Kyle Ledbetter
 
KEY
JUX - Joomla User eXperience
Kyle Ledbetter
 
PPTX
Making Joomla's Admin Interface Awesome
Kyle Ledbetter
 
PPTX
Mobile Your Joomla Site
Kyle Ledbetter
 
PPTX
Transform Your Joomla Admin
Kyle Ledbetter
 
PPTX
Mobilize Joomla
Kyle Ledbetter
 
PPT
Manage Your Projects Better With Projectfork
Kyle Ledbetter
 
PPT
Web Design Essentials
Kyle Ledbetter
 
Joomla 3.0 Keynote
Kyle Ledbetter
 
Bootstrapping Joomla 3.0
Kyle Ledbetter
 
Projectfork 4.0
Kyle Ledbetter
 
Joomla User eXperience - Joomla Day NYC 2011
Kyle Ledbetter
 
Joomla Day Austin Part 4
Kyle Ledbetter
 
Joomla Day Austin Part 1
Kyle Ledbetter
 
JUX - Joomla User eXperience
Kyle Ledbetter
 
Making Joomla's Admin Interface Awesome
Kyle Ledbetter
 
Mobile Your Joomla Site
Kyle Ledbetter
 
Transform Your Joomla Admin
Kyle Ledbetter
 
Mobilize Joomla
Kyle Ledbetter
 
Manage Your Projects Better With Projectfork
Kyle Ledbetter
 
Web Design Essentials
Kyle Ledbetter
 
Ad

Joomla Day Austin Part 3

  • 1.  
  • 2.  
  • 3. Template Time! - index.php from index.html - component.php - templateDetails.xml
  • 4. index.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?> <?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;> <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; >
  • 5. index.php head <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head>
  • 6. Replace Placeholders w/ Joomla Tags <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quot;> <a href=&quot;#&quot;>Home</a> </li> <li class=&quot;item-2&quot;> <a href=&quot;#&quot;>Minis</a> </li> <li class=&quot;item-3&quot;> <a href=&quot;#&quot;>Programs</a> </li> <li class=&quot;item-13&quot;> <a href=&quot;#&quot;>Facebook</a> </li> <li class=&quot;item-14&quot;> <a href=&quot;#&quot;>Twitter</a> </li> </ul><!--End Placeholder--> Becomes: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; />
  • 7. Module Tag Styles Menus don’t need div wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; style=&quot;none&quot; /> Banners need the wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; />
  • 8. Simple Conditionals <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?> <?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quot;modules&quot; name=&quot;banner&quot; style=&quot;xhtml&quot; /><div class=&quot;clr&quot;></div></div><?php endif; ?>
  • 9. Conent/Component Code <div id=&quot;content&quot; class=&quot;width-65&quot;> <jdoc:include type=&quot;modules&quot; name=&quot;before&quot; style=&quot;xhtml&quot; /> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;after&quot; style=&quot;xhtml&quot; /> <div class=&quot;clr&quot;></div> </div>
  • 10. Don’t forget debug! Place a debug module position right before the </body> <jdoc:include type=&quot;modules&quot; name=&quot;debug&quot; style=&quot;xhtml&quot; />
  • 11. Content Conditional If Sidebar “ width-65” will make the content smaller and float left, so only use if there’s a module in sidebar: <div id=&quot;content&quot; class=&quot;width-65&quot;> becomes: <div id=&quot;content&quot; <?php if($this->countModules('sidebar')) : ?> class=&quot;width-65&quot; <?php endif; ?>>
  • 12. Dynamic Copyright <p>&copy; 2011 Minis and Friends. All rights reserved.</p> becomes: <p>&copy; <?php echo date('Y'); ?> <?php echo $app->getCfg('sitename'); ?>. All rights reserved.</p>
  • 13. Useful Variables /* The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JRequest::getCmd('view', '');$layout = JRequest::getCmd('layout', '');$task = JRequest::getCmd('task', '');$itemid = JRequest::getCmd('Itemid', '');/* The following 6 lines set a variable to true if we're on the site default menu item (home) */$menu = & JSite::getMenu();if ($menu->getActive() == $menu->getDefault()) :$active = &quot;homepage&quot;;else:$active = &quot;subpage&quot;;endif;
  • 14. component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
  • 15. component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following line loads the MooTools JavaScript Library */JHtml::_('behavior.framework', true);/* The following line gets the application object for things like displaying the site name */$app = JFactory::getApplication();?><?php echo '<?'; ?>xml version=&quot;1.0&quot; encoding=&quot;<?php echo $this->_charset ?>&quot;?><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;><html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; xml:lang=&quot;<?php echo $thi s->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; dir=&quot;<?php echo $this->direction; ?>&quot; > <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and content. --> <jdoc:include type=&quot;head&quot; /> <!-- The following line loads the template CSS file located in the template folder. --> <link rel=&quot;stylesheet&quot; href=&quot;<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css&quot; type=&quot;text/css&quot; /> </head> <body id=&quot;modal&quot;> <jdoc:include type=&quot;message&quot; /> <jdoc:include type=&quot;component&quot; /> </body> </html>
  • 16. Echo Variables as Body Classes <body id=&quot;site&quot; class=&quot;<?php echo $option . &quot; view-&quot; . $view . &quot; layout-&quot; . $layout . &quot; task-&quot; . $task . &quot; itemid-&quot; . $itemid . &quot; &quot; . $active;?>&quot;> which will result in something like: <body id=&quot;site&quot; class=&quot;com_content view-category layout-blog task- itemid-65 homepage&quot;> which can be extremely useful styling hooks when the markup of the page lacks taxonomy
  • 19. Language Files create directories: /language/en-GB/ 2 files: en-GB.tpl_ minis .ini (language for template) en-GB.tpl_ minis .sys.ini (language for parameters)
  • 20. templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> </extension>
  • 21. templateDetails.xml <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Co pyright 2011 Minis and Friends. All rights reserved.</copyright> <description>Minis and Friends Template</description>
  • 22. templateDetails.xml <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files>
  • 23. templateDetails.xml <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages>
  • 24. templateDetails.xml <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> < these match these >
  • 25. templateDetails.xml <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config>
  • 26. Complete templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1.7//DTD template 1.0//EN&quot; &quot; http://www.joomla.org/xml/dtd/1.7/template-install.dtd &quot;><extension version=&quot;1.7&quot; type=&quot;template&quot; client=&quot;site&quot;> <name>minis</name> <version>1.0</version> <creationDate>09/07/2011</creationDate> <author>Kyle Ledbetter and Andy Miller</author> <authorEmail> [email_address] </authorEmail> <authorUrl> http://minisandfriends.org < /authorUrl> <copyright>Copyright 2011 Minis and Frien ds. All rights reserved.</ copyright> <description>Minis and Friends Template</description> <files> <filename>component.php</filename> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <folder>css</folder> <folder>html</folder> <folder>images</folder> <folder>language</folder> </files> <languages folder=&quot;language&quot;> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</language> <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.sys.ini</language> </languages> <positions> <position>menu</position> <position>header</position> <position>banner</position> <position>above</position> <position>inset</position> <position>before</position> <position>after</position> <position>sidebar</position> <position>below</position> <position>footer-left</position> <position>footer-right</position> <position>footer-menu</position> <position>debug</position> </positions> <config> <fields name=&quot;params&quot;> <fieldset name=&quot;settings&quot;> <field name=&quot;banner&quot; type=&quot;radio&quot; default=&quot;0&quot; label=&quot;Banner&quot; description=&quot;Turn banner on or off&quot;> <option value=&quot;1&quot;>On</option> <option value=&quot;0&quot;>Off</option> </field> </fieldset> </fields> </config> </extension>
  • 31. Install & Cross Fingers
  • 33. HTML Template Overrides - Don’t hack the core! - Change views from MVC components
  • 34. Change a core output I don’t want an edit icon and I want it to float next to the title
  • 36. Copy into your template
  • 37. Edit to your liking
  • 38. Andy’s Alternate “Templatization” Start from scratch? Start with a Template Framework? Development Options:
  • 39. Pros for “Starting from Scratch” “Starting from Scratch” Fast development process if design is simple Don’t need to learn a framework Faster performance No design restrictions
  • 40. Pros for “Starting with Framework” “ Starting with Framework” Faster development if you are already familiar with the template framework Built in styling taken care off Lots of functionality for free Base template to start from
  • 41.  
  • 42.  
  • 44.  
  • 48.  
  • 49.  

Editor's Notes

  • #10: - make sure to include the “message” for system messages - “component” loads your main Joomla component - place modules before and after component for later convenience
  • #11: - this will allow the debug to appear if turned on, and is a great module position for javascript to be executed at the end of the page (like Google analytics)
  • #15: - this is used to load modal windows and for loading the component without the template around it - basically a stripped down version of your index.php
  • #16: - this is used to load modal windows and for loading the component without the template around it - basically a stripped down version of your index.php
  • #22: - don’t use an &amp; sign! must be &amp;amp; or “and”
  • #23: - include entire folders w/ &lt;folder&gt;
  • #28: - must be square - best if transparent gif
  • #29: - generates favicon.ico for you
  • #30: - directories can’t be empty, at least drop in an index.html
  • #31: - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • #32: - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • #33: - this is after setting up categories, blank articles, menus, and modules