37
What’s New in Joomla! 1.6 Templates? Joomla! Day New England April 2, 2011

What's New in Joomla! 1.6 Templates?

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: What's New in Joomla! 1.6 Templates?

What’s New inJoomla! 1.6 Templates?

Joomla! Day New EnglandApril 2, 2011

What’s New inJoomla! 1.6 Templates?

Joomla! Day New EnglandApril 2, 2011

Page 2: What's New in Joomla! 1.6 Templates?

• Introductions• ‘On’s and ‘To’s• What’s New in 1.6?• Demo creation of template• Questions

Agenda for this SessionAgenda for this Session

Page 3: What's New in Joomla! 1.6 Templates?

• Building Joomla! sites since 2006• Adjunct Faculty, Marlboro College

Graduate School• Previous life: managing information as

a public school librarian / computer coordinator

Barb AckemannBarb Ackemann

Page 4: What's New in Joomla! 1.6 Templates?

• xhtml and css skills – hand coded!• Ability to build static site with external

stylesheet• Ability to copy and paste php snippets• Familiarity with Joomla! structures:

modules, components

Ons – Necessary SkillsOns – Necessary Skills

Page 5: What's New in Joomla! 1.6 Templates?

• Learn what’s new in templates for Joomla! 1.6

• Understand template ingredients• Convert a static page to a template

index.php• Assemble and install custom template.

Tos – Goals for today:Tos – Goals for today:

Page 6: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

SectionsCategories

Limited to 2 levels of organization

In Joomla! 1.6:

No SectionsNested Categories

Nest as needed.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 7: What's New in Joomla! 1.6 Templates?

Two uses:• Back end – find articles using Section and

or Category filters – now only a single category filter

• Front end – use for Blog or List display of articles or sub-categories.

Page 8: What's New in Joomla! 1.6 Templates?

1.6 Category Manager1.6 Category Manager

In Category Manager, I can see nested structure.

Page 9: What's New in Joomla! 1.6 Templates?

1.6 Article Manager1.6 Article Manager

In Article Manager, I can NOT see nested structure, can display alphabetical by category, but….

Page 10: What's New in Joomla! 1.6 Templates?

1.6 Article Editor1.6 Article Editor

In Article Editor, I CAN see nested structure when creating or re-assigning an article.

Page 11: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

Section List layout lists Categories.Each Category would open into list of articles.

In Joomla! 1.6:

Category list of sub-categories can open to either a blog layout or list of articles.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 12: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

Template assignment to menu items in the template manager only.

In Joomla! 1.6:

Templates or template styles can be assigned in template manager or menu manager.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 13: What's New in Joomla! 1.6 Templates?

1.6 Menu Item Editor1.6 Menu Item Editor

In Menu Item Editor, the template or template style can be selected for that menu item. – without having to go to template manager!

****This setting TRUMPS setting in template manager.

Page 14: What's New in Joomla! 1.6 Templates?

1.6 Template Manager1.6 Template Manager

You can use Toggle Selection to check / uncheck menu items. Very useful for assigning an alternative style – what was selected for one can be unselected for the alternative, and vice versa.

Page 15: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

Could use >1 templates.Could make for maintenance nightmare!

In Joomla! 1.6:

Can use multiple template styles – variations with different parameter settings.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 16: What's New in Joomla! 1.6 Templates?

Template list displays thumbnails.Preview link shows larger image.

Template Styles / TemplatesTemplate Styles / Templates

Page 17: What's New in Joomla! 1.6 Templates?

You assign a template style – which is based on a certain template.

Template Styles / TemplatesTemplate Styles / Templates

Page 18: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

Parameters were often used to make a commercial template easy to adapt.

In Joomla! 1.6:

Even custom templates may want to make use of parameters for within- site variations.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 19: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

html overrides from beez template to get clean tableless html with headings

In Joomla! 1.6:

Beez overrides not needed as core provides clean html and even the Beez-by-Barb page level handles!

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 20: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

html overrides applied to whole site, changing the html that Joomla! generates.

