Bases sur les thèmes
Qu'y a-t-il dans un dossier de thème ?
Un dossier de thème contient les éléments suivants :
pix/ config.php favicon.ico footer.html header.html styles.php styles_color.css styles_fonts.css styles_layout.css styles_moz.css
Le dossier pix
Ce dossier contient toutes les images et icônes utilisées dans le thème. Les thèmes 1.5 sont fournis avec des images pour les onglets et parfois pour les dégradés. (Tous les thèmes de Moodle 1.5 utilisent un dossier pix.)
Le fichier favicon.ico
C'est la petite icône affichée dans les navigateurs dans la barre d'adresse ou dans les marque-pages. Voir Favicon.
Ces fichiers contiennent votre logo, les menus de connexion, la barre de navigation, le logo Moodle, etc. C'est dans ces fichiers que vous pouvez donner à votre Moodle un aspect individualisé en haut et au bas de toutes les pages (dès la version 1.4).
Toutes les images liées dans header.html et dans footer.html doivent utiliser la variable $CFG->httpswwwroot au lieu de l'habituelle $CFG->wwwroot, afin que la page de connexion (et les autres pages tournant sous https) fonctionne correctement lorsque la variableloginhttps est activée.
Les paramètres principaux disponibles dans ces fichiers sont les suivants :
$CFG (objet contenant toutes les variables du système) $THEME (objet contenant toutes les variables du thème actuel, tirées du fichier config.php) $course (objet du cours actuel) $meta (toutes les balises meta, y compris les feuilles de styles) $home (booléen) $title (titre de la page) $heading (entête de la page) $navigation (la navigation brute, pas la barre de navigation) $navmenulist (xhtml) $menu (le menu déroulant ou le bouton)
Uniquement dans header.html :
$direction (ltr ou rtl pour gauche à droite ou droite à gauche) $bodytags (balises devant être ajoutées au corps de la page)
Uniquement dans footer.html :
$homelink (lien vers l'accueil, c'est-à-dire la page du cours actuel ou la page d'accueil du site) $loggedinas (chaîne contenant le nom de l'utilisateur connecté, sous forme de lien) $performanceinfo (chaîne contenant des informations de performances)
Pour terminer, ces deux fichiers peuvent contenir du code PHP de Moodle, afin que n'importe quelles données puissent être extraites de la base de données ou des variables d'environnement si nécessaire.
Le fichier styles.php
Ce fichier a le même nom que dans la version 1.4, mais sa tâche est différente à partir de la version 1.5. Il est appelé depuis le fichier header.html et constitue une passerelle vers les fichiers CSS. Vous n'avez pas besoin d'y changer quoi que ce soit.
Le fichier config.php
Ce fichier porte aussi le même nom que dans la version 1.4 et joue un rôle différent dès la 1.5. Vous y configurerez comment les fichiers CSS fonctionnent ensemble. Vous pouvez construire votre thème à partir d'un thème standard ou d'un autre et inclure ou exclure plusieurs fichiers CSS.
Les feuilles de styles
À partir de Moodle 1.5, un travail a débuté pour clairement séparer le contenu de la présentation pour améliorer la flexibilité, l'accessibilité et pour une conception plus simple des pages. Pour vous permettre de travailler plus facilement lors de petites modifications de couleur et de polices, les styles CSS sont séparés en trois fichiers :
styles_layout.css styles_fonts.css styles_color.css
De plus, le fichier styles_moz.css contient du formatage spécifique à Firefox, Mozilla et Camino, notamment les coins arrondis.
Autres fichiers
En dernier lieu, certains concepteurs de thèmes peuvent fournir des informations sur leur thème, y compris un aperçu graphique. Cette image sera affichée sur la page des thèmes de Moodle, et l'information contenue dans le fichier README sera affichée une fois le thème sélectionné.
README.html screenshot.jpg
Séparer le contenu de la présentation
Le contenu de la page est affiché par le code XHTML, alors que la présentation de ce contenu est assurée par les CSS. Pour assurer la connexion entre le contenu et sa présentation, des balises XHTML et d'autres mécanismes sont utilisés dans la page. Pour appliquer des styles à un logiciel web de la complexité de Moodle, de nombreux mécanismes de ce type sont nécessaires.
Feuilles de styles cascadées CSS
Les thèmes de Moodle utilisent des feuilles de styles pour décrire l'aspect de Moodle en contrôlant la disposition, les polices et les couleurs. Ces feuilles de styles sont construites par un script PHP nommé styles.php, situé dans le dossier du thème, et ajustées par des paramètres d'un fichier nommé config.php, situé au même endroit.
Moodle possède un thème standard très simple, fournissant une mise en page basique, destiné à être utilisé comme base pour d'autres thèmes. Chaque thème peut de plus avoir un thème parent, qui sera inclus avant le thème lui-même.
Ainsi, suivant vos réglages, il est possible d'utiliser jusqu'à trois niveaux de feuilles de styles pour un thème :
- thème standard - theme/standard/styles.php
- thème parent - theme/themeparent/styles.php
- thème principal - theme/votretheme/styles.php
Grâce aux propriétés de cascade des CSS, les définitions des fichiers CSS inclus plus tard peuvent écraser celles des fichiers CSS inclus auparavant. Moodle fait un usage intensif des propriétés de cascade des CSS, ce qui permet au concepteur du thème de nombreuses possibilités. Cette flexibilité permet le développement très simple de thèmes basés sur des thèmes existants avec peu de modifications, aussi bien que la conception d'une identité graphique totalement différente de votre Moodle, à l'aide de nouveaux fichiers CSS.
Les concepteurs de thèmes peuvent définir et ajouter autant de feuilles de styles CSS qu'ils le désirent et les dénommer comme ils le veulent.
Le thème standard
Figure 1 : Le thème standard avec les fichiers CSS styles_layout.css, styles_fonts.css, styles_color.css et styles_moz.css.
Modifications mineures
Si vous voulez juste faire quelques adaptations mineures à un thème, par exemple modifier des couleurs différentes ou ajouter un logo, votre thème inclura le thème standard et vous définirez quelques styles CSS supplémentaires dans un nouveau fichier CSS.
Voyez le thème standardwhite, qui offre un exemple de cette technique.
Ce thème utilise le fichier config.php pour fixer les options adéquates. La première ligne $THEME->sheets = array('gradients'); définit le fichier CSS gradients.css comme fichier contenant les styles supplémentaires. La ligne $THEME->standardsheets = true; indique d'inclure en outre tous les styles du thème standard.
Au lieu de baser votre thème sur le thème standard, il est possible d'utiliser comme base un autre thème, en spécifiant $THEME->parent = 'cooltheme'; (cooltheme est le nom du thème choisi comme base).
CSS combinée - mise en page standard avec vos propres polices et couleurs
Le thème formal_white combine la mise en page du thème standard avec sa propre mise en page, ses polices et ses couleurs. De cette façon, toutes les modifications effectuées dans le thème standard lors des mises à jour de Moodle sont conservées. Pour effectuer ceci, on écrit dans le fichier config.php les lignes $THEME->sheets = array('fw_layout','fw_color','fw_fonts'); et $THEME->standardsheets = array('styles_layout');.
Figure 3 : Le thème formal_white le fichier CSS styles_layout.css du thème standard et les fichiers individuels fw_layout.css, fw_fonts.css et fw_color.css.
Un thème utilisant un thème parent
Pour une utilisation plus avancée, on peut définir n'importe quel thème existant comme thème parent et offrir des variantes de ce thème. On peut par exemple fournir toutes les définitions CSS dans le thème parent et proposer divers thèmes enfants avec des couleurs différentes suivant les goûts des utilisateurs. Ces thèmes enfants ne nécessitent qu'un seul fichier CSS contenant les diverses définitions des couleurs. On peut aussi créer des thèmes enfants qui ne se différencient que par le logo ou le bandeau du fichier header.html. Dans ce cas, ces thèmes enfants n'auront même pas besoin de leur propre fichier CSS.
La configuration des thèmes enfants pourrait ressembler à $THEME->sheets = array('my_layout');, $THEME->parent = 'formal_white'; et $THEME->parentsheets = array('fw_layout','fw_color','fw_fonts');
Figure 4 : Le thème formal_white_plus avec le fichier CSS additionnel my_layout.css. Ce thème n'existe pas en réalité.
Un thème sans dépendance standard
Un tel thème utiliserait ses propres feuilles de style CSS. Les réglages $THEME->sheets = array('styles_layout', 'styles_fonts', 'styles_color'); et $THEME->standardsheets = false; désactivent toutes les autres feuilles de style CSS de Moodle et permettent ainsi un thème complètement indépendant. Toutes les modifications effectuées au thème standard lors des mises à jour de Moodle ne modifieront en rien un tel thème.
Figure 5 : Un thème utilisant ses propres fichiers CSS styles_layout.css, styles_fonts.css et styles_color.css. Ce thème n'existe pas en réalité.
Fichiers CSS
En plus des fichiers CSS des thèmes, Moodle propose un fichier CSS de base pour chaque module, chaque bloc et chaque langue. Les développeurs peuvent fournir des propriétés CSS pour leurs modules et leurs blocs pour obtenir une mise en page correcte, notamment s'ils ont besoin d'un format pour des fonctionnalités particulières. L'aspect général de Moodle n'est pas modifié par ces styles de base.
Ces fichiers ne sont chargés que lorsque les CSS standards sont activés. Ils sont chargés avant tous les autres fichiers CSS des thèmes.
Figure 6 : L'ordre de chargement (cascade) de tous les fichiers CSS de Moodle et des thèmes de Moodle.
Voir aussi
- Page de cours de démonstration Moodle - cette page permet de voir comment les divers fichiers CSS forment l'aspect de la page. En haut à droite, vous verrez quatre liens sur une barre verte. Ces liens permettent d'activer les différents fichiers CSS.
- Base de données des thèmes Moodle disponibles. Vous pouvez bien sûr y contribuer.
- Galerie de thèmes Moodle
- Inspecteur CSS
- Extension Web Developer pour Firefox : un must !
- Extension Firebug
