Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
 
 
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,136 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

×