In my last post (www.elearningworld.org/customising-h5p-in-moodle-using-the-foundation-theme/) you read about how you can use custom CSS with the Foundation theme (moodle.org/plugins/theme_foundation) to alter the look of H5P within Moodle. At the end of the post I stated “One thought that has occurred to me in writing this post is the need to support custom fonts that the theme already has or serve from a list then all you’d need to do would be to write the ‘font-family’ CSS attribute as required. The question is then, is this functionality needed?”, well Stuart replied and said it was, so ‘challenge accepted’!
To recap, H5P is a way of creating interactive content on a web page. It can be integrated into Moodle with the plugin: moodle.org/plugins/mod_hvp.
Disclaimers and license
Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.
H5P demonstration material is – creativecommons.org/licenses/by/4.0/ – licensed.
Firefox® is a registered trademark of the Mozilla Foundation.
Ubuntu® is a registered trademark of Canonical Ltd – ubuntu.com/legal/intellectual-property-policy
Other names / logos can be trademarks of their respective owners. Please review their website for details.
I am independent from the organisations listed above and am in no way writing for or endorsed by them.
What has changed
I have added a new setting ‘hvpfontcss’:
which the default is all of the ‘@font-face’ declarations for all of the fonts in the theme. If you add fonts to the ‘fonts’ folder then all you need to do is write your own ‘@font-face’ CSS using the standard Moodle mechanism (docs.moodle.org/37/en/How_to_add_custom_fonts_in_a_theme) for the file.
Then to use with H5P all you need to do is state the ‘font-family’ in any CSS that you write:
and place it in the ‘hvpcustomcss’ setting.
With the example we now have:
where you can see the font being applied to the text ‘Cloudberries’.
You can find information about the release on my Moodle.org post: moodle.org/mod/forum/discuss.php?d=391938.
And there is more….
I have also added support for Font Awesome 5 Free (fontawesome.com), which you can turn on with the ‘fav’ setting:
I’ve ported the code from Shoelace (moodle.org/plugins/theme_shoelace) and improved it by updating to 5.11.2 from 5.0.13 and testing a bit further to ensure more of the icons are catered for.
Making this happen was not trivial.
Adding ‘hvpfontcss’ was a matter of pre-fixing the existing H5P custom CSS with a processed version of the ‘hvpfontcss’ setting where the ‘font:theme’ tags had been converted into URL’s that the browser could use. This was done by adapting the ‘post_process’ method in the core Moodle ‘theme_config’ object. This is the beauty of Open Source software, you can build upon or adapt on what has already been solved before.
Adding the ‘fav’ setting was much harder. I had already done this in the Shoelace theme so had to port what I’d almost completed there to Foundation. Moodle has icon system classes and a means by which the methods tell the code how to translate core icons into specific icons in the font being used. This has to happen both for icons being converted in the PHP and JS code.
The programmatic approach to this follows the steps of:
- Define a goal of what needs to be achieved.
- Understand how the Moodle functionality works.
- Understand what is being added.
- Work out what modifications are required to integrate the new with the existing.
- Write the code whilst progressively checking and testing that what is intended actually happens.
- Test that the code works.
- Sleep on it.
- Test again that the code works.
- Release the code with the option to turn off if it does not actually work.
- Hopefully get feedback to confirm that it works or if not then fix the issue(s).
Improving software with new functionality adds value to that software. It also comes with risk. The risk of breaking something that is believed to work. Thus that risk has to be worth taking.