• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Joomla templates2011
 

Joomla templates2011

on

  • 987 views

 

Statistics

Views

Total Views
987
Views on SlideShare
919
Embed Views
68

Actions

Likes
3
Downloads
25
Comments
0

2 Embeds 68

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Joomla templates2011 Joomla templates2011 Presentation Transcript

    • 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