[Moodle 4.5] H5P CSS not applying to H5P Content

[Moodle 4.5] H5P CSS not applying to H5P Content

由Drew Barclay發表於
Number of replies: 5

Good day all,

We recently upgraded to Moodle 4.5 for the built-in access to the CSS for H5P content.  However, it doesn't seem like any of the CSS code we write is actually applying.  Using Chrome DevTools, we were able to identify the CSS code that controls the color of the "Start the course" button, edit it to show white instead of the default light green, and import it into our H5P Settings (coreh5p | h5pcustomcss).  Despite this, the CSS code we've written doesn't seem to be applying when refreshing.  In the below screenshots, I demonstrate how we were able to change those code blocks to achieve the desired effect:

The CSS code for the default state of the button, edited.

Edited version of the default Branching Scenario start screen

Custom CSS Field in Site Administration > General > H5P Settings

However, on refresh, the code in that Custom CSS field is not being interpreted and is instead using the default.

The default start screen for the "Branching Scenario" piece of H5P content

Can anyone shed some light on what I'm missing?

評比平均分數： -
In reply to Drew Barclay

Re: [Moodle 4.5] H5P CSS not applying to H5P Content

由Sara Arjona Téllez發表於
Core developers的相片 Moodle HQ的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片 Testers的相片
Hi Drew!
 
Thanks for reporting this (it's great you included screenshots!). However, I haven't been able to reproduce the error in https://sandbox.moodledemo.net/ which is based on 4.5 too:
 
Could you please confirm if it works for you on the sandbox site? It might be related to the theme you're using on your site. You could also try Purging caches in your site (from Site administration > Development > Purge caches), to see if it helps.
 
Kind regards,
Sara 
評比平均分數：Useful (1)
In reply to Sara Arjona Téllez

Re: [Moodle 4.5] H5P CSS not applying to H5P Content

由Drew Barclay發表於
Hi Sara,

Thanks for your reply. Unfortunately, purging the cache did not reflect the CSS changes onto our content. The only thing that's different about our implementation versus your example on the Moodle demo site is that we're using the H5P plugin (the black icon labeled "Interactive Content") and not the built-in H5P support. In my research, it's been my understanding that both should draw from the same CSS. Are you aware if this is the case? I'd really prefer if our trainers didn't have to recreate their content in the other version of H5P.
評比平均分數： -
In reply to Drew Barclay

Re: [Moodle 4.5] H5P CSS not applying to H5P Content

由Sara Arjona Téllez發表於
Core developers的相片 Moodle HQ的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片 Testers的相片

Hi Drew,

Ah, that makes sense now! I'm not completely familiar with all the features supported by the mod_hvp (black icon), but it seems like this plugin doesn't currently support the coreh5p | h5pcustomcss setting. I recommend creating an issue in the mod_hvp tracker to request this improvement: https://moodle.org/plugins/mod_hvp

I hope this helps and the H5P can implement support to this setting too! 😊

Kind regards,

Sara

評比平均分數： -
In reply to Sara Arjona Téllez

Re: [Moodle 4.5] H5P CSS not applying to H5P Content

由Drew Barclay發表於
Hi Sara,

That's a bummer! We'll see about researching other options that'll allow us to get what we need.
評比平均分數： -
In reply to Sara Arjona Téllez

Re: [Moodle 4.5] H5P CSS not applying to H5P Content

由Acqua Alta發表於
Particularly helpful Moodlers的相片

Hi Sara,
Based on your recommendation, I opened the following issue in the bug tracker of mod_hvp:
https://github.com/h5p/moodle-mod_hvp/issues/575

If would be great if anyone here reading this thread would +1 the issue on GitHub, so the maintainers there would see that this issue is something that is relevant for many users.

Thanks

評比平均分數：Useful (1)