H5P – Modification de son aspect visuel dans Moodle (2/2)

H5P – Modification de son aspect visuel dans Moodle (2/2)

La question revient régulièrement sur les forums et les groupes Facebook consacrés à H5P : “comment puis-je adapter la fonte d’une activité H5P afin de la faire correspondre à celle de mon site ?“, “comment changer la fonte et sa taille ?“, “comment mettre un arrière-plan à mes titres dans H5P ?“, bref : comment changer l’aspect visuel de l’activité H5P ?


Le problème : iFrame

Ceux d’entre-vous qui sont familiers avec Moodle ou WordPress ou un autre CMS donneraient rapidement la réponse : changer le style au moyen des feuilles de style CSS. En effet, certains thèmes permettent d’injecter du CSS customisé dans la balise <head> de la page. Mais c’est là que se pose le problème de l’architecture de l’activité H5P : celle-ci est encapsulée dans un “iFrame” (comme une page HTML dans une page HTML) et cet iFrame “protège” son contenu la diffusion du CSS de la page le contenant…

Nous devons donc chercher une autre solution…

J’en ai trouvé deux, à adopter suivant vos objectifs : l’emploi d’un thème spécifique, et la surcharge des CSS par l’emploi d’un thème enfant. Examinons les deux solutions, dans le cas spécifique de Moodle (pour WordPress et autres CMS, la solution est semblable mais ne sera pas décrite ici).

De par la longueur de l’explication, chaque solution fera l’objet d’un article séparé. Retrouvez l’article concernant l’emploi d’un thème spécifique : H5P – Modification de son aspect visuel dans Moodle (1/2).

Solution 2 : Surcharger les styles CSS par l’emploi d’un thème enfant

Etape 1 : disposer de Moodle et avoir le plugin H5P installé

Vous devez évidemment disposer d’un LMS Moodle fonctionnel et avoir installé le plugin H5P.

Etape 2 : déjà disposer de ou créer une activité H5P

Afin de pouvoir visualiser les changements visuels que nous allons apporter, nous devons disposer d’une activité H5P.

Ajouter l’activité H5P

Pour cela, créons un cours, ajoutons-y une activité H5P “Course Présentation” par exemple.

L’activité H5P “Course Presentation”

Si vous ne connaissez pas l’emploi de cette activité “Course Presentation”, je vous invite à suivre ce tutoriel.

Pour les besoins de la démonstration, créons une diapositives avec un fond blanc, une image de masque chirurgical et ajoutons-y des titres.

Ajout de titres pour notre première diapositive

Nous avons utilisé le formatage “H2” pour “Le port du masque” et “Normal” pour “Comment faire ?”. Cliquons sur [Valider].

Notre première diapositive dans l’éditeur H5P

L’image est claire, mais le choix par défaut et imposé de la fonte “H5PDroidSans” n’est pas top. Moi, je voudrais une fonte “Raleway” pour le formatage “H2” et “Avenir” pour le formatage “Normal”.

Etape 3 : créer un thème enfant

Dans le thème enfant, nous modifions simplement les détails que nous voulons changer, puis laissons le thème parent faire le reste.

Attention

La procédure pour créer un thème enfant est simple, mais nécessite de pouvoir accéder aux fichiers système de Moodle placés sur le serveur, par exemple via FTP. Si vous ne disposez pas de cet accès, faites-vous aider par l’administrateur de votre système.

Créer le dossier du thème

Attention

Le nom du dossier du thème doit être en minuscules sous peine de pas être reconnu par Moodle. Nous utiliserons donc toujours cette écriture afin de ne pas induire de confusion.

Puisque nous avons accès aux fichiers système de Moodle, dirigeons-nous vers le dossier «thème» et créons un dossier pour notre thème sous celui-ci. Le nom du dossier doit être le même que le nom du thème enfant. Pour cet exemple, appelons ce thème enfant “”customh5p”. Nous créons donc un dossier “customh5p”.

Création du dossier “customh5p” dans le dossier “theme”

Créer les fichiers nécessaires au thème enfant

Les fichiers / dossiers minimums dont vous avez besoin pour créer un thème enfant sont: config.php, version.php et lang/en/theme _ {{nom_du_theme_enfant}}.php. Dans notre cas, ce {{nom_du_theme_enfant}} sera : customh5p.php.

Voyons maintenant le contenu à placer dans ces fichiers.

theme/customh5p/config.php

<?php
	defined('MOODLE_INTERNAL') || die();
	 
	// Le nom de notre thème                                                                                            
	$THEME->name = 'customh5p';                                                                                                             
	 
	// La liste des feuilles de style utilisée, dans notre cas : uniquement "custom.css". Remarquez que le ".css" n'est pas repris                    
	$THEME->sheets = [custom];                                                                                                                
	 
	// Le nom du thème parent. Dans le cas de cet exemple : "Boost". à adapter à votre cas particulier
	$THEME->parents = ['boost'];                                                                                                        
	                                                                                                 
	 // Nécessaire dans la plupart des cas afin de permettre la surcharge du thème               
	$THEME->rendererfactory = 'theme_overridden_renderer_factory';  
?>

theme/customh5p/version.php

