With the introduction of H5P in Moodle and having themes that allow us to customise the look brings the thought of being able to customise H5P too.
Disclaimers
Names / logos can be trademarks of their respective owners. Please review their website for details. I am independent from the organisations mentioned and am in no way writing for or endorsed by them. The information presented in this article is written according to my own understanding, there could be technical inaccuracies, so please do undertake your own research.
Background
With H5P in Moodle , it is possible to change the look with CSS using the ‘ hvp_alter_styles ’ method. This I first did in the Essential theme version 3.5.1.2 for Moodle 3.5 (‘ moodle.org/plugins/theme_essential ’ and ‘ github.com/gjb2048/moodle-theme_essential/blob/master/classes/mod_hvp_renderer.php#L44 ’) for the H5P plugin and allowed you to add your own custom CSS. I’ve since ported the code to the Foundation and Adaptable themes. When Moodle created their own version, the ‘hvp_alter_styles’ method was not supported until MDL-69087 and I added support to my themes too. Then the ability to add your own custom CSS in core was added by MDL-77049 , but that had a flaw whereby all of the Moodle CSS was injected into the H5P ‘iframe’ (as this is employed for separation) which caused corruption reported in MDL-79707 , as a bug. This can be visualised as:
This was rejected as a ‘bug’ and an ’enhancement’ issue was created MDL-79802 - ‘Add a new setting for adding custom H5P styles’, where I’ve now implemented a new core setting that reflects what I’ve already done in my contributed themes.
Add a new setting for adding custom H5P styles
Now in MDL-79802 I’ve implemented a new setting ‘h5pcustomcss’:
Where you can enter your own CSS, such as:
1.h5p-course-presentation h2,
2.h5p-course-presentation .h5p-footer .h5p-footer-toggle-keywords .current-slide-title {
3 color: #fab;
4}
which changes the title and footer title to a shade of pink (hex code #fab):
Here seen on the example H5P presentation from h5p.org/presentation - CC BY-SA 4.0 Deed Attribution-ShareAlike 4.0 International .
To come up with the CSS, I employed the browser developer tools (such as in Firefox ), to figure out the CSS selectors that I required.
Caveat
It should be noted though that it is my understanding that this will only apply to the core H5P version, not the contributed plugin – moodle.org/plugins/mod_hvp . For that you’ll need a theme that supports it, such as ‘ Adaptable ’, ‘ Foundation ’ or ‘ Squared ’. Other themes may support this too.
Conclusion
I hope that you now understand how to add custom CSS to your Moodle site’s H5P modules.
What do you think please?