Authoring tool customization
Here you'll learn:
- How to add a custom CSS file that overrides the default H5P CSS in the editor
- How to remove fields and fieldsets from the authoring tool for specific content types
- How to change the default blue color of the authoring tool into something else
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:
- Use the browsers development tool to find classes for the elements that needs changes
- Experiment with some changes using the same development tool in the web browser
- Add the CSS needed for the CSS overrides in a CSS file
- 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
- You can use an existing plugin you have for site-specific modifications, your custom theme or create a custom plugin like h5pmods.
- 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);
- 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
- You can use an existing theme or create a custom theme like h5pmods.
- 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' ); } }
- 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
- You can use an existing plugin you have for site-specific modifications, your custom theme or create a custom plugin like h5pmods.
- 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);
- You should now be able to see the changes (tips and feedback fieldset is gone).
Moodle
- You can use an existing theme or create a custom theme like h5pmods.
- 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); } }
- 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.
Comments
hello@abcclub.org
Mon, 04/11/2022 - 07:45
Permalink
Interactive or 360 Video
Is there a way to add the content type of Speak the Words to the Interactive Video or 360 Video? Or is there a way to add an api to create a new type of interactive in the interactive video? Thanks!