Attention : vous consultez actuellement la documentation dédiée aux versions 1.x de Moodle. La documentation pour les versions 2.x de Moodle est consultable ici : Adapter un thème pour 1.6 et celle pour Moodle 3.x est consultable là : Adapter un thème pour 1.6.

Adapter un thème pour 1.6

De MoodleDocs


Moodle1.6


Quelles parties de Moodle ont changé ?

La structure sémantique des pages de Moodle

Afin de pouvoir mieux orienter les utilisateurs de Moodle ayant un déficit visuel, il est important de construire une structure sémantique pour toutes les pages de Moodle. Le squelette est constitué par les éléments h1 et h3. Voir les détails ci-dessous.

L'entête

Pour constituer une structure sémantique des pages de Moodle, la zone headermain n'est plus construite avec un élément div, mais avec un élément h1 (voir header.html)

Le pied de page

Un lien est ajouté vers la page correspondante de Moodle Docs (voir footer.html).

Lien moodledocslink dans le pied de page

Dès Moodle 1.6, il est possible de rendre disponible un lien vers Moodle Docs (pour les administrateurs et les enseignants, mais pas pour les étudiants) en ajoutant le code ci-dessous au fichier footer.html de votre thème.

echo(page_doc_link(get_string("moodledocslink")))

Si vous voulez créer un thème compatible avec les versions 1.5 et 1.6 de Moodle, il faudra tester si la fonction page_doc_link existe, sans quoi une erreur call to undefined function surviendra.

if (function_exists('page_doc_link')) {
   echo(page_doc_link(get_string("moodledocslink")));
}

La barre de navigation

Pour une meilleure accessibilité et une plus grande flexibilité de mise en page, la structure xhtml de la barre de navigation a été modifiée en une liste non ordonnée.

Le caractère » a été converti en une image avec un texte Alt vide. Voir #Icônes redimensionnables.

Les blocs latéraux

Le titre des blocs latéraux est maintenant un élément h2. Il est suivi immédiatement d'un lien Sauter <Titre du bloc>, destiné à l'assistance des utilisateurs de logiciels lecteurs d'écran. Le texte de ce lien est assorti de la classe accesshide qui le masque dans les navigateurs graphiques (normaux), bien qu'il soit possible d'y accéder à l'aide du tabulateur et de passer la souris dessus pour l'affichage de son titre.

Le tableau contenant chaque bloc latéral a été remplacé par une liste non ordonnée (élément ul). Des règles de la feuille de style du thème standard désactivent les marges et retirent les puces de cette liste (attribut list-style-type). Les anciens noms des classes (list, r0, c0) ont été conservés, et des éléments span remplacent les cellules des tableaux td. Les icônes originales sont codées en HTML à l'aide de l'élément img, assorti d'un attribut alt vide (dans une version ultérieure, elles seront peut-être définies par des styles, en tant qu'images de fond, pour augmenter la flexibilité).

Les questions

Documentation à compléter par une personne au courant !

Les bordures des images

Dans les versions précédentes de Moodle, une bordure noire de 1 pixel de largeur était ajoutée à toutes les images des utilisateurs (avatars). Ce n'est plus le cas à partir de la version 1.6. Si vous voulez conserver une telle bordure, vous devez l'ajouter à l'aide des feuilles de style CSS. Si vous effectuez une mise à jour d'une version antérieure, les anciennes images conserveront malgré tout leur bordure noire. Le script userpix/upgrade.php est cependant fourni pour permettre à l'administrateur de retirer toutes ces bordures.

Icônes redimensionnables

Afin d'améliorer l'accessibilité de Moodle, les caractères pouvant générer une confusion suivant le contexte sont remplacés par des images. Par exemple, le « > » du bouton de recherche des forums est lu « plus grand que » par les logiciels de lecture d'écran, alors que « recherche » serait adéquat. Ces images (et bientôt d'autres icônes) s'adaptent au redimensionnement du texte, par exemple lors de l'utilisation de la touche Ctrl en combinaison avec la roue de souris dans Firefox ou Internet Explorer 6.

Ces images ont une « resize ». Leur nom est préfixé avec « r_ » et elles sont dessinées dans un carré de 1 em de côté (ou un multiple). Naturellement, lors d'un agrandissement, les pixels deviennent apparents. On peut atténuer ce défaut en dessinant l'image sur 2 em, c'est à dire sur 21x23 pixels.

Icônes actuellement redimensionnables (Symbole/ Taille réelle/ Nom du fichier/ Remarques):

  • » 2em /pix/a/r_breadcrumb.gif, Séparateur de la barre de navigation.
  • > 2em /pix/a/r_go.gif, Bouton du bloc de recherche des forums.
  • < 1em /pix/a/r_previous.gif, Bloc calendrier, lien vers mois précédent.
  • > 1em /pix/a/r_next.gif, Bloc calendrier, lien vers mois suivant.

Si les feuilles de style de votre thème redéfinissent les tailles des polices, il sera nécessaire de modifier le style des images redimensionnables. Utilisez alors des unités em.

Qu'y a-t-il de neuf dans le thème standard de Moodle 1.6 ?

Les pages suivantes vous donnent une vue d'ensemble des modifications dans les fichiers d'entête, de pied de page et des feuilles de styles CSS entre les versions 1.5.x et 1.6. En ouvrant ces pages, vous verrez toutes les modifications effectuées dans le fichier en question.

Vous pouvez ajouter ces modifications aux fichiers de votre thème pour le rendre compatible avec la version 1.6.

Ces pages ne montrent que les parties des fichiers qui sont différentes. Les numéros des lignes vous permettent de localiser ces parties. Si vous devez appliquer les modifications dans des fichiers complètement différents, cherchez dans vos fichiers l'ancienne propriété (version 1.5) et remplacez-la par la nouvelle.

Voir aussi