HomeNews

法语新闻

Menu System

The Warp framework provides a powerful menu system to handle menu types with different templates and styles, letting you create any interface you have in mind. Learn more about setting up the menu by reading this tutorial.

Menu Types

In addition to our default menu rendering we provide two different menu types: the accordion and drop down menu. Both can be loaded by using the menu class suffix. For example, use "dropdown" or "accordion" as the menu class suffix to render the specific menu type.

Subtitles

Menu items can have subtitles to provide a more detailed explanation on what information a user will find. Just use the pipe character twice in your menu item name. For example, "My title || My Subtitle". Don't worry about the Joomla search. The pipe characters are removed in the Joomla search results. Read the tutorial.

JavaScript Effects

Most YOOtheme menus come with lots of fancy effects like smooth transitions and fading colors. Take a look at the JavaScript based menus provided by the Warp Framework to learn more.

Background Images

The menu item you set in the Joomla menu administration for each menu item will appear as the item's background image. It is also possible to load a different image for the same menu item, depending on the menu type. For example, if you have set an image "item1.jpg" for the sub menu and you need a larger image in the drop down menu, just place an image called "item1_dropdown.jpg" in the same folder. Learn more...

Page Color

A page color can be set individually for each menu item. That way, you can style every page linked to from a menu item independently. For example, use "itemcolor-black" as the page class suffix and the CSS class black will appear in the body tag of that page. video tutorial.

Drop Down Menu

Use "dropdown" as the menu class suffix and publish the menu in the "menu" position to load the drop down menu.

Multi columns

The number of columns in the drop down area can be set individually for each menu item to suit any of your needs. For example, use "columns-2" in the page class suffix and the drop down menu of this menu item will have two columns. This way you can define different drop down columns for each menu item.

Flexible drop down width

To keep CSS modification as simple as possible, we provide a template parameter for the column width of the drop down menu. You can set the column width in the template configuration.

JavaScript

Moves the drop down area out with a smooth transition. The drop down area also remains visible for some milliseconds when the mouse leaves it unintendedly. And of course, the menu keeps fully functional if JavaScript is disabled.

Drop Down Module Position

You can mix the drop down menu with any Joomla module by publishing it in the "menu" position. The login module, for example. The module will drop down and look like it is part of the menu.

Accordion Menu

Use "accordion" as the menu class suffix and publish the menu (for example, in the "left" or "right" position) to load the accordion menu.

A smooth accordion effect can be applied to the sub menu when using a menu item "separator". Closed/Opened state and two different sliding modes are supported. Learn more.

Module Variations

作者：Administrator | 2007-12-19

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	white (default), grey	Badges/Icons
chrome	white (default), black, blue, green, orange	Badges/Icons
tab	-	Icons
polaroid, postit, line	-	-

Extras	Variations
Badges	hot, new, top, pick
Icons	download, users, feed, twitter, mail, message, shopping, lock

Template

Warp5 Framework

This template is based on the Warp5 framework. Warp5 is a slick 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. 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.

Typography

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.

Compatibility

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

All YOOtools extensions are working right out of the box. Take a look at the demo pages and watch the video tutorials.

Basic Help

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

Warp5 Framework

Warp is mainly a CSS/HTML framework for Joomla that provides a toolbox of functionalities using PHP and JavaScript. We created it to provide web developers and designers with a set of tools to take off their shoulders what has to be done for every project over and over again, so they can focus on the unique tasks that come with their specific web development project.

Below you find all the CSS, PHP and JavaScript features provided by the Warp framework. Also, learn more about the menu system and the module system.

CSS & HTML Framework | PHP Toolbox | JavaScript Toolbox | Menu System | Module System

CSS/HTML Framework

Our CSS/HTML Framework creates a very robust and flexible layout based on web standards. It is easy-to-use, search engine friendly and cross browser compatible.

