H5P Guides

Authoring tool customization

Here you'll learn:

The H5P authoring tool is a generic tool that reads the data structure for each content type and uses this information to automatically generate an authoring tool/form for editing the content. Some content types also has custom authoring tools/widgets.

Styling the authoring tool

When visual changes to the H5P authoring tool is needed you'll typically add CSS rules that override the authoring tool's default styling.

Typically a developer/designer will do something like this to override the authoring tool's CSS:

  1. Use the browsers development tool to find classes for the elements that needs changes
  2. Experiment with some changes using the same development tool in the web browser
  3. Add the CSS needed for the CSS overrides in a CSS file
  4. Add the files to the site using one of the methods below

Drupal

The Drupal H5P API has a hook that works well for this. For instance you may create a custom module called "mods" and add something like this if you want your CSS to alter the look of the authoring tool

/**
 * Implements hook_h5p_styles_alter
 */
function mods_h5p_styles_alter(&$styles, $libraries, $mode) {
  if ($mode == 'editor') {
    $styles[] = (object) array(
      // Path relative to drupal root
      'path' => drupal_get_path('module', 'mods') . '/h5p-editor-overrides.css',
      // Cache buster
      'version' => '?ver=1',
    );
  }
}

WordPress

  1. You can use an existing plugin you have for site-specific modifications, your custom theme or create a custom plugin like h5pmods.
  2. Next you must add a handler for the h5p_alter_library_styles action. 
    Example:
    /**
 * Implements alter_styles
 */
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
  if ($embed_type == 'editor') {
    $styles[] = (object) array(
      // Path can be relative to wp-content/uploads/h5p or absolute.
      'path' => 'custom-h5p-styling.css',
      'version' => '?ver=1.3.7' // Cache buster
    );
  }
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);
  3. You should now be able to see the changes you've added to the CSS file. If not you should use your browser's debugging tool to see if the file gets loaded. Use Ctrl+Shift+J to open the error console in Chrome. Look for any error messages related to loading of files. Most likely the path to your CSS file is incorrect. Try to open the file directly in your browser.

Moodle

  1. You can use an existing theme or create a custom theme like h5pmods.
  2. Next you must add a handler for the h5p_alter_styles override function.
    Example:
    public function hvp_alter_styles(&$styles, $libraries, $embedType) {
    global $CFG;
    if ($embedType === 'editor') {
        $styles[] = (object) array(
            'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/editor-style.css',
            'version' => '?ver=0.0.1'
        );
    }
}
  3. Make sure you enable the theme and you should be able to see the changes in the H5P editor.

If you're having trouble you can seek help in the forum. Remember to include any error messages, other debugging info or a URL. This makes helping easier.

Hiding/disabling fields from the authoring tool

Some of the H5P content types might have more options than needed for some authors. If you want to remove options from the authoring tool there are several ways of doing it, none of them are perfect, but the trick we use below is the recommended way at the moment if you want to keep data for old content and default values for new content.

Drupal

The Drupal H5P API has a hook that works well for this. For instance you may create a custom module called "mods" and add something like this if you want to remove the Tips and Feedback fieldset from the alternatives in Multiple Choice:

/**
 * Implements hook_h5p_semantics_alter
 */
function mods_h5p_semantics_alter(&$semantics, $machine_name, $major_version, $minor_version) {
  // In this example implementation we remove the tips and feedback 
  //settings for each answer in Multiple Choice version 1.8:
  if ($machine_name == 'H5P.MultiChoice' && $major_version == 1 && $minor_version == 8) {
    // The answering options are at index 2 in semantics. Tips and feedback are in
    // index 2 in the fields list for the answering options
    $semantics[2]->field->fields[2]->deprecated = TRUE;
  }
}

WordPress

  1. You can use an existing plugin you have for site-specific modifications, your custom theme or create a custom plugin like h5pmods.
  2. Next you must add a handler for the h5p_alter_semantics action. 
    Example:
    /**
 * Implements alter_semantics
 */
function h5pmods_alter_semantics(&$semantics, $machineName, $majorVersion, $minorVersion) {
  // In this example implementation we remove the tips and feedback 
  //settings for each answer in Multiple Choice version 1.8:
  if ($machineName == 'H5P.MultiChoice' && $majorVersion == 1 && $minorVersion == 8) {
    // The answering options are at index 2 in semantics. Tips and feedback are in
    // index 2 in the fields list for the answering options
    $semantics[2]->field->fields[2]->deprecated = TRUE;
  }
}
add_action('h5p_alter_library_semantics', 'h5pmods_alter_semantics', 10, 4);
  3. You should now be able to see the changes (tips and feedback fieldset is gone).

Moodle

  1. You can use an existing theme or create a custom theme like h5pmods.
  2. Next you must add a handler for the h5p_alter_semantics action. 
    Example:
        public function hvp_alter_semantics(&$semantics, $name, $majorVersion, $minorVersion) {
        if (
            $name === 'H5P.MultiChoice' &&
            $majorVersion == 1
        ) {
            // Remove the first semantics block, 
            // in this case the media option.
            array_shift($semantics);
        }
    }
  3. Make sure you enable the theme and you should be able to see the changes to the Multiple Choice when viewing it in the authoring tool.

If you're having trouble you can seek help in the forum. Remember to include any error messages, other debugging info or a URL. This makes helping easier.