法语新闻

ZOO

打印
PDF

Take the video tour on the ZOO! 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.

Read more...

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.

Read more...

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.

Read more...

Typography is a key element in web design. This templates delivers you sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template. It also helps you to set up the available classes for special stylings.

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"

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

  1. Default <ol> tag
  2. Lorem ipsum dolor
  3. Lorem ipsum dolor
  1. <ol> tag with class="disc"
  2. Item 2
  3. Item 3
  4. Item 4

Div and Span Styles

<div> or <span> tag with class="note" 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.
<div> or <span> tag with class="info" 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.
<div> or <span> tag with class="alert" 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.
<div> or <span> tag with class="download" 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.
<div> or <span> tag with class="tip" 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.

Blockquote and Q Styles

Default <q> tag: This is a quote!

Default <blockquote> tag with block element as child:

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.

<blockquote> tag with class="quotation" and an an additional <p> tag.
(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

Form legend

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 */
}
		

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.

Positions

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.

Default

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".

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.