Joomla! 1.6 Templates – First Glance

In the upcoming Joomla! 1.6 release, templates take on a whole new shape. Probably the most exciting new feature of the template system for site owners will be the template styles. Now, when you use a template that has parameters for setting one of a multiple background, or overall color, or whatever, you can save that parameter configuration as a template style. So you could use the same template on multiple pages and have different styles without installing the same template several times. Another difference with Joomla! 1.6 templates from Joomla! 1.5 templates, is that you assign the pages to the template inside the Menu Manager for the link rather than from inside the Template Manager.

 

New Look for Joomla! 1.6 Template Manager

 

For developers, the most exciting feature will be that the core html scripts are all table-less now. It won’t be necessary to provide /html over-rides in your templates to achieve a table-less design. Templates which rely on core layouts will be better than they were with Joomla! 1.5. Unfortunately, this means that the names of certain joomla default divs, spans, and the like have been upgraded as well, so there is a new list of default joomla styles to plan css for in your templates.

A few changes in the code might be required to move a 1.5 template to 1.6. If the 1.5 template provided /html over-rides, it should transition to the new Joomla! 1.6 with minimal effort. I tested several of my templates on 1.6 this weekend, and only had to make 2 changes to achieve a consitent look and function between 1.5 and 1.6.

        global $mainframe;
        $messages = $mainframe->getMessageQueue();

had to be changed to

        $messages = JFactory::getApplication()->getMessageQueue();

and

global $mainframe;
echo $mainframe->getCfg('sitename');

became

$app    = &JFactory::getApplication();
echo $app->getCfg('sitename');

However, as Joomla! 1.6 gets closer to release, I’ll be thinking about how to use the new classes defined in core to style my templates and hopefully make them leaner in the process. At first glance, it looks like we template developers can cut the size of our css files with the new 1.6 templates.

Styles Used in Core /components Views

/com_contact/categories/default.php: div class=”jcategories-list[pageclass_sfx]”
/com_contact/categories/default.php: span class=”jitem-title”
/com_contact/categories/default.php: div class=”jdescription”

/com_contact/category/default.php: div class=”jcontact-category[pageclass_sfx]”
/com_contact/category/default.php: div class=”jdescription”
/com_contact/category/default.php: img class=”jalign[image_align]”
/com_contact/category/default.php: div class=”jcat-siblings”
/com_contact/category/default.php: div class=”jcat-children”
/com_contact/category/default.php: div class=”jcat-parents”

/com_contact/category/default_items.php: div class=”limit-box”
/com_contact/category/default_items.php: table class=”jlist-table”
/com_contact/category/default_items.php: th class=”item-num”
/com_contact/category/default_items.php: th class=”item-title”
/com_contact/category/default_items.php: th class=”item-position”
/com_contact/category/default_items.php: th class=”item-email”
/com_contact/category/default_items.php: th class=”item-phone”
/com_contact/category/default_items.php: th class=”item-phone”
/com_contact/category/default_items.php: th class=”item-phone”
/com_contact/category/default_items.php: tr class=”even”
/com_contact/category/default_items.php: tr class=”odd”
/com_contact/category/default_items.php: td class=”item-num”
/com_contact/category/default_items.php: td class=”item-title”
/com_contact/category/default_items.php: td class=”item-position”
/com_contact/category/default_items.php: td class=”item-email”
/com_contact/category/default_items.php: td class=”item-phone”
/com_contact/category/default_items.php: td class=”item-phone”
/com_contact/category/default_items.php: td class=”item-phone”
/com_contact/category/default_items.php: div class=”jpagination”
/com_contact/category/default_items.php: div class=”jpag-results”

/com_contact/contact/default.php: div class=”jcontact[pageclass_sfx]
/com_contact/contact/default.php: span class=”jcontact-name”
/com_contact/contact/default.php: span class=”jcontact-position
/com_contact/contact/default.php: span class=”jcontact-image”

