Visual Changes (CSS overrides)

When visual changes to an existing H5P content type is needed, it means adding CSS rules that override the content type's default styling. To make sure CSS are added both for H5P in div and iframe, we need to implement H5P specific functions.

Be aware that changing CSS really may mess up the functionality, since some of the functionality assumes specific CSS rules are set. E.g changing the position attribute for animated elements may lead to unwanted results.

Typically a developer/designer will do something like this to override H5P 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 "mymodule" and add something like this if you want your CSS to only modify multichoice:

function mymodule_h5p_styles_alter(&$styles, $libraries, $mode) {
  if (isset($libraries['H5P.MultiChoice']) && $libraries['H5P.MultiChoice']['majorVersion'] == '1') {
    $styles[] = (object) array(
      // Path relative to drupal root
      'path' => drupal_get_path('module', 'mymodule') . '/h5p-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:
   

   function MYPLUGIN_alter_styles(&$styles, $libraries, $embed_type) {
     $styles[] = (object) array(
       // Path must be relative to wp-content/uploads/h5p or absolute.
       'path' => bloginfo('template_directory') . '/custom-h5p.css',
       'version' => '?ver=0.1' // Cache buster
     );
   }
   add_action('h5p_alter_library_styles', 'MYPLUGIN_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 (
           isset($libraries['H5P.InteractiveVideo']) &&
           $libraries['H5P.InteractiveVideo']['majorVersion'] == '1'
       ) {
           $styles[] = (object) array(
               'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
               'version' => '?ver=0.0.1',
           );
       }
   }
   

3. Make sure you enable the theme and you should be able to see the changes to the Interactive Video library when viewing an existing H5P or 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.