H5P Guides

Change the color of the editor

In the January 2017 release of H5P, colors were introduced in the editor tool to easily distinguish between the most important fields. This guide describes how to change editor colors to match the theme of your site.

The standard look of the "Chart" content type is depicted below:

In this guide, we will make it look like this:

Overriding the colors is done by creating a separate CSS file that will be loaded when the editor loads. We will start by defining the CSS-file. Below, I have created an example file which will make the blue fields red.

/* List item title bar & Group title bar */
.h5p-li > .list-item-title-bar.importance-high,
.group.importance-high > .title {
  background: #C62828;
  border-color: #B71C1C;
}
/* List order buttons */
.h5p-li > .list-item-title-bar.importance-high .order-group {
  background-color: #B71C1C;
}
.h5p-li > .list-item-title-bar.importance-high .order-group > *:hover {
  background-color: #880E4F;
}
/* Field labels */
.field.importance-high > .h5peditor-label {
  color: #C62828;
}
/* Buttons */
.h5peditor-button.importance-high,
.h5p-vtab-wrapper .h5peditor-button.add-entity {
  background: #C62828;
  background-image: linear-gradient(#E53935 50%, transparent 50%, transparent) !important;
  border-color: #B71C1C;
}
.h5peditor-button.importance-high:hover,
.h5p-vtab-wrapper .h5peditor-button.add-entity:hover {
  background: #E53935 !important;
  background-image: linear-gradient(#E53935 50%, transparent 100%, transparent) !important;
  border-color: #B71C1C !important;
}

You also need to make sure the CSS is loaded together with the editor. H5P has a mechanism making that possible in Drupal and WordPress. This requires some coding skills. First out is an example for Drupal:

function MYMODULE_h5p_styles_alter(&$styles, $libraries, $mode) {
  if ($mode === 'editor') {
    $styles[] = (object) array(
      // Path relative to drupal root
      'path' => drupal_get_path('module', 'MYMODULE') . '/override-importance-high.css',
      // Cache buster
      'version' => '?ver=2',
    );
  }
}

In this example, I have made a Drupal module and implemented the hook_h5p_styles_alter. The implementation checks if we are in the editor context and then adds the CSS-file which contains the CSS listed above. MYMODULE must be changed to match the name of your module, which you may choose arbitrarily.

Below, you'll find what code is needed for Wordpress (MYPLUGIN must be changed to match the name of your plugin):

function MYPLUGIN_alter_styles(&$styles, $libraries, $mode) {
  if ($mode === 'editor') {
    $styles[] = (object) array(
      // Path must be relative to wp-content/uploads/h5p or absolute.
      'path' => bloginfo('template_directory') . '/override-importance-high.css',
      'version' => '?ver=0.1' // Cache buster
    );
  }
}
add_action('h5p_alter_library_styles', 'MYPLUGIN_alter_styles', 10, 3);

For Moodle the code woud be (adjust the theme path for the css file for your theme):

public function hvp_alter_styles(&$styles, $libraries, $embedType) {
    global $CFG;
    if ($embedType === 'editor') {
        $styles[] = (object) array(
            'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
            'version' => '?ver=0.0.1',
        );
    }
}

Read more about how to make visual changes here