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.

Please also check out our last posts on Warp in which we presented a brief overview on the framework’s history, showed you how fast it loads and checked out what the module system has to offer.

How it works

First of all, we use the Menu Class Suffix of a menu module to define what type of menu we want to render. The Warp framework comes with three different menu types, “dropdown”, “accordion” and “default”.

If we type in “dropdown”, the menu gets rendered with the HTML structure necessary for the dropdown menu, if we type in “accordion”, the accordion markup gets rendered. If we leave the Menu Class Suffix blank, the menu gets rendered with the standard list markup. Second, we deliver specific CSS for the different menu types. These CSS styles match exactly the rendered markup of a menu type to make it display the way we want it to look. We only use HTML and CSS to provide the menu system’s functionality, JavaScript is not needed to render and style the menus or to make them work. The JavaScript effects are added unobtrusively to complete the user experience by keeping the accessibility.

Menus are always displayed in a module in your frontend. This means that, for example, you can apply different module styles to the accordion menu and change the color of the surrounding module style. By the way: It is also possible to render any module in the “menu” position and to show it in the dropdown. The module’s title will show up as a tab in the main menu.

Adding some magic…

The Warp framework provides a few JavaScripts to add effects to menus used in Warp-based templates. For example, it is possible to create tabbed menus, the famous Fancy Menu with the sliding bubble or the Slider Menu that uses the same effect as the YOOslider. Also, different effects can be set for both the dropdown menu and the accordion menu.

We are now going to take a closer look at two menu module types, the dropdown menu and the accordion menu.

The Dropdown Menu

The shiny new dropdown menu lets you set the dropdown column width in the template parameters in your Joomla backend. It also allows you to add subtitles and images to menu items. When you split the main menu into a dropdown and a sub menu you can now set different images to be displayed in each of the menus. Via the Page Class Suffix you can set the number of dropdown columns for each level 1 menu item.

The dropdown menu also comes with new JavaScript features: When you accidentally move the cursor out of the dropdown menu it keeps being displayed for some of milliseconds, allowing you to move your cursor back onto the menu. Also, there is a new animation mode called “slide” which, unlike all other dropdown effects, does not extend and fade the dropdown but moves the whole menu downwards, out of the menu bar.

The Accordion Menu

The accordion menu can be loaded into any module style. In every template we provide default module styles that the accordion menu looks good in. To use the accordion effect, the level 1 menu items that shall trigger the effect have to be set up as separators. There are two effect modes: one closes all expanded accordion items when another accordion item is clicked, the other one can open more than one accordion item at the same time. A CSS class “active” is automatically applied when the accordion item is opened. That way, the opened accordion item will look exactly like an opened menu item without accordion effect.

The new Warp5 framework includes a comprehensive and sophisticated module system. It comes with a new parameterization of the module class suffix, module templates and styles with a lot of variations of colors, header icons and badges. Furthermore, almost any kind of layout is possible with the numerous module positions and their different module proportions that you can even create yourself.

How it works

With Warp5 we introduced new module parameters that are responsible for the entire look and layout of a module. We used the module class suffix to pass these parameters. This allows you to configure the module layout, style, color and much more of each Joomla module individually, so the whole module look does not depend not on the position or Joomla module type. You can use any module style on any module position for any Joomla module. Great, isn’t it? The parameters available in Warp5-based templates are: style, color, badge, icon and yootools. In addition to the parameters that come with our templates you can even create your own parameters that you can then pass via the Module Class Suffix.

Here is a little example: If you set the Module Class Suffix to “style-chrome color-blue badge-hot icon-twitter” the module template for the chrome style will be loaded, the chrome CSS style in blue color applied, a Twitter icon set to the module header and a “Hot” badge set in the top right corner. It is also possible to set the YOOtools color to black by using “yootools-black”.

Module templates

With Warp5 we introduced module templates - these are PHP files that contain the HTML structure of a module. That way we can load a structure of HTML containers that fits exactly with the necessary CSS for every module, so that there is never any bloated code with unneccessary DIVs and other tags on your website. Also, creating and implementing your own module templates is very easy now: You simply create a PHP file with the HTML containers you need and add it to the existing ones just by copying and pasting. Learn how to develop your own module templates and styles here…

Re-use of modules in templates based on Warp5

Because of the modularity of our module system the modules of the Warp5 framework can easily be copied from one template to another. You simply need to copy the CSS style and background images and to make sure the necessary module template is available. Another great advantage is the background-independence. We developed all module templates and styles having in mind that the module shall be usable on any background. This allows you to use them anywhere on your website, not only in specific positions. We achieve this by always using alpha-transparent PNG background images for all modules with rounded corners and/or shadows on the sides. This way your template can contain a wide variety of modules in many different shapes and colors.

Up to 11 times less images due to CSS sprites

Since Warp5 we put as many images as possible into so-called CSS sprites. Before, a module style could easily need up to eleven background images. Now, we try to put all images into a single image file to reduce the number of file request to an absolute minimum, which boosts the speed of your website enormously. You can read more about it in the Faster loading with Warp5 article.

Coding our templates we always have one thing in mind: Speed. When we created Warp5 we were thinking about how we can make our future templates perform the best they possibly can.

Despite its beauty, the first Warp5-based template "Phoenix" only loads 9 kb of CSS, 3 kb of images and optional 22 kb of JavaScript for all animated effects (Mootools library is included)!

Very few file requests

When you use a Warp-based template you will encounter very few file requests. Warp5 comes with two compression modes for CSS and JavaScript. The first one merges all CSS and JavaScript of a YOOtheme template each in a single file so that there is only one file request each instead of multiple ones. It is also possible to add the CSS and JS of extensions to these single files.

Gzip compression

The second compression mode, gzip mode, adds extra gzip compression to these single CSS and JS files to make them extra small. The file that all our JS gets delivered in then only has 22 kb … and MooTools is already included! In the screenshot from Firebug you see that two JS files get loaded, one of them is Joomla’s own caption.js file which has 1 kb:

All our templates’ CSS put together in a single file only has 9 kb when gzipped, including the styles for all modules and their color variations:

So you see, when you add it up, the CSS and JS responsible for all module variations, all our fancy effects, the typography and so on only take up roughly 32 kb. And if you don’t like JavaScript at all, you can even switch it off in the backend of your template. The template would stay fully functional.

CSS sprites

Another reason for why there are only so few file requests is that since Warp5 we minimize the requests by merging image slices into so-called CSS sprites. This means that we put as many image slices as possible into a single image file which significantly reduces the loading time of your website. Some of the sprites that we built the Phoenix template’s modules with contain up to 11 slices. This reduces the file requests from 11 to 1! To save you some bandwidth we also optimize the file size of all our templates’ PNG images. Even with all its rounded corners, in a basic layout without modules and with a dropdown menu, Phoenix only uses 11 background images that altogether only use 3.6 kb:

Even with all different modules and their color variations displayed on a page, you still only load 16 kb of images. To get a clue about all the features of the Warp framework please check out its new website we just set up!