Interactive Book : extension du thème
Le module Interactive Book est sans doute le meilleur « agrégateur » H5P, intégrant de nombreux modules. Je l’utilisais souvent pour concevoir des livrets d’activités pour mes élèves. Cependant, je trouvais que l’ensemble manquait de cohérence graphique.
Le principe
Pour gagner en uniformité visuelle, j’ai eu l’idée d’étendre le thème sélectionné dans les paramètres d’Interactive Book à l’ensemble des contenus intégrés du livre :
J’ai donc modifié la CSS de tous les modules H5P intégrés dans Interactive Book en ajoutant les variations de couleurs issues de la CSS d’Interactive Book :
Voici, par exemple, à quoi ressemble la CSS modifiée du module Essay après que j’y ai inséré les variables de couleur pour que ces dernières reflètent la couleur accentuelle d’Interactive Book :
Grâce à ces modifications, les boutons, les champs de formulaire, les titres et les textes des rétroactions des modules intégrés dans Interactive Book épousent le même thème que celui d’Interactive Book. Cela confère plus de cohérence au module, à mon sens.
Démo 1
Ce contenu de démonstration montre le résultat obtenu. Chaque page indique, pour chaque module intégré, les modifications CSS que j’ai faites.
Démo 2
Voici le même contenu, mais après la sélection d’une autre couleur accentuelle dans les paramètres de configuration d’Interactive Book :
