Joomla templates2011
-
Upload
linda-coonen -
Category
Technology
-
view
110 -
download
0
description
Transcript of Joomla templates2011
Joomla Templates
Introduction● What we're covering today
Introduction● What we're covering today● My template experience
Introduction● What we're 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
templateDetails.xml file
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/Templates
How to Start Learning About Joomla Templates
● Default Joomla templates (Atomic and Beez)● docs.joomla.org/Templates● Online resources (Lynda.com, Jenn Kramer,
etc.)
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: Not for clients
Types of Template Implementations● Joomla core templates● Third-party templates● Template frameworks
● Caveat: Not for clients● Bespoke (custom) templates
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 scratch
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 …
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)● A well-managed client
Bespoke Template Ingredients● A defined brand● Explicit publishing standards● A Web site taxonomy (or equivalent)● A well-managed client● A development process
Bespoke Template Development Process
Bespoke Template Development Process
● Create graphical conceptions for the site's “packaging design” based on finalized taxonomy and defined brand
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
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
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
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
The Zen of Joomla Template Development
The Zen of Joomla Template Development
● “Outside In”● Primary packaging design● Layout regions● Fundamental design choices (fonts, colors, etc.)● Visual styles for module chrome
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)
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 template, based on
changed form values
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
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
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 component and module output
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 atdocs.joomla.org/Understanding_Output_Overrides
Alternate Layouts
Alternate Layouts● Specific overrides for selective application
Alternate Layouts● Specific overrides for selective application● Rename HTML override .php file, insert into
template, upload and assign
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)
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/encyclopedia.php
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/encyclopedia.php
● Documentation at: docs.joomla.org/Layout_Overrides_in_Joomla_1.6
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 edit a template Style
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
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
More About Template Form Fields
More About Template Form Fields● Options include all standard form field types
used in Joomla (see http://docs.joomla.org/Standard_form_field_types)
More About Template Form Fields● Options include all standard form field types
used in Joomla (see http://docs.joomla.org/Standard_form_field_types)● Can also program custom parameter types
More About Template Form Fields● Options include all standard form field types
used in Joomla (see http://docs.joomla.org/Standard_form_field_types)● Can also program custom parameter types
● Offers advanced tie-ins for template appearance, layout and behavior
More About Template Form Fields● Options include all standard form field types
used in Joomla (see http://docs.joomla.org/Standard_form_field_types)● 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
More About Template Form Fields● Options include all standard form field types
used in Joomla (see http://docs.joomla.org/Standard_form_field_types)● 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
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 site title front value from form
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)
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
Thank You!● Justin Kerr; [email protected]