How to customize H5P widgets using CSS

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

 

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');

@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;}

 

// 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);

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

 

BV52's picture

Hi mirgcire,

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.

-BV52

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.