Joomla templates2011

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 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 sites “packaging design” based on finalized taxonomy and defined brand

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

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

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

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

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 at docs.joomla.org/Understanding_Output_Overrid es

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/enc yclopedia.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/enc yclopedia.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_typ es)

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

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

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

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

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; justin@prototaph.com

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

Joomla templates2011

by Linda Coonen

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 68

Statistics

Joomla templates2011 Presentation Transcript