Thu

05

Nov

2009

A Preview of the New Template Manager in Joomla! 1.6

Joomla 1.6 will include some important new changes in the Template Manager. This article gives you a preview of what you can likely expect in the final product.

New Template Styles

In Joomla you have always been able to assign a template to a particular menu page. This is done through the Template Manager. In Joomla 1.5 we added the ability to save template parameters which opened up a world of flexibility for users and designers.  The following screenshot shows the template edit page as it is in Joomla 1.5.

Screenshot

In Joomla 1.6 we have combined these two features and created the concept of "Template Styles" and this is now the default landing list in the Temlpate Manager.  The following screenshot shows the new page.

Screenshot

This template style list is also where you set the default template for both the frontend site and the backend administrator. The list is combined and you can filter on just one location if you want.

A template style is like a saved set of template options and you can create as many of these styles as you want for the same template. A simple example is a template with one option, that being for the base colour. The template might have the option to display in a red, blue or green theme. With template styles, you can create three styles, one each of the supported colours.  The following screenshot shows the page where you can edit the style giving it a name and setting the template options (template parameters in Joomla 1.5).

Screenshot

We realise that it may take quite a bit of time to set up styles, so in the list view we’ve provided a "clone" function that duplicates an existing style. This allows you to change just those one or two options (out of the 20 you’ve already set) quickly and easily.

Now, here is the major change. You do not assign a template to a number of menu pages anymore. Rather, in the menu link edit screen, there is a new field that allows you to select which style you want to use for that particular page.  The following screenshot shows you a typical edit page for a menu item.  The new template select list is show open at the bottom of the shot.

Screenshot

This puts the control right where it should be, on the menu page. You no longer have to go back and forth between the Menu Manager and the Template Manager to get the assignment correct. In addition, you no longer have to clone an entire template just to change some of the options that the template designer has included.  You'll also notice the new standard range of Toolbar actions that are available across the board in Joomla 1.6 (Save & New and also Save as Copy).  Save & New will save the current style and then return you to a blank edit screen, allowing to create a new style without going back to the main list.  When you click Save as Copy it will actually create a new copy of the style based on the one you have open and then return you to the edit screen.  This works exactly the same way as your favourite word processor (except you miss out the step of choosing the new name).

We have also noticed that some template designers include a lot of options by which you can configure a template. To help make these more manageable, we now allow the designer to create there own groups of options, just like you would see in the Basic and Advanced parameter sliders when, for example, editing a module. The designer can actually include any number of these groups and each one will be shown in its own slider. This would allow a designer to have, for example, a set of basic options, some more advanced settings, and then another group to control fancy addons for the template.

The Templates List

You might be wondering where the ability to customise and preview the template has gone. Well, in the sub-menu there is a second link to Templates.  The following screenshot shows you what the new tempates list looks like.

Screenshot

This list shows an improved version of the old template list. It includes the template thumb directly in the list (you used to have to hover over the template to see this). The template designer now has the option of providing a second, larger preview file that will popup when you click on the smaller thumb in the list.  In the following screenshot, we've clicked on the template thumbnails.

Screenshot

When you click on the template name, you are provided with a list of all the files you can edit on the one page (this was previously split into a number of pages in Joomla 1.5).  The following screenshot shows that you can edit the index.php and component.php files and all the CSS files included in the template.

Screenshot

Clicking the filename allows you to edit the source for the file using a new highlighting editor as shown in the next screenshot.

Screenshot

Conclusion

Template management has gone to a whole new level in Joomla 1.6.  The new template styles will provide designers and site administrators with previously unafforded flexibility without having to copy templates unnecessarily.

If you'd like to discuss these new features, please join in the Joomla Alpha 2 discussion on the forum.  If you are wanting to see these features and action (and are feeling a little bit lucky), you can download and test the nightly build of Joomla 1.6 (note these features may take a day to come through).

Please keep in mind that we are still in an Alpha stage and many things are either broken or not working as planned.


Andrew Eddie is a co-founder of the Joomla Open Source project and is highly active in the version 1.6 development process.  He currently operates a Joomla-based development and training consultancy New Life in IT, blogs regularly at the Art of Joomla and produces high-quality commercial Joomla extensions through his company JXtended.

