Your SlideShare is downloading. ×

Joomla templates2011

931

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
931
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
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

Transcript

  • 1. Joomla Templates
  • 2. Introduction● What were covering today
  • 3. Introduction● What were covering today● My template experience
  • 4. Introduction● What were covering today● My template experience● Why Joomla templates are awesome
  • 5. What Are Joomla Templates?
  • 6. What Are Joomla Templates?● Front-End Templates
  • 7. What Are Joomla Templates?● Front-End Templates● Administrator Templates
  • 8. What Are Joomla Templates?● Front-End Templates● Administrator Templates● At its core, an index.php file and a templateDetails.xml file
  • 9. How to Start Learning About Joomla Templates
  • 10. How to Start Learning About Joomla Templates● Default Joomla templates (Atomic and Beez)
  • 11. How to Start Learning About Joomla Templates● Default Joomla templates (Atomic and Beez)● docs.joomla.org/Templates
  • 12. How to Start Learning About Joomla Templates● Default Joomla templates (Atomic and Beez)● docs.joomla.org/Templates● Online resources (Lynda.com, Jenn Kramer, etc.)
  • 13. Types of Template Implementations
  • 14. Types of Template Implementations● Joomla core templates
  • 15. Types of Template Implementations● Joomla core templates● Third-party templates
  • 16. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks
  • 17. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks ● Caveat: Not for clients
  • 18. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks ● Caveat: Not for clients● Bespoke (custom) templates
  • 19. Bespoke Templates
  • 20. Bespoke Templates● Most often employed for custom design
  • 21. Bespoke Templates● Most often employed for custom design● Best way to learn about templates is to develop one from scratch
  • 22. Bespoke Templates● Most often employed for custom design● Best way to learn about templates is to develop one from scratch● The most critical skills for bespoke template development are …
  • 23. Bespoke Template Ingredients
  • 24. Bespoke Template Ingredients● A defined brand
  • 25. Bespoke Template Ingredients● A defined brand● Explicit publishing standards
  • 26. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)
  • 27. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)● A well-managed client
  • 28. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)● A well-managed client● A development process
  • 29. Bespoke Template Development Process
  • 30. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand
  • 31. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand● Conduct review/revision until signoff on finalized packaging design
  • 32. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand● Conduct review/revision until signoff on finalized packaging design● Slice-and-dice into HTML layout, then test
  • 33. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand● Conduct review/revision until signoff on finalized packaging design● Slice-and-dice into HTML layout, then test● Convert to index.php and related Joomla template files
  • 34. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand● Conduct review/revision until signoff on finalized packaging design● Slice-and-dice into HTML layout, then test● Convert to index.php and related Joomla template files● Zip, upload, test, refine and optimize
  • 35. The Zen of Joomla Template Development
  • 36. The Zen of Joomla Template Development● “Outside In” ● Primary packaging design ● Layout regions ● Fundamental design choices (fonts, colors, etc.) ● Visual styles for module chrome
  • 37. The Zen of Joomla Template Development● “Outside In” ● Primary packaging design ● Layout regions ● Fundamental design choices (fonts, colors, etc.) ● Visual styles for module chrome● “Inside Out” ● Joomla component styles ● Joomla component layouts ● Custom content styles (linked up in WYSIWYG editor)
  • 38. Changes in Joomla 1.6/1.7+ Templating
  • 39. Changes in Joomla 1.6/1.7+ Templating● Now have template Styles ● Saveable iterations of a primary template, based on changed form values
  • 40. Changes in Joomla 1.6/1.7+ Templating● Now have template Styles ● Saveable iterations of a primary template, based on changed form values● Can customize template code through the “Template Details” link
  • 41. Changes in Joomla 1.6/1.7+ Templating● Now have template Styles ● Saveable iterations of a primary template, based on changed form values● Can customize template code through the “Template Details” link● Very similar to 1.5 templates, but templateDetails.xml has some new syntax
  • 42. HTML Overrides
  • 43. HTML Overrides● Work just like in 1.5
  • 44. HTML Overrides● Work just like in 1.5● Allow for custom layout/construction and total control over nearly all component and module output
  • 45. HTML Overrides● Work just like in 1.5● Allow for custom layout/construction and total control over nearly all component and module output● Great tutorial at docs.joomla.org/Understanding_Output_Overrid es
  • 46. Alternate Layouts
  • 47. Alternate Layouts● Specific overrides for selective application
  • 48. Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into template, upload and assign
  • 49. Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into template, upload and assign● Assign via the Joomla interface (menu item parameters, Article options)
  • 50. Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into template, upload and assign● Assign via the Joomla interface (menu item parameters, Article options)● Example at: templates/beez5/html/com_contact/contact/enc yclopedia.php
  • 51. Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into template, upload and assign● Assign via the Joomla interface (menu item parameters, Article options)● Example at: templates/beez5/html/com_contact/contact/enc yclopedia.php● Documentation at: docs.joomla.org/Layout_Overrides_in_Joomla_ 1.6
  • 52. Template Parameters Form Fields
  • 53. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)
  • 54. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)● Shown when you edit a template Style
  • 55. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)● Shown when you edit a template Style● Change some values, save a new Style, and apply to site
  • 56. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)● Shown when you edit a template Style● Change some values, save a new Style, and apply to site● Makes it easier to work from a single “core” template for your site, but still be very flexible
  • 57. More About Template Form Fields
  • 58. More About Template Form Fields● Options include all standard form field types used in Joomla (see http://docs.joomla.org/Standard_form_field_typ es)
  • 59. More About Template Form Fields● Options include all standard form field types used in Joomla (see http://docs.joomla.org/Standard_form_field_typ es) ● Can also program custom parameter types
  • 60. More About Template Form Fields● Options include all standard form field types used in Joomla (see http://docs.joomla.org/Standard_form_field_typ es) ● Can also program custom parameter types● Offers advanced tie-ins for template appearance, layout and behavior
  • 61. More About Template Form Fields● Options include all standard form field types used in Joomla (see http://docs.joomla.org/Standard_form_field_typ es) ● Can also program custom parameter types● Offers advanced tie-ins for template appearance, layout and behavior● Values can tie into PHP code inside index.php
  • 62. More About Template Form Fields● Options include all standard form field types used in Joomla (see http://docs.joomla.org/Standard_form_field_typ es) ● Can also program custom parameter types● Offers advanced tie-ins for template appearance, layout and behavior● Values can tie into PHP code inside index.php● Can be used for DIY frameworks
  • 63. Template Form Field Example:Select Embeddable Web Font
  • 64. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition
  • 65. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition● index.php – pulls site title front value from form
  • 66. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition● index.php – pulls site title front value from form● index.php – embeds Web font code upon font selection (Bulletproof @font-face syntax)
  • 67. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition● index.php – pulls site title front value from form● index.php – embeds Web font code upon font selection (Bulletproof @font-face syntax)● index.php – assigns font style based on value
  • 68. Thank You!● Justin Kerr; justin@prototaph.com

×