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?

Gareth Barnard

Developer at HRDNZ
Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.
Gareth Barnard

Latest posts by Gareth Barnard (see all)

blank

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Shoelace, and other modules such as course formats.

2 thoughts on “Customising H5P in Moodle using the Foundation theme

  • Pingback:Customising H5P in Moodle using the Foundation theme – Part Two - ElearningWorld.org

  • 17th September 2019 at 11:26 am
    Permalink

    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!

    Reply

Add a reply or comment...