92 Votes

36 Comments

Feed
  1. Hi Andrew,

    This really looks amazing, thanks for sharing :)
  2. great! this is a good news of the day, at least for me ;-)
  3. Woooow !

    It looks great !

    Hope it'll be soon in the nightly builds. [img]:-)[/img]
  4. Very nice!

    Just makes us wanting Joomla 1.6 more and more.

    Please release it soon :-D
  5. I can't wait, this new version is going to be wonderful, roll on the roll out pf the production stable release, I am really excited.
  6. Nice!

    love you guys (not that way);-)
    it would help in choosing the template faster!
    it's very, very... Joomla!:P

    thanks!
  7. P-E-R-F-E-C-T :-D
  8. For us template developers it will be very convenient.
    :-)
  9. When will be the final release fot Joomla 1.6?
  10. @Catalin - once you see the Beta roll out, it's all downhill from there. My guess is around February, but that's just a guess.
  11. the thing I miss the most:

    an option to make modules appear on certain pages
    and

    to continue their appearence on new pages..

    hope you understand...
  12. Very very impressive...

    I imagine that you can change options of a style AFTER assigning it to a menu item?
  13. Nice! I'm kind of a template junky anyway since my site is for a gaming team, We like to theme the layout for different games all the time.

    Always good to have options! Good work.

    I just hope everyone is working on 1.6 compatible ext. updates once they know how to update the old stuff so I can upgrade to the new Joomla.

    That 1.6 ACL system will be greatly used on my site!

    I already have been playing with the 1.6 Alpha on my localhost looks nice so far ;)
  14. Simply SWEET!
    :-)
  15. One question: Is the template selection inheritable? Meaning, if I select it for this menu option, can it be the default option for all descendants of that menu item, or do I need to walk through every child item and make the same change?
  16. This looks awesome. What temps with the core distribution have? Same three? Or are there any plans for another template compo? 8-)
  17. Excellent. It's changes like these that are going to take Joomla to the next level.

    Thanks Andrew.
  18. Yeah ! It looks great
    I 'm waiting it 8-)
  19. Cool ..It Rocks !
  20. Wow. Nice work! This is going to be awesome. Really appreciate your work. As a suggestion from a template developer, it would be nice to see the template manager integrate with the module params - for example, the ability to display and select available class suffixes for the active template. Another thing that would be helpful is a GPL theme browser (cough..wordpress):P
  21. Love it! Absolutely love it!

    Looking forward to... February? :)
  22. Yes
    good work
    Nice themes
    thank you
  23. This is awesome. I'm currently working a new template(s) that are slight variations (background colors, etc...) of the same thing - sounds like the new Template Styles would address this problem perfectly. Too bad it has to launch before 1.6 will be out :'(
  24. What more I can say? It is L O V E L Y!!!
  25. Wonderful development
  26. Wow... I love the 1.6 ....
    even more
  27. Pertect! I would appreciate a "preview" as it was in J!1.0.x showing module positions. The one from J1.5.x it's really ugly at least.

    Keep good work going on!

    Cheers, D.
  28. wow, is wonderful.
  29. Amazing changes! Can't wait! :-D
  30. Is there a calendar integration for templates? I want to configure Hallowin, Thanx giving, x’mas, valentine day templates based on actual day +10 day before that.

    Thanx,
    Chirag
  31. Fantastic Andrew. I didn't even cover that in our presentation this month on 1.6, and folks at JoomlaChicago are already stoked about it. ;)
  32. Nice, very nice, can't wait ;)
  33. Me wants it :-D me wants it ! Looking 4ward 2 it8 -)
  34. wow ! what a great news for us... I just can't wait any more......:-*
  35. Very Nice,thanks for share this
  36. I love the new highlighting in the source code editor.

    Any chance of line numbers too?

    This would be a big bonus when using fire bug to find a little CSS tweak. I often have to copy out the entire CSS file into my own editor just to make it easier to find the one element that I want to adjust.

    Thanks for the great work all. I can't wait for 1.6!

Add Comment


    • >:o
    • :-[
    • :'(
    • :-(
    • :-D
    • :-*
    • :-)
    • :P
    • :\
    • 8-)
    • ;-)