The Warp framework provides a flexible module system that handles module types with different templates and styles, letting you display your content anywhere on your site. Of course, the whole 3-column-layout and the fluid module grids are built without using any tables. Almost any column and module layout can be achieved with the Warp framework. Read the following descriptions carefully to learn all about the possibilities offered by the Warp framework.

Module Variations

This template comes with many different module types. They are completely independent of the background of the container they're displayed in, no matter if the background is light or dark. For each module you can choose the style and color, displayed badges and header icons and the YOOtools color. To enable the specific styles, color, etc. for a module you have to set the specific module class suffix in the module parameters. The Warp framework will analyze the module class suffixes and pass parameters. For example: style-rounded, color-black, badge-new, icon-download and yootools-black.
Learn more and take a look at all the different module styles of this template at the Module Variations Page.

Module Positions

The Warp framework offers nearly unlimited combinations of module positions. The layout is based on two 3 column layouts, one nested into the other. This provides a wide range of column-based layout combinations, so you can achieve any kind of 1-Column, 2-Column or 3 Column layout and many more possible combinations.

In nearly all module positions you can publish as many modules as possible for your current layout. Surely, you are familiar with this for the vertical module positions like "left" and "right"; but the Warp framework also supports this feature for module positions where the modules are displayed in a horizontal row. The heights of all published modules in a horizontal row get adjusted to match each other.

All module positions are fully collapsible. If there is no module published in a certain position, this module position will contract and disappear.


Module Positions

Vertical Positions

More Details

Horizontal Positions

More Details

Module Proportions

One outstanding feature of the Warp framework is the possibility to choose between different module proportions for each module position. By default, the module proportions are set to equal. This means that all published modules in a horizontal module position have the same width. But you can also set the module proportions to golden ratio for a specif module position on a specific page. To do that, you have to add MODULENAME-PROPORTION to the page class suffix in the menu item parameters.

Example: Publish two modules in the "top" position on your "Home" menu item. The width of each module will be 50% by default. To have the golden ratio proportions go to the menu manager and set the page class suffix to "top-goldenratio" in the parameters of the "Home" menu item. Now the width of the first module will be 65% and of the second module 35% on the page "Home".

The following figures show the different proportions depending on the numbers of published modules.


Equal Proportions

Golden Ratio

Golden Ratio Proportions
If you want add your own custom proportion or learn more technical details, take a look at this tutorial: How to add custom proportions for module positions?

Header Subtitles

Module headers can have subtitles to provide a more detailed explanation of the module content. Just use the pipe character twice in the module name. For example "My title || My Subtitle".

This template's module system comes with a wide range of module styles, color variations, badges and icons. Below you can see which module styles come with color variations and with which badges and icons you can combine them.

Styles Colors Combinable
rounded white (default), grey Badges/Icons/Header
black - Badges/Icons
tab - Icons
polaroid, postit, line, ridge, band - -
Extras Variations
Header grey, blue, green, red, orange, pink, turquoise, gold, templatecolor
Badges hot, new, top, pick
Icons download, users, feed, twitter, mail, message, shopping, lock

Warp5 Framework

This template is based on the Warp5 framework. Warp5 is a fast and powerful template framework for Joomla that lets you create sophisticated Joomla templates in no time. It provides a hybrid fluid-pixel grid and all the elaborate functionalities that make our templates easy to edit, nice to look at and super fast, in every browser. Visit the Warp5 website and take a look at all the features...

Menu System

The menu system enhances Joomla's menu functions to create clearly arranged interfaces even for comprehensive sites. Learn more...

Module System

The module system provides a clear grid for Joomla modules and a wide diversity of templates for module variations. Learn more...

Design and Styles

We included a lot of different module and typography styles. So you can give your site a unique look and it will also ease your work when setting up your content.

Module Variations

This template comes with a wide variety of module stylings in many different shapes and colours. Take a look at all the different module variations.


This templates delivers you sophisticated typography and various stylings. Take a look at the style guide about all possible HTML tag styles.

Installation and Customization

New to YOOtheme? Don't worry! We provide a lot help to install and cutomize our tempaltes to get you started right away with your web project.

Installation Package

We provide a full Joomla installation package with the demo content of the website for this template. So you can take a look at how everything is set up in the Joomla backend.

Make sure you click "Install Sample Data" during the installation process.

Sliced Image Source Files

The editable fully sliced image source files of this template are available as download. With them you can completely customise your template's look to match your or your client's corporate identity.

Adobe Fireworks CS3 or higher is required to edit the image source files.


This template is fully compatible with all YOOtheme products like the YOOtools, the ZOO and the Teamlog extension.

Basic Help

Learn more about how to install and set up a YOOtheme template and watch this video tutorial.