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 (dès la version 1.4).
Ces fichiers contiennent votre logo, les menus de connexion, la piste 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).
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 piste 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'accuei, 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
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
CSS mélangée - mise en page standard avec vos propres polices et couleurs
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
Un thème sans dépendance standard
Figure 5 : Un thème utilisant ses propres fichiers CSS styles_layout.css, styles_fonts.css et styles_color.css.
Fichiers CSS
Figure 6 : L'ordre de chargement (cascade) de tous les fichiers CSS de Moodle et des thèmes de Moodle.
Voir aussi
- Moodle demo course page - this enables you see how the different CSS files form the look of the page. On the top right you see four links on a green bar. With the buttons you can switch stylesheets off (font-style italic) and on (font-style normal). When you switch all stylesheets off you see the content level of Moodle.
- Database of all available Moodle Themes (in preparation, please contribute)
- Moodle Theme Gallery
- CSS Inspector
- Firefox Web Developer Extension