One of the biggest goals for us during the development was to move from a catalog system to an application builder. The CCK feature from ZOO 1.0 already allows us to create content specific types to fit exactly your requirements. But on the other side everything in ZOO 1.0 was a catalog with the same parameters and content fields. We didn’t like that concept that each catalog has the same properties and settings. For example a blog, a product catalog or a download archive aren’t the same and have different requirements. So the next step was to allow catalogs to have their own properties, settings and workflows and to be a real content application. With ZOO 2.0 we did this step and it is not a catalog system with a CCK anymore. ZOO 2.0 is a content application engine that lets you create your own apps!

Let’s start with an example!

Imagine you are setting up a new website and need a private blog. When you create the blog a new section will appear where you can manage your private blog with its own items, categories and content. After a few days you decided to start blogging about your business and you don’t want to mix it up with your private blog stuff. Again you can easily create a new blog and another section will appear where you can write articles about your business. This is great! You have 2 instances of the blog application and each instance manages its own stuff. A couple of weeks later you want to add your wines and electronics and make it a browseable catalog. Again you can create two separate instances of the product catalog app. One for wines and the other for electronics. In general you can create multiple instances of every app in Zoo 2.0.

The App Instances

Normally you will spend most time working inside an app instance to create and manage your content. So let’s go back to our example. We created 2 instances of the blog app. In the configuration of each blog you can choose which template should be used to display the content. Further you can configure some global settings for example for the RSS feed and comments. In each blog instance you can manage its own content. This means each blog has its own frontpage, categories, items, comments and tags. And you can manage all this content in the blog instance. The same goes for the 2 product catalogs. But the big difference between the blogs and catalogs is that they are instances of different apps. This means they have for example different templates and settings to fit their specific needs. Let’s take a look at the core part: the apps itself!

The Apps

In ZOO 2.0 apps are small ZOO extensions which are developed for a specific purpose like a blog, a product catalog, a download archive and more. Further each app comes with it’s own templates which can be assigned to each app instance individually. Every template loads its own assets like images, CSS or JavaScript. Templates include sub templates for all app views like the frontpage, category and item. We also have to introduce a new core concept for the templates: the layouts! Layouts are responsible to render items with its element positions. Element positions are similar to the module positions in Joomla templates. Each layout has it’s own set of element positions. So when you create your types you can drag ‘n drop the elements on the element positions provided by the template. In ZOO 1.0 you had to edit your template to render an element. This is no longer necessary. Just drag ’n drop them on the element positions. This is awesome! Another new feature of the template engine are global template parameters. Each template has its own set of parameters. When you create an app instance you can set the global template parameters in the configuration. These global parameters will be used by default but the template engine allows you to set them individually for the frontpage, each category and item. You know this concept from Joomla! but we improved it a little bit.

Next important parts of an app are the types. We introduced the types and elements concept with ZOO 1.0 as Content Construction Kit (CCK). It allows you to create your very own custom content types which mean you can select the exact elements the type should consist of, like text, images or many more. Later when creating new items in your app instance you choose which type the item should be. For the blog app for example you would have an article and an author type. Also you can create predefined types which are bundled with the app. This is great because it allows users to start instantly creating the content using the predefined types. You can edit existing types and add easily new ones. Another great feature is that you can also attach your own elements. So if you need a specific element for your app and there is currently no one which matches your needs in the ZOO 2.0, you can add your own elements to the app.

Further we provide a lot of parameters which allows you to configure and extend your app. You can define basic app parameters which can be used by the app. We got content parameters which allow extending the frontpage and categories with content fields. For example you can add text, textareas and images to categories. This means that app instances of different apps can have different content fields for categories. Isn’t this awesome? It’s a CCK for the frontpage and the categories! Further apps include comments configuration, language files and the alpha index. The alpha index configuration allows you to add more individual characters to match you native language.

Of course we have an installation manager for apps. They can be uninstalled and you can install new ones. It is also possible to export your own created apps and share it with others. We hope this gives you a overview of the new app concept of ZOO 2.0. We are pretty excited with the new approach of ZOO 2.0 to be a content application engine.

Next post we will take a closer look on the new user interface and all the usability improvements. We have more awesome UI stuff to show!

