For the online learning world

Elearning WorldH5PMoodleTechnicalTheme

Customising H5P in Moodle using the Foundation theme


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:


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
Latest posts by Gareth Barnard (see all)

Gareth Barnard

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

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

Add a reply or comment...