In Joomla! 1.6:

Can use sitewide overrides OR alternative layouts set for certain items or categories

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 21: What's New in Joomla! 1.6 Templates?

• The sample data makes use of Alternative Layouts for individual contacts – see the Fruit Encyclopedia!

Examples Examples

Page 22: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5: In Joomla! 1.6:

Can create custom menu item types based on alternative layouts.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 23: What's New in Joomla! 1.6 Templates?

• The sample data Australian Parks Image Gallery would benefit from a layout override to change the html from “Article Count” to “ImageCount”

• This override would have to be implemented as a new menu item type.

Examples Examples

Page 24: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

?tp=1

Added to url to display module positions.

In Joomla! 1.6:

?tp=1Must first enable “preview module postions” in template manager.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 25: What's New in Joomla! 1.6 Templates?

In Joomla! 1.5:

Typical module position names were descriptive (left, right, etc.)

In Joomla! 1.6:

Module position names more neutral – descriptions in language file.

What’s New in Joomla! 1.6?What’s New in Joomla! 1.6?

Page 26: What's New in Joomla! 1.6 Templates?

The popup menu of module positions includes use or position.

Module ManagerModule Manager

Page 27: What's New in Joomla! 1.6 Templates?

Think about modules!

Plan all the places you might use modules in your site. Not just the one page – plan for all possibilities!

Getting ready to build…Getting ready to build…

Page 28: What's New in Joomla! 1.6 Templates?

1. Design + Build Static html / css2. Save as index.php and insert Joomla!

php snippets3. Create favicon, thumbnail and preview4. Create templateDetails.xml5. Zip, install, and debug css

Creating a custom templateCreating a custom template

Page 29: What's New in Joomla! 1.6 Templates?

• Set up template folder with css, images and language folders

• Call your file index.html and your css file template.css

• Create css styles, but know that you’ll need to tweak for selectors that Joomla! provides.

1. Build static html / css1. Build static html / css

Page 30: What's New in Joomla! 1.6 Templates?

• Open your index.html and save as index.php.

• Get snippets from Template Card• Replace head with Joomla! head.• Add Joomla! code to place component

and message.• Add Joomla! code to place modules.

2. Insert Joomla! snippets2. Insert Joomla! snippets

Page 31: What's New in Joomla! 1.6 Templates?

Since your template needs to be used from any place in your site, the path needs to be dynamic. Use this in index.php:<img src=“<?php echo $this->baseurl; ?>templates/<?php echo $this->template; ?>/images/imagename.gif” alt=“” />

3. Adjust image paths3. Adjust image paths

Page 32: What's New in Joomla! 1.6 Templates?

• Start with a file from Beez5 or Beez_20 and modify for your template.

• The .xml file needs to list all folders and loose files. (not all files within folders!)

• The .xml file also lists positions and defines parameters, if any.

4. templateDetails.xml4. templateDetails.xml

Page 33: What's New in Joomla! 1.6 Templates?

• Check the ingredients list on the Templates Joomla! 1.6 card

• Create favicon, thumbnail, preview• Zip your template folder with

YemuZip (Mac) or 7-Zip (Win)• Install and assign to test page, or as

default for whole site.

5. Assemble all files + zip!5. Assemble all files + zip!

Page 34: What's New in Joomla! 1.6 Templates?

• Watch Barb race through the steps of creating a very simple custom template.

• Come back for 2nd session and we’ll make it cooler!

Demonstration Demonstration

Page 35: What's New in Joomla! 1.6 Templates?

• html-ipsum.com• http://docs.joomla.org/

Layout_Overrides_in_Joomla_1.6• lynda.com• irislines.com/blog

Useful LinksUseful Links

Page 36: What's New in Joomla! 1.6 Templates?

Please visit with me here at Joomla Day or contact me:

[email protected]

Questions? Questions?

Page 37: What's New in Joomla! 1.6 Templates?

Barb AckemannIrisLines, LLC

[email protected]

Thank you! Thank you!