Actually the new ZOO release was planned for summer 2009. We had some cool features implemented like “drag ’n drop” element positions to improve templating and the overall usability. The project codename was ZOO 1.1. But as always we had some new ideas and we did a brainstorming about how we could add essential improvements to the software architecture to make it more future proof. We didn’t like the old concept that everything is a so called “catalog”. For example a blog isn’t necessarily a typical catalog and may have other features and workflows than a product catalog. And a business directory may have again different requirements. It was great that we already had a CCK which allows to build content items that meet exactly your requirements. The next big thing for us was to transform this idea and make it possible to build your own content applications which have their own parameters, workflows and features instead of having a super catalog, which has hundreds of parameters and options to cover everything. So we started the ZOO 1.5 development in late summer to move from a CCK to a Content Application Builder.

Introducing Content Applications

What does “Content Application Builder” mean? A content application (or in short: app) has its own application parameters. It has its own templates. Each template again has its own template parameters. Further a content app has its own types, items, categories, feeds, etc. It can even have its own elements. One of the great things is while you are working inside an app you are only seeing the content like items and categories of this particular app and it’s not mixed up with other apps. This gives you a much better workflow when working with your content. We also wanted to make these apps exportable so that it is very easy to share apps among each other. So we implemented an installation manager which allows you to uninstall and install new apps. Also it was essential to us to make an app extendable. Finally apps became small extensions for ZOO with their own controller and views. You can do anything by extending your app!

ZOO 2.0 is around the corner

By designing and developing this new application architecture we reviewed the whole code base of ZOO 1.0. At the end nearly 100% of code is rewritten from scratch for the new version. The code is now slicker, more flexible and much improved. We put a lot of effort into developing ZOO 2.0 and it took almost twice the time than developing version 1.0. To reflect on the completely new architecture and all the new features we decided to make a major version jump to ZOO 2.0! Which other new features are included? We got our own brand new native comment and tag systems. Both are very slick with a great usability. We got a completely new template engine with element positions. You can now arrange your content via drag ‘n drop. There is a new global parameter system for categories and items. All elements are completely rewritten and we added “repeat”-functionality and a lot of new features. And of course we also got a bunch of new elements. There is a lot more and we will talk about it in the next blog posts!

Goodbye ZOO LITE and PRO

How does the new app architecture affect the ZOO distributions? Another thing we didn’t like about the current ZOO 1.0 are the different ZOO editions: ZOO Pro and ZOO LITE. The update process isn’t that smooth if you want to move from LITE to PRO and we also have to deal with two different release packages. To cut a long story short with the new ZOO release there will only be one ZOO version. And now here it comes: it will be free for everyone distributed under the GPL license. It will include all the new features and a blogging app along with a template.

Cutting edge!

ZOO 2.0 is written from scratch and uses the latest web standards and technologies offered by modern browsers. We utilized all the new CSS3 properties and selectors, added the latest JavaScript stuff and used CSS image sprites for fast loading times. To achieve this we dropped the IE6 support for ZOO 2.0 like we already have for our templates since January 2010. ZOO 2.0 requires PHP 5.2+ and is of course compatible with PHP 5.3.

We care about our Members

You might ask: “ZOO 2.0 will be free and includes all new features? So why did I purchased ZOO PRO in the first placed?” Here is the answer. Currently we are developing a lot of new sophisticated apps for ZOO 2.0 to cover a wide range of uses. Like blogs, download archives, product catalogs and many more. Basically a versatile app bundle will replace the current ZOO PRO edition. We will also provide anybody who purchased the ZOO PRO edition access to the all new apps even if the membership is already expired. This means we will extend all active memberships and reactivate all expired memberships so that everybody has at least additionally two months of testing and working with ZOO 2.0 and all the apps. A couple of months ago we already extended the three months membership time to six months. So if you purchase the current ZOO 1.0 or the new apps for ZOO 2.0 you will have six months access to updates and our forum. We think this better reflects the time some projects take. One more thing: ZOO 2.0 will be a BETA release at first and only ZOO PRO members will have access to the BETA. Once ZOO 2.0 goes stable we will provide a public download for everybody.

The release date and the future

The release date for the ZOO 2.0 BETA is set for 23. March 2010. We got a new teaser site online with a countdown. Check it out! We will do a number of blog posts on the new app architecture and the new features in the coming days. After the BETA release it will not take that long for the public stable release. We are confident that the new architecture of ZOO 2.0 is future proof so that after the release we can focus on adding additional features. We are aiming for short release cycles for ZOO 2.1, 2.2 and so on. Also we will try to open the development process more by posting details about upcoming features.

If you enjoyed this reading get excited about ZOO 2.0! Because we are!

