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