Adapter un thème pour 1.5

Moodle1.5À partir de la version 1.5 de Moodle, le support des CSS a été étendu dans Moodle, afin de retirer les styles incorporés au code HTML source, par exemples les polices et les couleurs. En conséquence, les thèmes de Moodle sont beaucoup plus flexibles et accessibles. Toutefois, cela signifie que les thèmes personnalisés écrits pour les versions 1.4.x et antérieures de Moodle ne fonctionnent plus correctement.

La meilleure approche lors de la mise à jour est de reconstruire votre thème depuis le début, en transférant si nécessaire les images et les styles de votre ancien thème. Cette méthode permettra la construction d'un thème plus stable et robuste, qui passera beaucoup mieux les futures mise à jour de Moodle.

Les instructions ci-dessous sont donc destinées à une mise à jour d'un thème existant, ainsi qu'à la création d'un nouveau thème.

Mettre à jour ou installer Moodle 1.5 ou ultérieure

Installez Moodle normalement. Si vous effectuez une mise à jour, votre ancien thème ne sera pas effacé, mais le processus d'installation changera le thème de votre site, qui sera alors le nouveau thème par défaut standardwhite.

Créer un nouveau dossier pour votre thème

Les thèmes sont tous placés dans le dossier theme de Moodle.

Pour créer un nouveau dossier pour un thème, faites une copie du dossier standardwhite (ou d'un autre thème) et donnez-lui un nom convenable.

Dans ce nouveau dossier vous trouverez les fichiers suivants :

config.php - modifiez ce fichier pour changer les réglages de votre thème ;

favicon.ico - l'icône du site qui s'affiche dans la barre d'adresse du navigateur ou dans les marque-pages ;

header.html - un fragment de code HTML qui définit le haut de vos pages ;

footer.html - un fragment de code HTML qui définit le bas de vos pages ;

gradients.css - une feuille de styles contenant les styles à ajouter à votre thème ;

gradient.jpg - un fichier image ; vous pouvez en ajouter autant que vous le désirez ;

styles.php - le script que Moodle appelle ; il n'y a pas besoin de le modifier.

Créer un nouveau fichier CSS

Votre thème peut contenir autant de fichiers CSS que vous voulez. Créez-en un nouveau, par exemple styles.css, et incorporez-le dans votre thème en modifiant le fichier config.php et en modifiant le paramètre $THEME->stylesheets. Vous pouvez retirer gradients.css si vous ne voulez pas l'utiliser.

Dans ce nouveau fichier CSS, vous ajouterez des styles qui prendront la place de ceux de la feuille de styles standard, ou vous en définirez de nouveaux.

Pendant que vous y êtes, jetez un coup d'oeil au fichier config.php pour vous faire une idée des autres modifications que vous pouvez effectuer.

Sélectionner votre thème

Sélectionnez votre nouveau thème dans la liste disponible sur Administration >> Configuration >> Thèmes. Vous pouvez également configurer un thème utilisateur ou de session pour effectuer des tests.

Modifier les fichiers d'entête et de pied de page

Les fichiers d'entête (header.html) et de pied de page (footer.html) définissent la mise en page du haut et du bas des pages de votre Moodle.

La première chose que la plupart des utilisateurs veulent faire est ajouter un logo à la page d'accueil. La façon la plus simple de le faire est de modifier le fichier header.html. Étudiez attentivement le code de ce fichier et vous y verrez différents codes pour les différentes parties de Moodle. La page Adding a logo to the theme header (en anglais) contient de plus amples informations.

Attention ! Si vous effectuez une mise à jour à partir de la version 1.4, ne copiez pas vos fichiers header.html et footer.html en écrasant ceux qui sont fournis, car ils ont été substantiellement modifiés.

Ajouter d'autres styles CSS

Commencez à ajouter de nouvelles classes à votre fichier CSS, l'une après l'autre. Les outils suivants vous permettront de trouver les styles que vous voulez modifier.

• CSS Inspector, de Andrew Walker, vous permettra de voir simplement les détails d'un élément, y compris ses ascendants, ainsi que tous les attributs des classes et des id
• L'extension de Firefox Web Developer, de Chris Pederick

Vider le cache de votre navigateur

N'oubliez pas que les navigateurs conservent en cache les fichiers CSS. Il est donc nécessaire de réactualiser de façon forcée l'affichage des pages pour voir vos modifications. Pour une explication détaillée, voyez how-to-clear-your-browser-cache (en anglais).

Voir aussi

• Bases sur les thèmes
• Discussion Moving Title Text in Sideblocks dans les forums (en anglais)
• Forum sur les thèmes (en anglais)