Feature	Description
3 Column Layout	The CSS framework uses two 3-column-layouts, one nested into the other. This provides a wide range of column-based layout combinations.
Search Engine Friendly	The 3-column-layout is optimized for search engines and comes with a 2-1-3 column ordering. In the markup, the main content comes first before the left and right column.
Tableless Layout	Of course, the whole 3-column-layout and the fluid module grids are built without using any tables, as it is the standard for any modern CSS/HTML framework.
Joomla Overrides	The Warp framework comes with overrides for Joomla's core output to also render the content area with meaningful HTML markup instead of tables.
Modules Types	The different module types are completely independent of the background of the container they're displayed in, no matter if the background is light or dark.
Menu Modules	You can mix the drop down menu with any Joomla module, for example, the login module. The module will drop down and look like it is part of the menu.
CSS Reset	A CSS reset removes the inconsistent styling of HTML elements provided by browsers and sets suitable default values. Form styles are also especially improved.
Cross-browser Support	The framework is designed to be fully compatible with Firefox 3+, Internet Explorer 6+, Safari 3.2+, Opera 9.5+, Chrome 1+, Camino and Konqueror.
Validation	A basis for our framework to provide cross-browser support is that it validates to XHTML and CSS web standards.
Minimum of IE6/IE7 Hacks	Our framework reduces the need to fix CSS for the Internet Explorer to an absolute minimum. However, of course it provides the CSS fixes necessary to make your site look good in IE6 and IE7.
Image Sprites	We take advantage of image sprites to the fullest. Means: We put as many image slices as possible into a single image file to minimize the loading time of your website.
Accessibility	The layout structure provides good accessibility. And of course the template stays fully functional if JavaScript is disabled.
Template Parameters	To keep template customizations as easy as possible many important widths can be set in the template configuration. For example, for the main page, all layout columns and for the drop down menu.
Mobile Devices	Our templates are fully compatible with mobile devices like iPhone and iPod Touch.
iPhone/iPod Touch Favicon	They also support the iPhone and iPod Touch favicon which you can find in a template's root folder.

PHP Toolbox

Our PHP code base for the Warp framework adds a lot of awesome features that aren't possible with standard Joomla templates. It takes your template customizations to the next level.

Feature	Description
Powerful Menu System	The Warp framework provides a powerful menu system to handle menu types with different templates and styles, letting you create any interface you have in mind.	View
Menu Types	In addition to our default menu rendering we provide two different menu types: the accordion and drop down menu. Both can be loaded by using the menu class suffix.
Drop Down Menu	The number of columns in the drop down area can be set individually for each menu item to suit any of your needs.
Flexible Module System	The flexible module system handles module types with different templates and styles, letting you display your content anywhere on your site.	View
Module Templates	The Warp framework provides a rich set of module templates to build any kind of module type. This way, every module variation only has the necessary amount of DIV containers.
Module Proportions	Different proportions can be set for each module position, for example, an equal width ratio for the top position and a golden ratio for the bottom position.
Module Parameters	The module class suffix allows you to set different module parameters like the style, color, badge, icon and the YOOtools color.
Menu and Module Subtitles	Menu items and module headers can have subtitles to provide a more detailed explanation on what information a user will find.
Joomla suffixes	The Warp framework makes full use of Joomla's page, menu and module suffixes to pass parameters. You can easily create your own parameters.
Single configuration file	All configurational parameter settings necessary for a template to work can be found in a single configuration file called config.php.
Gzip compression	A template's entire CSS and JavaScript can be compressed in a single file. You can also add gzip compression for ultra fast loading.
Ajax-based search results	The framework provides support to pass Joomla search results to Ajax calls. For example, the YOOsearch module uses this feature.
Page colors	A page color can be set individually for each menu item. That way you can style every page linked to from a menu item independently.

JavaScript Toolbox

Here is a list of the JavaScript key features provided by the Warp framework. You can customize this template by using a lot of smooth animations and fancy effects.

Feature	Description
Dropdown Menu	Moves the drop down area out with a smooth transition. The drop down area also remains visible for some milliseconds when the mouse leaves it unintendedly.
Fancy Menu	The Fancy Menu is a real eye-catcher. It adds smooth moving or fading background effects to the main menu bar.
Accordion Menu	A smooth accordion effect can be applied to sub menu when using a menu item "separator". Closed/Opened state and two different sliding modes are supported.
Slider Menu	When hovering the main menu items, a smooth horizontal sliding effect is added. It is the same effect as the famous YOOslider.
Smooth Scroll	Users are often disoriented when clicking on a link which immediately jumps somewhere else in the same document. This JavaScript smoothly scrolls to the new link rather than jumping there directly.
Match Heights	We provide an easy-to-use JavaScript to match the height of different HTML elements like the modules on the top and bottom positions.
Morphing Effects	With this script you can add transitions between CSS properties to create smooth animations. For example, an animated tab menu can easily be created.
Background Animations	This script allows you to create a periodical animation between unlimited background-colors.
IE6 Alpha Transparency	Two IE6 PNG fixes are provided. One to fix inline images by adding the CSS class "correct-png" and one to fix CSS background images. Highlight: background-position and background-repeat are supported!
IE6 :hover and :focus	This script fixes the :hover and :focus quirks of IE6 for any HTML element. A CSS class is applied when the HTML element is "moused over" and removed when "moused out".