Vous trouverez des centaines de documents uniques, de précieuses ressources et des liens importants en tous genres pour les enfants du préscolaire et primaire.

En tant que membre, vous pourrez :

Télécharger des centaines de documents
Accéder à toutes nos sections
Accéder à nos forums exclusifs

Tableless template overrides

From 2009 on all YOOtheme templates come with overrides for Joomla's core output. This means that not only the template's layout is tableless but also the whole content area that Joomla usually renders as tables.

The YOOmenu system

The YOOmenu is a flexible all-in-one menu system right out of the box. It bundles some sophisticated features which are all covered in this advanced video tutorial. Here are some of them:

Advanced menu with split functionality and lots of fancy effects like sliding boxes and fading colors...
Learn more about setting up the menu by reading this tutorial.
Expanding and collapsing accordion menus. Watch the video tutorial.
Different page backgrounds for each menu item possible. Watch the video tutorial.
Menu items can have explanatory subtitles. Read the tutorial.
Background images for menu items. Read the tutorial.

Full compatibility with all YOOtools extensions

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

Of course, this YOOtheme template is also fully compatible with the Teamlog component.

Installation package & sliced image source files

You can download a full installation package of this template. It includes the current Joomla version and the complete demo content of the website you are looking at right now. You can install it to take a look at how everything is set up in the Joomla backend.

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

Also you can download the editable fully sliced image source files. 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.

Basic Help

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

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"

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

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 <blockquote>
Or <q> tag with class="blockqoute"

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

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 supports a wide variety of module positions and variations. Almost any column and module layout can be achieved with the YOOtheme module system. Read the following descriptions carefully to learn all about the possibilities this template has to offer.

Module Variations

Many modules variations are included in this template. They come with different colors and styles. To enable a specific module variation for a module you have to set the specific module class suffix in the module parameters.

All different module stylings can be seen at the Module Variations Page.

Module Positions

The YOOtheme module system offers nearly unlimited combinations of module positions. For example you can have a 1-Column, 2-Column or 3 Column layout. It is also possible to have a nested right column instead of a right column which has an equal height as the left column.

In most module positions you can publish as many modules as possible for you current layout. You are surely familiar with this for the vertical module positions like left and right. But with the YOOtheme module system we introduce some new module positions which supports publishing as many modules as possible in one horizontal row. Also the height of all published modules in one vertical row is adjust 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

More Details

Module Proportions

One outstanding feature of the YOOtheme module system is the possibility to chose between different module proportions for each module position. By default YOOtheme offers two module proportions: equal and golden ratio. For all module positions with the suffix "-equal" in the upper figure exists an equivalent module position with the suffix "-goldenratio". The proportions of the modules depend on the position in which they are published ("-equal" or "-goldenratio").

Example: You can publish 2 modules in top-equal. The width of each module will be 50%. If you publish the 2 modules in top-goldenratio the width of the first module will be 62% and of the second module 38%.

Of course you can publish the modules for each page in different positions. For example this feature allows you to publish one big module and a second smaller one (golden ratio) on the frontpage. For all other sites you can use equal module widths.

Important: For each page and each module position you have to chose if you are going to publish in the "equal" or "golden ratio" position. It is not possible to publish a module in the "equal" position and at the same time another module in the "golden ratio" position on the same page and for the same position. If this happens the "equal" proportion has priority and will be displayed. All modules published in the "golden ratio" position will not be displayed.

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

Equal

Golden Ratio

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?

Left Column Layout

This template supports two different layout options. The "left" module position can be aligned to the left or the right. To chose between these two possible options goto the Joomla backend, open the template parameters and set the parameter "Layout Style" to "left" or "right".

Left aligned

Right aligned

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.

Tableless template overrides

The YOOmenu system

Full compatibility with all YOOtools extensions

Installation package & sliced image source files

Basic Help

This is an H1 Header

This is an H2 Header

This is an H3 Header

This is an H4 Header

This is an H5 Header

This is an H6 Header

Inline Styles

Unordered List Styles

Ordered List Styles

Div and Span Styles

Blockquote and Q Styles

Combine Styles

Form Styles

Preformatted Text Style

Module Variations

Module Positions

Positions

More Details

Module Proportions

Equal

Golden Ratio

Left Column Layout

Left aligned

Right aligned

Sondage

Statistiques

Promotions

Bienvenue sur Éducathèque.com !

Contenu exclusif

Joomla! Features

Joomla! features:

The Community