/com_contact/contact/default_address.php: div class=”jcontact-address”
/com_contact/contact/default_address.php: span class=”[marker_class]”
/com_contact/contact/default_address.php: div class=”jcontact-street”
/com_contact/contact/default_address.php: div class=”jcontact-suburb”
/com_contact/contact/default_address.php: div class=”jcontact-state”
/com_contact/contact/default_address.php: div class=”jcontact-postcode”
/com_contact/contact/default_address.php: div class=”jcontact-country”
/com_contact/contact/default_address.php: div class=”jcontact-contactinfo”
/com_contact/contact/default_address.php: span class=”jcontact-emailto”
/com_contact/contact/default_address.php: span class=”jcontact-telephone”
/com_contact/contact/default_address.php: span class=”jcontact-fax”
/com_contact/contact/default_address.php: span class=”jcontact-mobile”
/com_contact/contact/default_address.php: span class=”jcontact-webpage”
/com_contact/contact/default_address.php: div class=”jcontact-miscinfo”
/com_contact/contact/default_address.php: span class=”jcontact-misc”

/com_contact/contact/default_articles.php: div class=”jcontact-articles”

/com_contact/contact/default_form.php: div class=”jcontact-error”
/com_contact/contact/default_form.php: div class=”jcontact-form”
/com_contact/contact/default_form.php: form class=”form-validate”
/com_contact/contact/default_form.php: div class=”jform-required”
/com_contact/contact/default_form.php: div class=”contact_email”
/com_contact/contact/default_form.php: input class=”inputbox”
/com_contact/contact/default_form.php: input class=”inputbox required validate-email”
/com_contact/contact/default_form.php: button class=”button validate”

/com_contact/contact/default_links.php: div class=”jcontact-links”

/com_content/archive/default.php: h2 class=”[pageclass_sfx]

/com_content/archive/default_items.php: li class=”row<?php echo ($item->odd +1); ?>”
/com_content/archive/default_items.php:    span class=”jcreated-date”
/com_content/archive/default_items.php: span class=”jcreated-by”
/com_content/archive/default_items.php: div class=”intro”

/com_content/article/default.php: div class=”jarticle[pageclass_sfx]
/com_content/article/default.php: ul class=”jactions”
/com_content/article/default.php: li class=”jprint”
/com_content/article/default.php: li class=”jemail”
/com_content/article/default.php: li class=”jedit”
/com_content/article/default.php: li class=”jprintscreen”
/com_content/article/default.php: div class=”jiteminfo”
/com_content/article/default.php: span class=”jcategory”
com_content/article/default.php: span class=”jcreated-date”
/com_content/article/default.php: span class=”jmodified-date”
/com_content/article/default.php: span class=”jcreated-by”

/com_content/categories/default.php: div class=”jcategories-list[pageclass_sfx]
/com_content/categories/default.php: span class=”jitem-title”
/com_content/categories/default.php: div class=”jdescription”

