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,447
-1

Published on

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,447
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×