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.
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.
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.
Compatibility
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 go to the Warp5 documentation.
This is an H1 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H2 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H3 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H4 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H5 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is an H6 Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Dropcap: use <p class="dropcap">. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Horizontal Rule: <hr> tag with class="dotted"
Inline Styles
Default <a> tag
<a> with class="icon-folder"
<a> with class="icon-file"
<a> with class="icon-download"
<a> with class="icon-external"
<a> with class="icon-pdf"
Default <em>
<em> with class="box"
Default <acronym>
Default <abbr>
Unordered List Styles
- Default <ul> tag
- Lorem ipsum dolor
- Lorem ipsum dolor
- <ul> with class="checkbox"
- <ul> with class="arrow"
- <ul> with class="star"
- <ul> with class="check"
Ordered List Styles
- Default <ol> tag
- Lorem ipsum dolor
- Lorem ipsum dolor
- <ol> tag with class="disc"
- Item 2
- Item 3
- Item 4
More List Styles
Headline
<ul> with class="headline"Headline
Lorem ipsum dolor sit amet.Headline
Lorem ipsum dolor sit amet.
Div and Span Styles
Blockquote and Q Styles
Default <q> tag:This is a quote!
Default <blockquote> tag with block element as child:
<blockquote> tag with class="quotation" and an an additional <p> tag.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
(use <blockquote><p>....</p></blockquote>)
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Combine Styles
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Combine Tags with class "inset-right" or "inset-left". Example: <span class=" info inset-right width25">. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Combine Tags with class "inset-right" or "inset-left". Example: <q class=" blockquote inset-right width25">.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Possible Width Classes .width15, .width18, .width20, .width23, .width25, .width33, .width35, .width40, .width45, .width50 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Form Styles
Preformatted Text Style
pre {
margin: 10px 0 10px 0px;
padding: 5px 0 5px 10px;
border: 1px dotted #aab4be;
border-left: 20px solid #b4b4b4;
background: #fafafa;
font-size: 90%;
color: #2E8B57;
font-family: "Courier New", Courier, monospace;
/* Browser specific (not valid) styles */
/* to make preformatted text wrap */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla */
}
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 |
|---|---|---|
| box | white, gradient, templatecolor, black, beige | Badges/Icons/Header |
| polaroid, postit | - | - |
| Extras | Variations |
|---|---|
| Badges | hot, new, top, pick |
| Icons | download, users, feed, twitter, mail, message, shopping, lock |
The ZOO extension is a very versatile catalog system for Joomla which allows you to create different catalogs for all purposes. It comes with a comprehensive content construction kit (CCK) which gives you the ability to create your very own custom content types.
Catalog Templates
The Pro Edition of the ZOO comes with additional templates for different kinds of catalogs. In this context catalogs can also mean applications: Most common Joomla components are at the bottom catalogs with a specific item type. For example a blog is a catalog with articles and a download archive is a catalog with downloadable items.
With the ZOO you can achieve the same functionality as of many Joomla extensions and even more. To get you started right away we created additional templates with pre-built types for the ZOO Pro Edition. They are designed for specific puposes like a personal blog or a download archive. All these templates are ready to use. That means, with the ZOO Pro Edition you are only a few clicks away from getting your new catalog online without worrying too much about technical details.
Content Construction Kit
One of the ZOO's key features is a Content Construction Kit (CCK) that gives you the ability to create your very own custom content types. For each custom content type you create you can select the exact elements the type should consist of, like text, images or a file download. In one type you can use any kind of element as often as you want, in any combination. You can also add and remove elements from a custom type at any time, even if you already created items of that type. The elements are completely pluggable and YOOtheme will continually extend the current set of elements.
