Joomla templates2011
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,098
On Slideshare
1,030
From Embeds
68
Number of Embeds
2

Actions

Shares
Downloads
25
Comments
0
Likes
3

Embeds 68

http://www.joomlachicago.com 40
http://joomlachicago.com 28

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