In the past, I’ve used the H5P plugin for Moodle projects and I’ve never really liked it. This is due to various stylesheet constraints. Recently I’ve been experimenting with the WordPress H5P plugin, specifically modifying stylesheets using H5P Mods. In this blog post, I reflect on my experience and share the installation steps.
I chose to write this post for two reasons; the first, as a reminder and reflection of how I set this up, and two, hopefully, this will be useful for others. I spent quite a lot of time googling and experimenting but have finally been able to apply a modified H5P stylesheet to an Interactive Book. I’m still working on this mind you, so I don’t have images to share right now, but hopefully the steps will be enough.
So installing the H5P plugin is the first step. This can be done via the Plugins page in WordPress – the usual way plugins are installed. So I won’t go into details here on that. The reason I wanted to be able to modify the plugin is because I find the font and colours used in the plugin horrendously old fashioned – I think we’ve gone past the days of using Times New Roman in its blackest form.
There is a lot of information available on H5P Mods on the H5P website, but I found a lot of it to be too technical to understand. I can usually muddle my way through, but in this instance, I needed something simpler to follow.
I believe you can download the files needed for H5P Mods from GitHub, but again I found this difficult to follow – I had no idea where the files needed to go. After googling, I found what I was looking for in the form of a comment made on the H5P website from someone called Realia (I’ve linked to this post in the references). Thanks to this post, I was finally able to get the modifications working! The code I used has been taken from that particular comment, so I don’t claim any responsibility for it. I’ve tried to simplify the steps from the comment in this post, as even that was a bit hard to follow at times.
The installation process basically consists of creating folders and files followed by a customised stylesheet. These files need to be uploaded directly to your WordPress installation directory. My WordPress site is self-hosted, so I was able to navigate to this area using an FTP client.
The Process
Step 1: The first thing I did was open notepad and copy and paste the below code into it. I then saved this as a file called phpmods.php.
<?php
/**
* H5P Mods Plugin.
* Alters the way the H5P plugin works.
* @package H5P
* @author Joubel <<a href="mailto:contact@joubel.com">contact@joubel.com</a>>
* @license MIT
* @link <a href="http://joubel.com">http://joubel.com</a>
* @copyright 2015 Joubel
*
* @wordpress-plugin
* Plugin Name: H5P Mods
* Plugin URI: <a href="http://www.h5p.org">http://www.h5p.org</a>
* Description: Overrides the H5P native H5P CSS with your own adjustments.
* Version: 0.0.1
* Author: H5P
* Author URI: <a href="http://www.h5p.org">http://www.h5p.org</a>
* Text Domain: h5pmods
* License: MIT
* License URI: <a href="https://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>
* Domain Path: /languages
* GitHub Plugin URI: <a href="https://github.com/h5p/h5pmods-wordpress-plugin">https://github.com/h5p/h5pmods-wordpress-plugin</a>
*/
// If this file is called directly, abort.
if (!defined('WPINC')) {
die;
}
/**
* Allows you to alter which stylesheets are loaded for H5P. This is
* useful for adding your own custom styles or replacing existing once. *
* @param object &styles List of stylesheets that will be loaded.
* @param array $libraries The libraries which the styles belong to.
* @param string $embed_type Possible values are: div, iframe, external, editor.
*/
function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {
$styles[] = (object) array(
'path' => '/custom-h5p.css',
'version' => '?ver=1.0' // Cache buster
);
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);
?>Step 2: You then need to create another file called custom-h5p.css. This is the modified stylesheet used to override the H5P stylesheet. Modifying this sheet lets you make changes to the stylesheet without making changes to any of the actual H5P code. This means if you need to roll back, you can simply delete the contents of this file.
In my example I wanted to change the colour of the progress bar in an interactive book. I used the developer tools in Chrome (accessed by pressing F12) to locate the css classes. I experimented with the developer tools and used these to create a mockup of how I wanted it to look. Obviously you would customise this file to your own needs, but below is an extract of what’s inside my .css stylesheet.
/* Interactive Book Progress bar */
.h5p-content .h5p-interactive-book-status-progressbar-back {
background-color: #e6f5ed;
}
.h5p-content .h5p-interactive-book-status-progress-number {
color: #079948;
}
.h5p-content .h5p-interactive-book-status-progressbar-front {
background-color: #079948;
}
/* Progress bar end */Step 3: I then opened up my FTP client, connected to my sever and navigated to: /wp-content/plugins/
Step 4: In here I created a new folder called h5pmods. I then uploaded the phpmods.php file I created, into this folder.
Step 5: I then navigated to: /wp-content/uploads/h5p/ this directory forms part of the H5P plugin. In here I uploaded my custom-h5p.css stylesheet.
Step 6: If you’ve followed the above steps correctly when you navigate to WordPress Admin > Plugins you should see the h5pmods plugin listed. You should now be able to activate this.
Once activated, any changes you make to the custom-h5p.css file will override the H5P stylesheet – granted you will need to make sure that the .css classes you are changing actually exist by experimenting with something like the Developer tools in Chrome.
Summary
I’m hoping that these clarified steps may help others who are trying to get this plugin to work. Again I can only thank Realia for posting up the code, but I hope the above helps to simplify this even further. I’m also hoping this will be a reminder to myself when I need to make further tweaks to other H5P assets.
References