Template Time! <ul><li>- index.php from index.html </li></ul><ul><li>- component.php </li></ul><ul><li>- templateDetails.x...
index.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following lin...
index.php head <head> <!-- The following JDOC Head tag loads all the header and meta information from your site config and...
Replace Placeholders w/ Joomla Tags <!--Begin Placeholder--> <ul class=&quot;menu&quot;> <li class=&quot;item-1 active&quo...
Module Tag Styles Menus don’t need div wrappers so we use: <jdoc:include type=&quot;modules&quot; name=&quot;menu&quot; st...
Simple Conditionals <ul><li><?php if($this->countModules('banner')) : ?><div id=&quot;banner&quot;><jdoc:include type=&quo...
Conent/Component Code <div id=&quot;content&quot; class=&quot;width-65&quot;> <jdoc:include type=&quot;modules&quot; name=...
Don’t forget debug! Place a debug module position right before the </body> <jdoc:include type=&quot;modules&quot; name=&qu...
Content Conditional If Sidebar “ width-65” will make the content smaller and float left, so only use if there’s a module i...
Dynamic Copyright <p>&copy; 2011 Minis and Friends.  All rights reserved.</p> becomes: <p>&copy; <?php echo date('Y'); ?> ...
Useful Variables /* The following 5 lines get current page variables */$option = JRequest::getCmd('option', '');$view = JR...
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following...
component.php <?php/* The following line denies direct access to this PHP file */defined('_JEXEC') or die;/* The following...
Echo Variables as Body Classes <body id=&quot;site&quot; class=&quot;<?php echo $option . &quot; view-&quot; . $view . &qu...
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_ mini...
templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//Joomla! 1....
templateDetails.xml <name>minis</name>  <version>1.0</version>  <creationDate>09/07/2011</creationDate>  <author>Kyle Ledb...
templateDetails.xml <files>  <filename>component.php</filename>  <filename>favicon.ico</filename>  <filename>index.php</fi...
templateDetails.xml <languages folder=&quot;language&quot;>  <language tag=&quot;en-GB&quot;>en-GB/en-GB.tpl_minis.ini</la...
templateDetails.xml <positions>  <position>menu</position>  <position>header</position>  <position>banner</position>  <pos...
templateDetails.xml <config>  <fields name=&quot;params&quot;>  <fieldset name=&quot;settings&quot;>   <field name=&quot;b...
Complete templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><!DOCTYPE install PUBLIC &quot;-//J...
Create favicon.gif
Favicon Generator
Template Directory
Zip it up!
Install & Cross Fingers
Success!
HTML Template Overrides <ul><li>- Don’t hack the core! </li></ul><ul><li>- Change views from MVC components </li></ul>
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” <ul><li>Start from scratch? </li></ul><ul><li>Start with a Template Framework? </li></ul...
Pros  for “Starting from Scratch” “Starting from Scratch” <ul><li>Fast development process if design is simple </li></ul><...
Pros  for  “Starting with Framework” “ Starting with Framework” <ul><li>Faster development if you are already familiar wit...
 
 
index.php
 
templateDetails.xml
template-options.xml
style configuration
 
 
Upcoming SlideShare
Loading in …5
×

Joomla Day Austin Part 3

2,114 views

Published on

Joomla Day Austin Texas 2011 - Part 3

Published in: Technology, News & Politics
  • Be the first to comment

Joomla Day Austin Part 3

  1. 3. Template Time! <ul><li>- index.php from index.html </li></ul><ul><li>- component.php </li></ul><ul><li>- templateDetails.xml </li></ul>
  2. 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; >
  3. 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>
  4. 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; />
  5. 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; />
  6. 8. Simple Conditionals <ul><li><?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; ?> </li></ul><ul><li><?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; ?> </li></ul><ul><ul><li><?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; ?> </li></ul></ul><ul><li><?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; ?> </li></ul><ul><li><?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; ?> </li></ul>
  7. 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>
  8. 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; />
  9. 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; ?>>
  10. 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>
  11. 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;
  12. 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>
  13. 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>
  14. 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
  15. 17. template_preview.png 640x384px .png
  16. 18. template_thumbnail.png 206x150px .png
  17. 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)
  18. 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>
  19. 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>
  20. 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>
  21. 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>
  22. 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 >
  23. 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>
  24. 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>
  25. 27. Create favicon.gif
  26. 28. Favicon Generator
  27. 29. Template Directory
  28. 30. Zip it up!
  29. 31. Install & Cross Fingers
  30. 32. Success!
  31. 33. HTML Template Overrides <ul><li>- Don’t hack the core! </li></ul><ul><li>- Change views from MVC components </li></ul>
  32. 34. Change a core output I don’t want an edit icon and I want it to float next to the title
  33. 35. Find the view
  34. 36. Copy into your template
  35. 37. Edit to your liking
  36. 38. Andy’s Alternate “Templatization” <ul><li>Start from scratch? </li></ul><ul><li>Start with a Template Framework? </li></ul>Development Options:
  37. 39. Pros for “Starting from Scratch” “Starting from Scratch” <ul><li>Fast development process if design is simple </li></ul><ul><li>Don’t need to learn a framework </li></ul><ul><li>Faster performance </li></ul><ul><li>No design restrictions </li></ul>
  38. 40. Pros for “Starting with Framework” “ Starting with Framework” <ul><li>Faster development if you are already familiar with the template framework </li></ul><ul><li>Built in styling taken care off </li></ul><ul><li>Lots of functionality for free </li></ul><ul><li>Base template to start from </li></ul>
  39. 43. index.php
  40. 45. templateDetails.xml
  41. 46. template-options.xml
  42. 47. style configuration

×