Override or modify H5P module CSS styles in Moodle

Submitted by username1 on Mon, 12/19/2016 - 16:41
Forums: 
General discussion

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

thomasmars

Tue, 12/20/2016 - 08:56

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

leac

Tue, 12/04/2018 - 09:45

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

icc

Thu, 12/06/2018 - 10:05

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

leac

Sun, 12/16/2018 - 12:16

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!

xcr42

Thu, 01/02/2020 - 03:29

Hello,

following the instructions on https://h5p.org/moodle-customization I was able to get it working for theme bootstrapbase, but not for boost, although I changed the config.php as required here: https://github.com/h5p/h5pmods-moodle-plugin/blob/master/config.php#L12 with

$THEME->parents = array('boost');
I also followed all other instructions, but the boost theme is not picked up.
It picks up the bootstrapbase theme instead and of course all my test overrides for the interactive video, such as colors etc. are working as expected, but it's useless bceuase it's the wrong parent theme.
Following the requests of others I would highly appreciate if you could provide a clear and updated how-to instruction for using a parent theme, here the latest boost theme and the latest moodle version and/or advise, what to do?
Thank you!

vidarvasko

Wed, 06/24/2020 - 14:29

I have the same issue. Following in case a solution is discovered.

Thanks!

hribeiro

Fri, 07/31/2020 - 14:18

Since Moodle 3.8 H5P is in the core thus those instructions are no longer valid. Is it possible to have some guidance on how to achieve the same, meaning add custom css to the iframe contents.

Thanks

gerritg

Tue, 05/25/2021 - 11:36

Experiencing the same: Not a lot of options if you want to write custom CSS for H5P while maintaining upgradability of the Moodle system.

hribeiro

Tue, 05/25/2021 - 13:24

Depending on the Moodle version you are able to add custom CSS. Starting 3.10 this is possible again.

 

hribeiro

Fri, 07/31/2020 - 14:19

Since Moodle 3.8 H5P is in the core thus those instructions are no longer valid. Is it possible to have some guidance on how to achieve the same, meaning add custom css to the iframe contents.

Thanks