The template comes with a very clean and open design, only wrapping the articles in boxes to put your websites content into the visitors focus. Most of the template colors can be easily customized by just editing CSS and the use of only a few images will accelerate template loading time.

We created some new module styles for this template, like the new styles for the submenus and the YOOtweet module. The new module class suffixes for the ribbon header and the stamped style of modules complete the brand new look of this template. The template comes with 12 new color variations with subtle colors to match every kind of content.

New List Styles

Typography is a key element in web design. This templates delivers you a sophisticated typography and we also added two additional list styles to this template. The first new list style can be perfectly used to build lists with a nice menu style hover effect. It integrates in the template layout and changes its colors depending on the module position it is published in.
The second one is a neat list style with a plus sign and a dotted line as separator. Both can be used to put your lists in the right perspective.

Have a look at our Typography page and learn how to use them.

Feature list

• A variety of template color variations
• Built with the new Warp5 template framework
• Multi-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

One of the highlights of this template is the new designed tabbed style for the main menu which smoothly integrates the dropdown menu.

Template variations for every purpose

In this template we added 10 brand new astonishing template variations which will suite your needs. The wide range of different themes covers designs from clean over playful to complex background images. Your content will be supported by a large teaser area in the top position which, in combination with our YOOcarousel, can be perfectly used for rotating news articles or advertising.

Warp5

Vox is based on the powerful Warp5 framework which utilizes the latest web techniques. As announced in back in August, all templates released in 2010 and will drop the support for the old and outdated Internet Explorer 6 browser.

Feature list

• A variety of template color variations
• Built with the new Warp5 template framework
• Multi-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

This template comes with four impressive color variations: Black, White, Green and Blue. They fit perfect for gaming and sports sites. They are combined with different color and glow effects. We introduce two new impressive visual effects: We animated the background image of the header to create a pulsating gradient effect. And we slowly change colors of module headers, article separators and more to create a glowing color effect.

This new YOOtheme template is based on the powerful Warp5 framework which utilizes the latest web techniques. As announced in back in August, all templates released in 2010 and will drop the support for the old and outdated Internet Explorer 6 browser. Taking this step will ensure better templates which use latest web standards and technologies offered by modern browsers.

Come and visit the four Planets (The Dark, Ice, Battle and Water Variations) of this template or customize them to create your own new worlds.

Feature list

• Black, White, Green and Blue template variations
• Built with the new Warp5 template framework
• Multi-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

Template variations at its best

This time we have taken it a step further, to provide you great looking variations for websites about Adventure trips, Traveling, Vacations, Sports and Blogging. Further to provide a overall consistent layout, every variation comes with it’s own style for the modules. So make sure to check out every single template variation! This template also features a large top module position to publish your pictures or promotional content, e.g. in a YOOcarousel.

CSS3 Web Fonts

In Explorer, we used one of the great new features of CSS3, the font-face rule. With font-face you can enhance your website by using your favorite font. Just have a look at the article- and module headlines of this site. We also included different fonts for the templates variations.

Feature list

• Extensive themed template variations
• Built with the new Warp5 template framework
• Muti-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

Its header provides a large presentation area you can use for product images or large headlines and all menus have a stunning three-dimensional depth … check out the menu items’ cute little bullets! When you use the left and right column, the content area looks like it is hovering above them - a real eye-catcher.

Beautiful color variations

Symphony comes with a wide range of color variations and three extra themes we created to be used especially for cooking websites, online roleplay portals and blogs. Make sure to check out the perfectly balanced color combinations!

YOOtools in Action

Like its predecessor Mellow, Symphony also provides fresh looks for YOOtools. The YOOtools style overrides featured in this template include overrides for the YOOcarousel’s buttons and a nice text shadow for the YOOtweet module. And just like always, the YOOsearch got a style matching the rest of the template. Also, the presentation area can be perfectly used to display presentational YOOtools like the YOOscroller.

Small Warp5 Updates

We improved JS effect of the Down Down Menu for all Internet Explorers and added some new module templates. Also we did some small changes to the headings style in our Reset CSS.

Get Symphony and join the YOOtheme club today.

Feature list

• Built with the new Warp5 template framework
• Muti-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

It has modules that change their color when hovered. It also comes with pretty style overrides for the YOOaccordion and YOOcarousel modules which change according to the color variation that is in use.

You can use Mellow for all kinds of purposes … it presents your content in the proper light. And please pay attention to the nice three-dimensional menu tab design! And of course Mellow is based on the Warp5 Joomla template framework.

