Customising H5P in Moodle using the Foundation theme
Introduction
H5P is a way of creating interactive content on a web page. It can be integrated into Moodle with the plugin: moodle.org/plugins/mod_hvp. But what if the styles within it don’t quite suit your theme? Well, there is a way if the theme you use has some code to allow this, as documented on h5p.org/moodle-customization. This I have done in my Foundation theme: moodle.org/plugins/theme_foundation.
Disclaimers and license
Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.
H5P™ is a trademark of ‘Joubel AS’ – h5p.org/trademark and h5p.org/licensing.
H5P demonstration material is – creativecommons.org/licenses/by/4.0 – licensed.
Firefox® is a registered trademark of the Mozilla Foundation.
Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy
Other names / logos can be trademarks of their respective owners. Please review their website for details.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
The how
So you’ve thought to yourself “I’d like to make that element a different colour and in italics”. But how can you work out the CSS selector needed? For this we need to use the browser development tools (here I have used FireFox on Ubuntu: developer.mozilla.org/en-US/docs/Tools), this allows us to ‘inspect’ the page and examine how it is constructed. H5P content is served within an ‘iframe’ so all styles will be for it and not have any of the Moodle theme styles. Thus if we look at the element we are interested in:
then we find it has the selector ‘.current-slide-title’. This we can then turn into CSS using out knowledge of such:
.current-slide-title {
color: #fab;
font-style: italic;
}
then all we need to do is paste that into the ‘hvpcustomcss’ setting of the Foundation theme:
and save the changes. Then the theme will do the rest:
Conclusion
It’s really that easy!
One thought that has occurred to me in writing this post is the need to support custom fonts that the theme already has or serve from a list then all you’d need to do would be to write the ‘font-family’ CSS attribute as required. The question is then, is this functionality needed?
- Network fonts – 16th March 2025
- Static translate – 16th February 2025
- Subsections – 16th January 2025
Pingback: A Re-Introduction To H5P: What You Need To Know About The Most Exciting LMS Integrator Yet | LMSPulse
Pingback: Customising H5P in Moodle using the Foundation theme – Part Two - ElearningWorld.org
Great post Gareth 🙂
You ask “The question is then, is this functionality needed?”
Well, I am seeing more and more people adopting H5P, in Moodle and elsewhere.
Although it feels quite clunky at times when adding and editing, it’s getting better.
As more and more Moodle site start to integrate H5P, I expect the demand for styling the H5P content will grow.
So any Moodle Themes that allow admins to do this quickly and easily is gong to be very popular!