How to customize H5P widgets using CSS

Submitted by mirgcire on Mon, 04/15/2019 - 07:51

Forums:

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

mirgcire

Sun, 04/21/2019 - 02:25

Permalink

Current Status

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.

	$style_h5p = plugins_url('customize-h5p.css', __FILE__);
	wp_register_style( 'els-h5p-style', $style_h5p );
	wp_enqueue_style( 'els-h5p-style');

mirgcire

Thu, 04/18/2019 - 01:25

Permalink

Here is the content of the CSS file

@CHARSET "ISO-8859-1";
/*This is a style sheet for the Effective Language Solutions plugin*/
/* Reduce the foot print of the audio recorder */
div.h5p-audio-recorder-view div.recording-indicator-wrapper {display:none;}
div.h5p-audio-recorder-view div.done {display:none;}
div.h5p-audio-recorder-view div.ready {display:none;}
div.h5p-audio-recorder-view div.title {display:none;}
div.h5p-audio-recorder-view div.audio-recorder-timer {display:none;}
div.h5p-audio-recorder-view div.h5p-audio-recorder-download {display:none;}

mirgcire

Sun, 04/21/2019 - 01:58

Permalink

Action Hook

// Customize the h5p audio recorder
function cusomize_h5p(&$styles, $libraries, $embed_type) {
  $styles[] = (object) array(
    'path' => plugin_dir_url('customize-h5p.css'),
    'version' => '?ver=0.1' // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'customize_h5p', 10, 3);

mirgcire

Sat, 04/20/2019 - 21:08

Permalink

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',