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.

Clever Joomla! Templating Tips and Tricks

1,657 views

Published on

In this presentation I will show you that it isn't necessary to use an extension for everything you do with Joomla!. By making good use of module & component overrides in combination with clever tricks in your source files, it will be easy to build your own content slider for example. Another thing you can easily do without using extensions is activating Javascript or CSS on specific pages. I challenge you to build a website using a maximum of only one or two frontend extensions after visiting this presentation!

Published in: Technology
  • Be the first to comment

Clever Joomla! Templating Tips and Tricks

  1. 1. Clever Joomla! TemplatingTips and TricksRobin Poort (@rhcpoort)JAB13, Noordwijkerhout, june 2013
  2. 2. Robin PoortThemePartner.comdesign / development
  3. 3. Templatesindex.phpModule Alternative LayoutsMenu Item Alternative layouts
  4. 4. Unsafe
  5. 5. Index.php
  6. 6. Pageclass as body class
  7. 7. <?php$app = JFactory::getApplication();$menu = $app->getMenu();$active = $menu->getActive();$pageclass = ;if(is_object($active)&& isset($active->params)&& $active->params instanceof JRegistry) {$pageclass = $active->params->get(pageclass_sfx, );}?><body class="<?php echo !empty($pageclass) ? $pageclass : ; ?>">...</body>
  8. 8. body.home {font-size: 120%;}div.left-column {width: 20%;}body.home div.left-column {width: 40%;}body.list ul li {display: block;margin: 0 0 1em 0;border-bottom: 1px solid #ccc;}
  9. 9. TemplateDetails.xml<field name="templateStyle"type="list"default="style1"label="Template Style"description="Choose a style"><option value="style1">Style1</option><option value="style2">Style2</option></field>
  10. 10. index.php<?php$params = JFactory::getApplication()->getTemplate(true)->params;?><body class="<?php echo $params->get(templateStyle); ?>">template.cssbody.style1 { ... }body.style2 h3 { ... }
  11. 11. <body class="mediumFont highlightFirstWords">...</body>body.smallFont {font-size: .875em;}body.mediumFont {font-size: 1em;}body.largeFont {font-size: 1.25em;}$(body.highlightFirstWords h3).each(function() {...});
  12. 12. body {z-index: 0;}@media (min-width:600px) {body {z-index: 1;}}if ($(body).css(z-index) == 0) {...}if ($(body).css(z-index) == 1) {...}
  13. 13. AlternativeLayouts
  14. 14. ModulesComponents CategoriesMenuItemsMultilevelMore info: http://docs.joomla.org/Layout_Overrides_in_Joomla_2.5
  15. 15. Joomla! installationcomponentscom_contentviewsarticletmpldefault.php
  16. 16. Joomla! installationtemplates[Your template]htmlcom_contentarticledefault.phpviewstmpl
  17. 17. Module Alternative Layouts
  18. 18. Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vestibulum odio tristique sollicitudin. Utmolestie ligula ipsum. Suspendisse feugiat quam ut elit mattislaoreet. Praesent non mi tortor, cursus egestas odio. Aliquamleo tellus, tincidunt vel pulvinar ac, facilisis eget odio.Readmore
  19. 19. Joomla! installationmodulesmod_articles_categorytmpldefault.php
  20. 20. Joomla! installationtemplates[Your template]htmlmod_articles_categorydefault.php
  21. 21. Joomla! installationtemplates[Your template]htmlmod_articles_categoryarticleslider.php
  22. 22. <?php$doc =& JFactory::getDocument();$doc->addScript(...);$doc->addStylesheet(...);?>
  23. 23. <div class="articleslider">...<?php foreach ($list as [list or group]) : ?><li class="slider-item">...<p><?php $images = json_decode($item->images); ?><img src="<?php echo htmlspecialchars($images->image_intro); ?>"></p>...</li><?php endforeach; ?>...</div>
  24. 24. Website nameHome Item1 Item2 Item3 ContactProin sit amet justo interdumnulla commodo dignissim.Proin consequat neque vestibulum odio tristique sollicitudin. Utmolestie ligula ipsum. Suspendisse feugiat quam ut elit mattislaoreet. Praesent non mi tortor, cursus egestas odio. Aliquamleo tellus, tincidunt vel pulvinar ac, facilisis eget odio.Readmore
  25. 25. Menu Item Alternative Layouts
  26. 26. dl.contact-address dt {display: none;}dl.contact-address dd {margin-left: 0;}.contact-form legend {font-size: 1em;margin-bottom: 0;}.contact-form fieldset .control-group:nth-child(6) {display: none;}#jform_contact_message {width:60%;height:150px;}
  27. 27. Joomla! installationcomponentscom_contactviewscontacttmpldefault.php
  28. 28. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.phpcontact
  29. 29. Joomla! installationcomponentscom_contactviewscontacttmpldefault.xml
  30. 30. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly.xmlcontact
  31. 31. <layout title="COM_CONTACT_CONTACT_VIEW_DEFAULT_TITLE"option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION"><help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" /><message><![CDATA[COM_CONTACT_CONTACT_VIEW_DEFAULT_DESC]]></message></layout><layout title="User Friendly Contact Form"option="COM_CONTACT_CONTACT_VIEW_DEFAULT_OPTION"><help key = "JHELP_MENUS_MENU_ITEM_CONTACT_SINGLE_CONTACT" /><message>Create a user friendly contact form</message></layout>
  32. 32. ...<div class="span4"><div class="well">[contact info area] ...</div><div class="well"><p>You can use this form in case you:</p>...</div></div><div class="span8">[contact form area] ...<h3>Privacy policy</h3>...</div>...
  33. 33. Joomla! installationcomponentscom_contactviewscontacttmpldefault_address.php
  34. 34. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_address.phpcontact
  35. 35. Joomla! installationcomponentscom_contactviewscontacttmpldefault_form.php
  36. 36. Joomla! installationtemplates[Your template]htmlcom_contactuserfriendly_form.phpcontact
  37. 37. Questions?
  38. 38. Have a try using overridesTry to get more out of the Joomla! coreBut leave the core alone! (no core-hacks)Dont always ignore extenions
  39. 39. Use a maximum of 2 frontendextensions on your next project!
  40. 40. @rhcpoort | @theme_partnerwww.robinpoort.com | www.themepartner.comTimes up
  41. 41. Copyright image on first slide:http://upload.wikimedia.org/wikipedia/commons/3/32/Terry_Evanswood.jpg

×