Your SlideShare is downloading. ×
Joomla Day Austin Part 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Joomla Day Austin Part 3

1,558

Published on

Joomla Day Austin Texas 2011 - Part 3

Joomla Day Austin Texas 2011 - Part 3

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,558
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • - make sure to include the “message” for system messages - “component” loads your main Joomla component - place modules before and after component for later convenience
  • - 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)
  • - 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
  • - 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
  • - don’t use an & sign! must be & or “and”
  • - include entire folders w/ <folder>
  • - must be square - best if transparent gif
  • - generates favicon.ico for you
  • - directories can’t be empty, at least drop in an index.html
  • - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • - recommend BetterZip on OSX to make sure you don’t zip hidden files - zip the files, not the surrounding folder
  • - this is after setting up categories, blank articles, menus, and modules
  • Transcript

    • 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
    • 17. template_preview.png 640x384px .png
    • 18. template_thumbnail.png 206x150px .png
    • 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>
    • 27. Create favicon.gif
    • 28. Favicon Generator
    • 29. Template Directory
    • 30. Zip it up!
    • 31. Install & Cross Fingers
    • 32. Success!
    • 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
    • 35. Find the view
    • 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.  
    • 43. index.php
    • 44.  
    • 45. templateDetails.xml
    • 46. template-options.xml
    • 47. style configuration
    • 48.  
    • 49.  

    ×