Your SlideShare is downloading. ×
0
Joomla Templates
Introduction●   What were covering today
Introduction●   What were covering today●   My template experience
Introduction●   What were covering today●   My template experience●   Why Joomla templates are awesome
What Are Joomla Templates?
What Are Joomla Templates?●   Front-End Templates
What Are Joomla Templates?●   Front-End Templates●   Administrator Templates
What Are Joomla Templates?●   Front-End Templates●   Administrator Templates●   At its core, an index.php file and a    te...
How to Start Learning About Joomla             Templates
How to Start Learning About Joomla             Templates●   Default Joomla templates (Atomic and Beez)
How to Start Learning About Joomla             Templates●   Default Joomla templates (Atomic and Beez)●   docs.joomla.org/...
How to Start Learning About Joomla             Templates●   Default Joomla templates (Atomic and Beez)●   docs.joomla.org/...
Types of Template Implementations
Types of Template Implementations●   Joomla core templates
Types of Template Implementations●   Joomla core templates●   Third-party templates
Types of Template Implementations●   Joomla core templates●   Third-party templates●   Template frameworks
Types of Template Implementations●   Joomla core templates●   Third-party templates●   Template frameworks    ●   Caveat: ...
Types of Template Implementations●   Joomla core templates●   Third-party templates●   Template frameworks    ●   Caveat: ...
Bespoke Templates
Bespoke Templates●   Most often employed for custom design
Bespoke Templates●   Most often employed for custom design●   Best way to learn about templates is to develop    one from ...
Bespoke Templates●   Most often employed for custom design●   Best way to learn about templates is to develop    one from ...
Bespoke Template Ingredients
Bespoke Template Ingredients●   A defined brand
Bespoke Template Ingredients●   A defined brand●   Explicit publishing standards
Bespoke Template Ingredients●   A defined brand●   Explicit publishing standards●   A Web site taxonomy (or equivalent)
Bespoke Template Ingredients●   A defined brand●   Explicit publishing standards●   A Web site taxonomy (or equivalent)●  ...
Bespoke Template Ingredients●   A defined brand●   Explicit publishing standards●   A Web site taxonomy (or equivalent)●  ...
Bespoke Template Development          Process
Bespoke Template Development              Process●   Create graphical conceptions for the sites    “packaging design” base...
Bespoke Template Development              Process●   Create graphical conceptions for the sites    “packaging design” base...
Bespoke Template Development              Process●   Create graphical conceptions for the sites    “packaging design” base...
Bespoke Template Development              Process●   Create graphical conceptions for the sites    “packaging design” base...
Bespoke Template Development              Process●   Create graphical conceptions for the sites    “packaging design” base...
The Zen of Joomla Template      Development
The Zen of Joomla Template              Development●   “Outside In”    ●   Primary packaging design    ●   Layout regions ...
The Zen of Joomla Template              Development●   “Outside In”    ●   Primary packaging design    ●   Layout regions ...
Changes in Joomla 1.6/1.7+       Templating
Changes in Joomla 1.6/1.7+                Templating●   Now have template Styles    ●   Saveable iterations of a primary t...
Changes in Joomla 1.6/1.7+                Templating●   Now have template Styles    ●   Saveable iterations of a primary t...
Changes in Joomla 1.6/1.7+                Templating●   Now have template Styles    ●   Saveable iterations of a primary t...
HTML Overrides
HTML Overrides●   Work just like in 1.5
HTML Overrides●   Work just like in 1.5●   Allow for custom layout/construction and total    control over nearly all compo...
HTML Overrides●   Work just like in 1.5●   Allow for custom layout/construction and total    control over nearly all compo...
Alternate Layouts
Alternate Layouts●   Specific overrides for selective application
Alternate Layouts●   Specific overrides for selective application●   Rename HTML override .php file, insert into    templa...
Alternate Layouts●   Specific overrides for selective application●   Rename HTML override .php file, insert into    templa...
Alternate Layouts●   Specific overrides for selective application●   Rename HTML override .php file, insert into    templa...
Alternate Layouts●   Specific overrides for selective application●   Rename HTML override .php file, insert into    templa...
Template Parameters Form Fields
Template Parameters Form Fields●   Options are defined in templateDetails.xml file    (<config> section)
Template Parameters Form Fields●   Options are defined in templateDetails.xml file    (<config> section)●   Shown when you...
Template Parameters Form Fields●   Options are defined in templateDetails.xml file    (<config> section)●   Shown when you...
Template Parameters Form Fields●   Options are defined in templateDetails.xml file    (<config> section)●   Shown when you...
More About Template Form Fields
More About Template Form Fields●   Options include all standard form field types    used in Joomla (see    http://docs.joo...
More About Template Form Fields●   Options include all standard form field types    used in Joomla (see    http://docs.joo...
More About Template Form Fields●   Options include all standard form field types    used in Joomla (see    http://docs.joo...
More About Template Form Fields●   Options include all standard form field types    used in Joomla (see    http://docs.joo...
More About Template Form Fields●   Options include all standard form field types    used in Joomla (see    http://docs.joo...
Template Form Field Example:Select Embeddable Web Font
Template Form Field Example:     Select Embeddable Web Font●   templateDetails.xml field definition
Template Form Field Example:     Select Embeddable Web Font●   templateDetails.xml field definition●   index.php – pulls s...
Template Form Field Example:     Select Embeddable Web Font●   templateDetails.xml field definition●   index.php – pulls s...
Template Form Field Example:     Select Embeddable Web Font●   templateDetails.xml field definition●   index.php – pulls s...
Thank You!●   Justin Kerr; justin@prototaph.com
Upcoming SlideShare
Loading in...5
×

Joomla templates2011

986

Published on

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

No Downloads
Views
Total Views
986
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Joomla templates2011"

  1. 1. Joomla Templates
  2. 2. Introduction● What were covering today
  3. 3. Introduction● What were covering today● My template experience
  4. 4. Introduction● What were covering today● My template experience● Why Joomla templates are awesome
  5. 5. What Are Joomla Templates?
  6. 6. What Are Joomla Templates?● Front-End Templates
  7. 7. What Are Joomla Templates?● Front-End Templates● Administrator Templates
  8. 8. What Are Joomla Templates?● Front-End Templates● Administrator Templates● At its core, an index.php file and a templateDetails.xml file
  9. 9. How to Start Learning About Joomla Templates
  10. 10. How to Start Learning About Joomla Templates● Default Joomla templates (Atomic and Beez)
  11. 11. How to Start Learning About Joomla Templates● Default Joomla templates (Atomic and Beez)● docs.joomla.org/Templates
  12. 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. 13. Types of Template Implementations
  14. 14. Types of Template Implementations● Joomla core templates
  15. 15. Types of Template Implementations● Joomla core templates● Third-party templates
  16. 16. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks
  17. 17. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks ● Caveat: Not for clients
  18. 18. Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks ● Caveat: Not for clients● Bespoke (custom) templates
  19. 19. Bespoke Templates
  20. 20. Bespoke Templates● Most often employed for custom design
  21. 21. Bespoke Templates● Most often employed for custom design● Best way to learn about templates is to develop one from scratch
  22. 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. 23. Bespoke Template Ingredients
  24. 24. Bespoke Template Ingredients● A defined brand
  25. 25. Bespoke Template Ingredients● A defined brand● Explicit publishing standards
  26. 26. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)
  27. 27. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)● A well-managed client
  28. 28. Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)● A well-managed client● A development process
  29. 29. Bespoke Template Development Process
  30. 30. Bespoke Template Development Process● Create graphical conceptions for the sites “packaging design” based on finalized taxonomy and defined brand
  31. 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. 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. 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. 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. 35. The Zen of Joomla Template Development
  36. 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. 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. 38. Changes in Joomla 1.6/1.7+ Templating
  39. 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. 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. 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. 42. HTML Overrides
  43. 43. HTML Overrides● Work just like in 1.5
  44. 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. 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. 46. Alternate Layouts
  47. 47. Alternate Layouts● Specific overrides for selective application
  48. 48. Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into template, upload and assign
  49. 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. 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. 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. 52. Template Parameters Form Fields
  53. 53. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)
  54. 54. Template Parameters Form Fields● Options are defined in templateDetails.xml file (<config> section)● Shown when you edit a template Style
  55. 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. 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. 57. More About Template Form Fields
  58. 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. 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. 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. 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. 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. 63. Template Form Field Example:Select Embeddable Web Font
  64. 64. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition
  65. 65. Template Form Field Example: Select Embeddable Web Font● templateDetails.xml field definition● index.php – pulls site title front value from form
  66. 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. 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. 68. Thank You!● Justin Kerr; justin@prototaph.com
  1. A particular slide catching your eye?

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

×