For the online learning world

Elearning WorldMoodleTechnicalUX

A little bit #fab


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.


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.


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 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:

Wrong and correct way to inject CSS for H5P in Moodle

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’:

h5pcustomcss setting with example CSS

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):

Application of custom H5P CSS.

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.


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.


I hope that you now understand how to add custom CSS to your Moodle site’s H5P modules.

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.

One thought on “A little bit #fab

  • blank Stuart Mealor

    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 🙂


Add a reply or comment...