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

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

Agenda for this SessionAgenda for this Session

• 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

• 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

• 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:

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?

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.

1.6 Category Manager1.6 Category Manager

In Category Manager, I can see nested structure.

1.6 Article Manager1.6 Article Manager

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

1.6 Article Editor1.6 Article Editor

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

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?

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?

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.

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.

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?

Template list displays thumbnails.Preview link shows larger image.

Template Styles / TemplatesTemplate Styles / Templates

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

Template Styles / TemplatesTemplate Styles / 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?

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?

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?

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

Examples Examples

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?

• 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

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?

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?

The popup menu of module positions includes use or position.

Module ManagerModule Manager

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…

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

• 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

• 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

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

• 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

• 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!

• 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

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

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

Useful LinksUseful Links

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

barb@irislines.com

Questions? Questions?

Barb AckemannIrisLines, LLC

barb@irislines.com

Thank you! Thank you!