/com_content/category/blog.php: div class=”jarticles[pageclass_sfx]
/com_content/category/blog.php: ul class=”jsubcategories”
/com_content/category/blog.php: ul class=”jarticles-lead”
/com_content/category/blog.php:    li class=”system-unpublished”
/com_content/category/blog.php: ul class=”jarticles-intro jcols-[#]”
/com_content/category/blog.php: li class=”jcolumn-[#]
/com_content/category/blog.php: div class=”jarticles-more”
/com_content/category/blog.php: div class=”jpagination”
/com_content/category/blog.php: div class=”jpag-results”

/com_content/category/blog_item.php: div class=”system-unpublished”
/com_content/category/blog_item.php: ul class=”jactions”
/com_content/category/blog_item.php: li class=”jprint”
/com_content/category/blog_item.php: li class=”jemail”
/com_content/category/blog_item.php: li class=”jedit”
/com_content/category/blog_item.php: div class=”jiteminfo”
/com_content/category/blog_item.php: span class=”jcategory”
/com_content/category/blog_item.php: span class=”jcreated-date”
/com_content/category/blog_item.php: span class=”jmodified-date”
/com_content/category/blog_item.php: span class=”jcreated-by”
/com_content/category/blog_item.php: div class=”jreadmore”
/com_content/category/blog_item.php: div class=”jseparator”

/com_content/category/blog_links.php: ul class=”jlinks”

/com_content/category/default.php: div class=”jcategory[pageclass_sfx]”
/com_content/category/default.php: div class=”jcat-articles”
/com_content/category/default.php: div class=”jcat-siblings”
/com_content/category/default.php: div class=”jcat-children”
/com_content/category/default.php: div class=”jcat-parents”

/com_content/category/featured.php: div class=”jarticles-featured[pageclass_sfx]”
/com_content/category/featured.php: ul class=”jarticles-lead”
/com_content/category/featured.php: li class=”system-unpublished”
/com_content/category/featured.php: ul class=”jarticles-intro jcols-[#]”
/com_content/category/featured.php: li class=”jcolumn-[#]”
/com_content/category/featured.php: div class=”jarticles-more”
/com_content/category/featured.php: div class=”jpagination”
/com_content/category/featured.php: div class=”jpag-results”

/com_content/category/featured_item.php: ul class=”jactions”
/com_content/category/featured_item.php: li class=”jprint”
/com_content/category/featured_item.php: li class=”jemail”>
/com_content/category/featured_item.php: li class=”jedit”
/com_content/category/featured_item.php: div class=”jiteminfo”
/com_content/category/featured_item.php: span class=”jcategory”
/com_content/category/featured_item.php: span class=”jcreated-date”
/com_content/category/featured_item.php: span class=”jmodified-date”
/com_content/category/featured_item.php: span class=”jcreated-by”
/com_content/category/featured_item.php: div class=”jreadmore”
/com_content/category/featured_item.php: div class=”jseparator”

/com_content/category/featured_links.php: ul class=”jlinks”

/com_content/form/edit.php: h2 class=”[pageclass_sfx]”
/com_content/form/edit.php: form  class=”form-validate”

/com_content/frontpage/default.php: div class=”jarticles-featured[pageclass_sfx]”
/com_content/frontpage/default.php: ul class=”jarticles-lead”
/com_content/frontpage/default.php: li class=”system-unpublished”
/com_content/frontpage/default.php: ul class=”jarticles-intro jcols-[#]”
/com_content/frontpage/default.php: li class=”jcolumn-[#] system-unpublished”
/com_content/frontpage/default.php: div class=”jarticles-more”
/com_content/frontpage/default.php: div class=”jpagination”
/com_content/frontpage/default.php: div class=”jpag-results”

/com_content/frontpage/default_item.php: ul class=”jactions”
/com_content/frontpage/default_item.php: li class=”jprint”
/com_content/frontpage/default_item.php: li class=”jemail”
/com_content/frontpage/default_item.php: li class=”jedit”
/com_content/frontpage/default_item.php: div class=”jiteminfo”
/com_content/frontpage/default_item.php: span class=”jcategory”
/com_content/frontpage/default_item.php: span class=”jcreated-date”
/com_content/frontpage/default_item.php: span class=”jmodified-date”
/com_content/frontpage/default_item.php: span class=”jcreated-by”
/com_content/frontpage/default_item.php: div class=”jreadmore”
/com_content/frontpage/default_item.php: div class=”jseparator”

/com_content/frontpage/default_links.php: ul class=”jlinks”

/com_mailto/mailto/default.php: input type=”text” class=”inputbox”
/com_mailto/mailto/default.php: button class=”button” class=”button”

/com_newsfeeds/categories/default.php: div class=”jcategories-list[pageclass_sfx]”
/com_newsfeeds/categories/default.php: span class=”jitem-title”
/com_newsfeeds/categories/default.php: div class=”jdescription”

/com_newsfeeds/category/default.php: div class=”jnewsfeed-category[pageclass_sfx]”
/com_newsfeeds/category/default.php: div class=”jcat-siblings”
/com_newsfeeds/category/default.php: div class=”jcat-children”
/com_newsfeeds/category/default.php: div class=”jcat-parents”

/com_newsfeeds/category/default_items.php: div class=”limit-box”
/com_newsfeeds/category/default_items.php: table class=”jlist-table”
/com_newsfeeds/category/default_items.php: th class=”item-num”
/com_newsfeeds/category/default_items.php: th class=”item-title”
/com_newsfeeds/category/default_items.php: tr class=”even”
/com_newsfeeds/category/default_items.php: tr class=”odd”
/com_newsfeeds/category/default_items.php: td class=”item-title”
/com_newsfeeds/category/default_items.php: td class=”item-num-art”
/com_newsfeeds/category/default_items.php: td class=”item-title”
/com_newsfeeds/category/default_items.php: td class=”item-num-art”
/com_newsfeeds/category/default_items.php: div class=”jpagination”
/com_newsfeeds/category/default_items.php: div class=”jpag-results”

/com_newsfeeds/newsfeed/default.php: div class=”jnewsfeed[pageclass_sfx][direction]”
/com_newsfeeds/newsfeed/default.php: h2 class=”[direction]”
/com_newsfeeds/newsfeed/default.php: h3 class=”[direction]”

/com_search/search/default.php: h2 class=”[pageclass_sfx]”

/com_search/search/default_error.php: table class=”searchintro[pageclass_sfx]”

/com_search/search/default_form.php: table class=”contentpaneopen[pageclass_sfx]”
/com_search/search/default_form.php: input type=”text” class=”inputbox”
/com_search/search/default_form.php: button class=”button”
/com_search/search/default_form.php: table class=”searchintro[pageclass_sfx]”

/com_search/search/default_results.php: table class=”contentpaneopen[pageclass_sfx]”
/com_search/search/default_results.php: span class=”small[pageclass_sfx]”

/com_users/profile/edit.php: span class=”optional”
/com_users/profile/edit.php: button type=”submit” class=”validate”

/com_users/registration/default.php: form class=”form-validate”
/com_users/regist
ration/default.php: span class=”optional”
/com_users/registration/default.php: button type=”submit” class=”validate”

/com_weblinks/categories/default.php: div class=”jcategories-list[pageclass_sfx]”
/com_weblinks/categories/default.php: span class=”jitem-title”
/com_weblinks/categories/default.php: div class=”jdescription”

/com_weblinks/category/default.php: div class=”[pageclass_sfx]”
/com_weblinks/category/default.php: div class=”jcat-siblings”
/com_weblinks/category/default.php: div class=”jcat-children”
/com_weblinks/category/default.php: div class=”jcat-parents”

/com_weblinks/category/default_items.php: table class=”jlist”
/com_weblinks/category/default_items.php: td class=”sectiontablefooter[pageclass_sfx]
/com_weblinks/category/default_items.php: tr class=”odd”
/com_weblinks/category/default_items.php: tr class=”even”
/com_weblinks/category/default_items.php: a class=”‘. $menuclass .'”
/com_weblinks/category/default_items.php: form class=”form-validate

/com_weblinks/weblink/edit.php: div class=”componentheading[pageclass_sfx’]
/com_weblinks/weblink/edit.php: input class=”inputbox”
/com_weblinks/weblink/edit.php: textarea class=”inputbox”
/com_weblinks/weblink/edit.php: td class=”key”

/com_wrapper/wrapper/default.php: div class=”contentpane[pageclass_sfx]”
/com_wrapper/wrapper/default.php: h2 class=”[pageclass_sfx]”

/com_wrapper/wrapper/default.php: iframe class=”wrapper[pageclass_sfx]”

Leave a Reply

Your email address will not be published. Required fields are marked *