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.
What’s New in Joomla! 1.6 Templates? Joomla! Day New England April 2, 2011
<ul><li>Introductions </li></ul><ul><li>‘ On’s and ‘To’s </li></ul><ul><li>What’s New in 1.6? </li></ul><ul><li>Demo creat...
<ul><li>Building Joomla! sites since 2006 </li></ul><ul><li>Adjunct Faculty, Marlboro College Graduate School </li></ul><u...
<ul><li>xhtml and css skills – hand coded! </li></ul><ul><li>Ability to build static site with external stylesheet </li></...
<ul><li>Learn what’s new in templates for Joomla! 1.6 </li></ul><ul><li>Understand template ingredients </li></ul><ul><li>...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Sections </li></ul><ul><li>Categories </li></ul><ul><li>Limited to 2 levels of o...
<ul><li>Two uses: </li></ul><ul><li>Back end – find articles using Section and or Category filters – now only a single cat...
1.6 Category Manager In Category Manager, I can see nested structure.
1.6 Article Manager In Article Manager, I can NOT see nested structure, can display alphabetical by category, but….
1.6 Article Editor In Article Editor, I CAN see nested structure when creating or re-assigning an article.
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Section List layout lists Categories. Each Category would open into list of arti...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Template assignment to  menu items in the template manager only. </li></ul><ul><...
1.6 Menu Item Editor In Menu Item Editor, the template or template style can be selected for that menu item. – without hav...
1.6 Template Manager You can use Toggle Selection to check / uncheck menu items.  Very useful for assigning an alternative...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Could use >1 templates. Could make for maintenance nightmare! </li></ul><ul><li>...
<ul><li>Template list displays thumbnails. </li></ul><ul><li>Preview link shows larger image. </li></ul>Template Styles / ...
<ul><li>You assign a template  style  – which is based on a certain template. </li></ul>Template Styles / Templates
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Parameters were often used to make a commercial template easy to adapt. </li></u...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>html overrides from beez template to get clean tableless html with headings </li...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>html overrides applied to whole site, changing the html that Joomla! generates. ...
<ul><li>The sample data makes use of Alternative Layouts for individual contacts – see the Fruit Encyclopedia! </li></ul>E...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Can create custom menu item types based on alt...
<ul><li>The sample data Australian Parks Image Gallery would benefit from a layout override to change the html from  “Arti...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>?tp=1 </li></ul><ul><li>Added to url to display module positions. </li></ul><ul>...
<ul><li>In Joomla! 1.5: </li></ul><ul><li>Typical module position names were descriptive (left, right, etc.) </li></ul><ul...
<ul><li>The popup menu of module positions includes use or position. </li></ul>Module Manager
<ul><li>Think about modules! </li></ul><ul><li>Plan all the places you might use modules in your site.  Not just the one p...
<ul><li>Design + Build Static html / css </li></ul><ul><li>Save as index.php and insert Joomla! php snippets </li></ul><ul...
<ul><li>Set up template folder with css, images and language folders </li></ul><ul><li>Call your file index.html and your ...
<ul><li>Open your index.html and save as index.php. </li></ul><ul><li>Get snippets from Template Card </li></ul><ul><li>Re...
<ul><li>Since your template needs to be used from any place in your site, the path needs to be dynamic.  Use this in index...
<ul><li>Start with a file from Beez5 or Beez_20 and modify for your template. </li></ul><ul><li>The .xml file needs to lis...
<ul><li>Check the ingredients list on the Templates Joomla! 1.6 card  </li></ul><ul><li>Create favicon, thumbnail, preview...
<ul><li>Watch Barb race through the steps of creating a very simple custom template. </li></ul><ul><li>Come back for 2 nd ...
<ul><li>html-ipsum.com </li></ul><ul><li>http://docs.joomla.org/Layout_Overrides_in_Joomla_1.6 </li></ul><ul><li>lynda.com...
<ul><li>Please visit with me here at  Joomla Day or contact me: </li></ul><ul><li>[email_address] </li></ul>Questions?
<ul><li>Barb Ackemann </li></ul><ul><li>IrisLines, LLC </li></ul><ul><li>[email_address] </li></ul>Thank you!
Upcoming SlideShare
Loading in …5
×

