Override or modify H5P module CSS styles in Moodle

Hi, I have added the H5P module to Moodle and I want to make some graphical changes to it like the button background-color and border-radius. So far I have figured out that styling a iframe isn't possible without javascript / jquery. Doesn't H5P provide a nicer way for custom styling? Like for example a predefined custom stylesheet? Maybe there is an even better way to override / modify some default H5P styles?

thomasmars's picture

Hi, this is currently not available through the Moodle plugin, but there are two issues for implementing this at github. You can follow along the development progress at https://github.com/h5p/h5p-moodle-plugin/issues/110 and https://github.com/h5p/h5p-moodle-plugin/issues/12.

leac's picture

I want to customize css in a content type that uses an iframe, and I can't seem to do so, neither with Moodle's additionalhtml seting, nor even with the theme renderer. I see that issue 110, which deals with adding css to iframe, is still open.

What I'm trying to do is adjust the embed popup for RTL. The way it is now, due to the left positioning and the left negative margin, the pop up is displayed totaly off the screen.

How can I do this, other than alter the css in the hvp plugin?

icc's picture

You can actually modify your Moodle theme to include additional CSS files where you can change add your own custom modifications: https://h5p.org/moodle-customization

leac's picture

Thank you!

I had actually tried that, and it hadn't worked, but I must have forgotten to clear the system caches :) . Now I cleared them and it works perfectly. Thanks!