A little bit #fab
Introduction
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.
The featured image is my copyright, please don’t use without my permission.
Background
With H5P in Moodle, docs.moodle.org/403/en/H5P, it is possible to change the look with CSS using the ‘hvp_alter_styles’ method, h5p.org/documentation/for-developers/visual-changes. This I first did in the Essential theme version 3.5.1.2 for Moodle 3.5 (https://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:
.h5p-course-presentation h2,
.h5p-course-presentation .h5p-footer .h5p-footer-toggle-keywords .current-slide-title {
color: #fab;
}
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 creativecommons.org/licenses/by-sa/4.0/.
To come up with the CSS, I employed the browser developer tools (such as in Firefox, developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) 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.
- Added value – 16th September 2024
- What is a developer? – 16th August 2024
- A little boost – 16th July 2024
That’s great Gareth !
Ever since Moodle HQ developers created a version of H5P inside Moodle core, people were asking how to style content, particularly text.
So now designers and those who know CSS can do this 🙂