<?php
	defined('MOODLE_INTERNAL') || die();                                                                                                
	 
	// version du theme                                                                                               
	$plugin->version = '2016102100';                                                                                                    
	 
	// Version de Moodle nécessaire au bon fonctionnement de votre thème enfant                                                                             
	$plugin->requires = '2016070700';                                                                                                   
	 
	// Le nom de votre thème. Il commence toujours par "theme_"                                                                   
	$plugin->component = 'theme_ customh5p';                                                                                                 
	 
	// La liste des plugins nécessaire au thème enfant                                                          
	$plugin->dependencies = [                                                                                                           
		'theme_boost' => '2016102100'                                                                                                   
	];
?>

Astuce

Se tromper dans les dates et mentionner une date pour laquelle un composant n’existe pas encore empêchera son installation. En cas de doute, utilisez des dates suffisamment anciennes, comme je l’ai fait ici.

/theme/customh5p/lang/en/theme_customh5p.php

<?php
	defined('MOODLE_INTERNAL') || die();                                                                                                
	 
	// Description montrée dans le sélecteur de thème de Moodle                                                                                
	$string['choosereadme'] = 'customh5p est un thème enfant de BOOST permettant un emploi de CSS customisé.';                
	// Nom du thème                                                                                                        
	$string['pluginname'] = 'customh5p';
?>

Etape 4 : créer le fichier de style customisé

En utilisant les outils de développeurs existant dans la plupart des browsers modernes, nous avons pu identifier les classes des éléments que nous souhaitons modifier (oui, la procédure demande quelques connaissances dans la manipulation des fichiers HTML et CSS, mais de nombreux tutos existent sur le web…) :

.h5p-advanced-text h2
.h5p-advanced-text p

Il est simple, à présent, de procéder à la personnalisation du CSS en adressant ces éléments, ce que nous placerons dans un fichier “custom.css” (définit dans le “config.php”, voir ci-dessus) dans le dossier “style” de notre thème enfant

/theme/customh5p/style/custom.css

.h5p-advanced-text h2 {
    font-family: 'Raleway';
}
.h5p-advanced-text p {
    font-family: 'Avenir';
}

Etape 5 : réaliser la connection avec la fonction de rendu de H5P

Pour faire simple, disons que H5P utilise une série de fonctions dans un fichier “renderer.php” afin d’assurer le rendu du HTML5. C’est un fichier semblable que nous allons utiliser, contenant une fonction bien spécifique signalant à H5P d’utiliser notre nouvelle feuille de style “custom.css”.

/theme/customh5p/renderers.php

Attention

Notez le “s” à la fin de “renderer” ! Sans l’orthographe correcte du nom de fichier, ce mod ne fonctionnera pas…

<?php
	require_once($CFG->dirroot . '/mod/hvp/renderer.php');

	class theme_ customh5p_mod_hvp_renderer extends mod_hvp_renderer {
		public function hvp_alter_styles(&$styles, $libraries, $embedType) {
			global $CFG;
			$styles[] = (object) array(
				'path'    => $CFG->httpswwwroot .  '/theme/customh5p/style/custom.css',
				'version' => '?ver=0.0.1',
			);
		}
	}
?>

Au final, la structure de notre dossier “customh5p” doit ressembler à ceci :

La structure de notre dossier “customh5p”

Etape 6 : sélectionner et installer notre thème enfant

Quittons à présent l’environnement des fichiers système de Moodle et retournons à son interface utilisateur.

Rendons nous sur Administration du site > Notifications. Le système repère la présence d’un nouveau thème et en propose l’installation. Une fois cette installation réalisée, nous nous rendons dans le Sélecteur de thème afin de changer le thème utiliser par notre thème enfant. Celui-ci prend la main et, en principe, rien ne devrait déjà visuellement changer.

Etape 7 : contrôler le résultat

Retournons voir notre activité H5P et, heureuse surprise, notre diapositive a adopté les nouvelles fontes !

Notre première diapositive avec ses nouvelles fontes

A comparer avec l’ancienne version :

Notre première diapositive avec ses anciennes fontes

Astuce

Si les changements à apporter sont subtils, comme parfois le sont les changements d’une fonte, n’hésitez pas à utiliser une modification plus marquante, comme un fond de couleur vive, afin de bien constater que les changements apportés fonctionnent…

La question revient régulièrement sur les forums et les groupes Facebook consacrés à H5P : "comment puis-je adapter la fonte d'une activité H5P afin de la faire correspondre à celle de mon site ?", "comment changer la fonte et sa taille ?", "comment mettre un arrière-plan à mes titres dans H5P ?", bref : comment changer l'aspect visuel de l'activité H5P ?
Là maintenant, je suis sûr que cela fonctionne 🙂

Conclusion

J’espère que ce petit article vous fera d’autant mieux apprécier Moodle et H5P…

Cette solution est plus universelle que la première solution présentée, car elle permet de conserver le thème utilisé (et qui a parfois coûté beaucoup d’énergie ou de budget dans son design et sa conception), mais nécessite de mettre les mains dans le camboui en altérant des fichiers du système. No pain, no gain 😉

Retrouvez l’article présentant la première solution : H5P – Modification de son aspect visuel dans Moodle (1/2).

N’hésitez pas à me contacter si vous avez des questions ou des commentaires sur cet article ou postez sur notre groupe francophone d’entraide Moodle :