Feature list

• Built with the new Warp5 template framework
• Muti-column dropdown menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

Crystal offers lots of different color variations for menu items, allowing you to style every page in a different color. The background color of the drop down menu also changes when you change a menu item’s item color. Of course, you can combine all menu item-based color variations with all module color variations … variety galore!

By the way: We also wanted our ZOO component to fit into Crystal visually, so we included black CSS styles for ZOO. Now you can seamlessly integrate ZOO into the new YOOtheme Crystal template.

Warp5 updates

We added some minor stuff to our Warp5 framework. The YOOmorph JavaScript allows now to use an ignoreSelector and we added some new module templates.

Feature list

• Built with the new Warp5 template framework
• Muti-column dropdown menu with fancy effect
• Nice text shadow for headlines, modules and menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

Since it’s release in 2001, Microsoft realized that the IE6 was not the greatest piece of software they have ever written. So after about 5 year’s of development on the 18. October 2006 they released IE6 successor Internet Explorer 7.

Furthermore in March 2009 they even released todays latest version, Internet Explorer 8. Both successors offer a lot of improvements compared to the old IE6 and most importantly a better support of todays web standards. Fortunately the number of people using IE6 is decreasing slowly but steady and the release of the upcoming Windows 7 later this year will surely speed up this process.

So we decided to discontinue IE6 browser support in YOOtheme products by the end of the year 2009. This means all templates and extensions of 2009 will still be IE6 compatible, but starting in January 2010 we will not test IE6 compatibility anymore. By doing so we follow an actual trend of dropping IE6 support, as announced on a lot of popular websites like Youtube, Apple MobileMe, 37signals Basecamp or Digg. Why are we dropping the IE6 support? IE6 is clearly a past-generation browser and cannot deliver a rich user experience that modern browsers can. Also this step allows us to focus on modern web technologies to optimize and enhance our templates without all the IE6 drawbacks.

We´re sure that this will give our future YOOtheme releases an additional boost and we can be very excited about what to come.

So we say “Farewell IE6!” on January 1st 2010.

Flux shines with its flashy menu bar, for which we once again used our amazing fancy menu: The menu items look like they are buttons pushed into the menubar. Also the YOOsearch and the breadcrumbs fit in perfect with the template design. Of course, Flux comes with our awesome new Warp5 menu that you might already know from our last template Phoenix. It also allows you to publish modules in the dropdown menu and, like all our templates, it comes with loads of module variations.

Warp5 updates

We also added some new features to our Warp5 framework:

• The fancy menu effect is now also applied to modules published on the menu position.
• The effect of the fancy menu remains even when the cursor goes off the dropdown and back on again.
• You can assign individual widths for modules published in the dropdown via the Module Class Suffix, for example: dropdownwidth-255.
• You can set individual dropdown widths for menu items via the Page Class Suffix, for example: columnwidth-200.
• You can turn off background images for a specific menu via the Menu Class Suffix, for example: images-off.
• We also improved a few module templates.

Feature list

• Built with the new Warp template framework
• New muti-column dropdown menu with fancy effect
• Nice text shadow for headlines, modules and menu
• Lots of modules with color variations, endless combinations with icons and badges possible
• 2-1-3 column ordering for search engine friendliness
• Compact size, using gzip and image sprites
• Works with all YOOtools

2-1-3 column ordering means that in the HTML structure the Joomla component (which contains your most relevant content) gets rendered first, and then the left and right columns. The order of the columns displayed on the screen does not have anything to do with the order if the DIVs in the HTML structure. This is currently the most modern and search engine friendliest approach that is around. The image to the right shows the columns as displayed in Warp-based templates, the code to the left it is the HTML structure (simplified) that we use to create this layout:

<div id="main"> </div>
<div id="left"> </div>
<div id="right"> </div>

So, since Warp5 we use CSS to order the columns rather than putting the DIV with the ID "left" first in the HTML code.

It’s two of them!

We actually implemented the 2-1-3 column ordering twice, one nested into the other one, and it is very easy to change the width of your columns: Now, You can set them in the template parameters in the backend of your YOOtheme template and don’t have to modify any CSS for this any more.

Everything is accessible

Warp only makes use of unobtrusive JavaScript. All behavior is separated from the markup. This means that all content is accessible, even if your user has JavaScript switched off or if you switch off the JavaScript effects used in your Warp-based template. All JavaScript effects are put "on top" but are not necessary to be able to view the content of a website based on the Warp framework.