How to customize H5P widgets using CSS
Submitted by mirgcire on Mon, 04/15/2019 - 07:51
I would like to reduce the website footprint of the audio recorder. I have been struggling with this for five days. (Sadly ... with no response from you guys). I have verified my CSS, so that is not an issue. The issue seems to be that, although the css file is visible in the chrome console, H5P still can't find it.
Well it turned out to be a documentation issue. I was just about to dig into the code when I found a comment on another page. You can take a look at the solution and my action hook and the solution below. And you can observe the audio recorder here https://effectivechinese.net/super-effective-study-methods
Sun, 04/21/2019 - 02:25
I finally found this page which describes how to make visual changes with CSS overrides. However, the details are incomplete, and scrambled through rambling blind-leading-the-blind discussions.
There are basically three things you need to do: 1) create the CSS file, 2) add code to have wordpress enqueue the style and 3) add a wordpress action handler for h5p_alter_library_styles .
However it was not working and the error message I saw was: "Failed to load resource: the server responded with a status of 404 ()" and to the right of the error message is "https://effectivechinese.net/live-site/wp-content/uploads/h5p./?ver=0.1". Which stumped me for a while.
Thu, 04/18/2019 - 01:25
Here is the content of the CSS file
Sun, 04/21/2019 - 01:58
Sat, 04/20/2019 - 21:08
I finally solved it myself - it only took me 5 days
The documentation for this feature is appalling. You literally have incorrect information on this page: https://h5p.org/documentation/for-developers/visual-changes. In describing how to customize the CSS, the only documentation is in some code boxes. One of them contains the statement: "// Path must be relative to wp-content/uploads/h5p or absolute.". Instead of "absolute" it should be "a URL". In fact it is nonsensical to put the file in the h5p/uploads folder because it significantly complicates maintenance. H5P is excellent, but the documentation clearly needs help. I finally discovered this in a comment by phaqlancs (Wed, 11/15/2017):
'path' => plugin_dir_url( __FILE__ ).'/custom-h5p.css',
Mon, 04/22/2019 - 09:02
Hi mirgcire,I'm glad that you
I'm glad that you found the solution and thank you for pointing out the issue with the documentation. I will forward this to the core team.
Wed, 09/22/2021 - 03:31
My modifications are broken due to a new version of H5P
Is it possible to restore the previous version of H5P on my website? I found that my modifications are not working after the most recent update.