What's New in Joomla! 1.6 Templates?

3,644 views

Published on

Published in: Business
  • Be the first to comment

What's New in Joomla! 1.6 Templates?

  1. 1. What’s New in Joomla! 1.6 Templates? Joomla! Day New England April 2, 2011
  2. 2. <ul><li>Introductions </li></ul><ul><li>‘ On’s and ‘To’s </li></ul><ul><li>What’s New in 1.6? </li></ul><ul><li>Demo creation of template </li></ul><ul><li>Questions </li></ul>Agenda for this Session
  3. 3. <ul><li>Building Joomla! sites since 2006 </li></ul><ul><li>Adjunct Faculty, Marlboro College Graduate School </li></ul><ul><li>Previous life: managing information as a public school librarian / computer coordinator </li></ul>Barb Ackemann
  4. 4. <ul><li>xhtml and css skills – hand coded! </li></ul><ul><li>Ability to build static site with external stylesheet </li></ul><ul><li>Ability to copy and paste php snippets </li></ul><ul><li>Familiarity with Joomla! structures: modules, components </li></ul>Ons – Necessary Skills
  5. 5. <ul><li>Learn what’s new in templates for Joomla! 1.6 </li></ul><ul><li>Understand template ingredients </li></ul><ul><li>Convert a static page to a template index.php </li></ul><ul><li>Assemble and install custom template. </li></ul>Tos – Goals for today:
  6. 6. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Sections </li></ul><ul><li>Categories </li></ul><ul><li>Limited to 2 levels of organization </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>No Sections </li></ul><ul><li>Nested Categories </li></ul><ul><li>Nest as needed. </li></ul>What’s New in Joomla! 1.6?
  7. 7. <ul><li>Two uses: </li></ul><ul><li>Back end – find articles using Section and or Category filters – now only a single category filter </li></ul><ul><li>Front end – use for Blog or List display of articles or sub-categories. </li></ul>
  8. 8. 1.6 Category Manager In Category Manager, I can see nested structure.
  9. 9. 1.6 Article Manager In Article Manager, I can NOT see nested structure, can display alphabetical by category, but….
  10. 10. 1.6 Article Editor In Article Editor, I CAN see nested structure when creating or re-assigning an article.
  11. 11. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Section List layout lists Categories. Each Category would open into list of articles. </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Category list of sub-categories can open to either a blog layout or list of articles. </li></ul>What’s New in Joomla! 1.6?
  12. 12. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Template assignment to menu items in the template manager only. </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Templates or template styles can be assigned in template manager or menu manager. </li></ul>What’s New in Joomla! 1.6?
  13. 13. 1.6 Menu Item Editor In Menu Item Editor, the template or template style can be selected for that menu item. – without having to go to template manager! ****This setting TRUMPS setting in template manager.
  14. 14. 1.6 Template Manager You can use Toggle Selection to check / uncheck menu items. Very useful for assigning an alternative style – what was selected for one can be unselected for the alternative, and vice versa.
  15. 15. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Could use >1 templates. Could make for maintenance nightmare! </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Can use multiple template styles – variations with different parameter settings. </li></ul>What’s New in Joomla! 1.6?
  16. 16. <ul><li>Template list displays thumbnails. </li></ul><ul><li>Preview link shows larger image. </li></ul>Template Styles / Templates
  17. 17. <ul><li>You assign a template style – which is based on a certain template. </li></ul>Template Styles / Templates
  18. 18. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Parameters were often used to make a commercial template easy to adapt. </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Even custom templates may want to make use of parameters for within- site variations. </li></ul>What’s New in Joomla! 1.6?
  19. 19. <ul><li>In Joomla! 1.5: </li></ul><ul><li>html overrides from beez template to get clean tableless html with headings </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Beez overrides not needed as core provides clean html and even the Beez-by-Barb page level handles! </li></ul>What’s New in Joomla! 1.6?
  20. 20. <ul><li>In Joomla! 1.5: </li></ul><ul><li>html overrides applied to whole site, changing the html that Joomla! generates. </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Can use sitewide overrides OR alternative layouts set for certain items or categories </li></ul>What’s New in Joomla! 1.6?
  21. 21. <ul><li>The sample data makes use of Alternative Layouts for individual contacts – see the Fruit Encyclopedia! </li></ul>Examples
  22. 22. <ul><li>In Joomla! 1.5: </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Can create custom menu item types based on alternative layouts. </li></ul>What’s New in Joomla! 1.6?
  23. 23. <ul><li>The sample data Australian Parks Image Gallery would benefit from a layout override to change the html from “Article Count” to “ImageCount” </li></ul><ul><li>This override would have to be implemented as a new menu item type. </li></ul>Examples
  24. 24. <ul><li>In Joomla! 1.5: </li></ul><ul><li>?tp=1 </li></ul><ul><li>Added to url to display module positions. </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>?tp=1 </li></ul><ul><li>Must first enable “preview module postions” in template manager. </li></ul>What’s New in Joomla! 1.6?
  25. 25. <ul><li>In Joomla! 1.5: </li></ul><ul><li>Typical module position names were descriptive (left, right, etc.) </li></ul><ul><li>In Joomla! 1.6: </li></ul><ul><li>Module position names more neutral – descriptions in language file. </li></ul>What’s New in Joomla! 1.6?
  26. 26. <ul><li>The popup menu of module positions includes use or position. </li></ul>Module Manager
  27. 27. <ul><li>Think about modules! </li></ul><ul><li>Plan all the places you might use modules in your site. Not just the one page – plan for all possibilities! </li></ul>Getting ready to build…
  28. 28. <ul><li>Design + Build Static html / css </li></ul><ul><li>Save as index.php and insert Joomla! php snippets </li></ul><ul><li>Create favicon, thumbnail and preview </li></ul><ul><li>Create templateDetails.xml </li></ul><ul><li>Zip, install, and debug css </li></ul>Creating a custom template
  29. 29. <ul><li>Set up template folder with css, images and language folders </li></ul><ul><li>Call your file index.html and your css file template.css </li></ul><ul><li>Create css styles, but know that you’ll need to tweak for selectors that Joomla! provides. </li></ul>1. Build static html / css
  30. 30. <ul><li>Open your index.html and save as index.php. </li></ul><ul><li>Get snippets from Template Card </li></ul><ul><li>Replace head with Joomla! head. </li></ul><ul><li>Add Joomla! code to place component and message. </li></ul><ul><li>Add Joomla! code to place modules. </li></ul>2. Insert Joomla! snippets
  31. 31. <ul><li>Since your template needs to be used from any place in your site, the path needs to be dynamic. Use this in index.php: </li></ul><ul><li><img src=“<?php echo $this->baseurl; ?> templates/<?php echo $this->template; ?>/images/imagename.gif” alt=“” /> </li></ul>3. Adjust image paths
  32. 32. <ul><li>Start with a file from Beez5 or Beez_20 and modify for your template. </li></ul><ul><li>The .xml file needs to list all folders and loose files. (not all files within folders!) </li></ul><ul><li>The .xml file also lists positions and defines parameters, if any. </li></ul>4. templateDetails.xml
  33. 33. <ul><li>Check the ingredients list on the Templates Joomla! 1.6 card </li></ul><ul><li>Create favicon, thumbnail, preview </li></ul><ul><li>Zip your template folder with YemuZip (Mac) or 7-Zip (Win) </li></ul><ul><li>Install and assign to test page, or as default for whole site. </li></ul>5. Assemble all files + zip!
  34. 34. <ul><li>Watch Barb race through the steps of creating a very simple custom template. </li></ul><ul><li>Come back for 2 nd session and we’ll make it cooler! </li></ul>Demonstration
  35. 35. <ul><li>html-ipsum.com </li></ul><ul><li>http://docs.joomla.org/Layout_Overrides_in_Joomla_1.6 </li></ul><ul><li>lynda.com </li></ul><ul><li>irislines.com/blog </li></ul>Useful Links
  36. 36. <ul><li>Please visit with me here at Joomla Day or contact me: </li></ul><ul><li>[email_address] </li></ul>Questions?
  37. 37. <ul><li>Barb Ackemann </li></ul><ul><li>IrisLines, LLC </li></ul><ul><li>[email_address] </li></ul>Thank you!

×