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 …
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
30. Bespoke Template Development
Process
● Create graphical conceptions for the site's
“packaging design” based on finalized
taxonomy and defined brand
31. Bespoke Template Development
Process
● Create graphical conceptions for the site's
“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 site's
“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 site's
“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 site's
“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
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)
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
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
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
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
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
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
