Visual Changes (CSS overrides)
Here you'll learn:
- How to add a custom CSS file that overrides the default H5P CSS
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:
- 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 "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
- 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: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);
- 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 ( 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', ); } }
- 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.
Comments
Realia
Thu, 04/21/2016 - 11:53
Permalink
How to do it in Wordpress for newbies ;)
For newbies like me, this documentation was difficult to understand so I thought that I could help others by detailing how I managed to do this on Wordpress.
Hope this is helpful for newbies like me !
falcon
Tue, 04/26/2016 - 01:00
Permalink
It should be. Very nice!
carole
Mon, 10/30/2017 - 11:24
Permalink
Newbie here! Struggling to change visuals
Hello
Thank you for the above post. I followed the exact steps but the fonts and colours did not change
Not sure why?
Carole
tim
Tue, 10/31/2017 - 10:23
Permalink
Hi Carole, could you share
Hi Carole, could you share what else you did and what machine you're using?
carole
Tue, 10/31/2017 - 10:30
Permalink
Thank you to reply :)))
I am working with a Mac Pro. I think the path indicated in the comments above might be out of date. I am not sure when I place the phpmod file once I have created it. Frode has kindly helped me naming all the steps. Do I save it in the h5p file in uploads or plugin section of wp content on the server?
At the moment the quiz does not show on my blog post ;(((
Arrrrgh this plugin might be too difficult to handle for a beginner like me but it is exactly what I was looking for :(((
Thanks
Carole
tim
Wed, 11/01/2017 - 13:31
Permalink
I would recommend keeping the
I would recommend keeping the conversation in one place. Maybe ask Frode in the relevant conversation?
phaqlancs
Wed, 11/15/2017 - 09:33
Permalink
wrong path declaration
This is not optimal. You should keep the plugin file as well as the custom css file together in the plugins directory! Don't use the uploads directory for css files or similar! Also, your css file has errors, but i guess the wrong "<code>" were added by the faulty forum script here.
Use this for the path declaration instead and move the custom.css to the plugins folder:
josecar
Sat, 04/11/2020 - 14:39
Permalink
Thanks that was really
Thanks that was really helpful
railscr
Tue, 08/30/2016 - 05:21
Permalink
Please Help, Iframe background color
Hello Guys, thanks for the tutorial.
I followed the steps, but did not work for me, I'd like to change Iframe background color diferent to the white one, please help.
Thanks ahead for your time!
thomasmars
Tue, 08/30/2016 - 11:36
Permalink
Hi,
What have you done so far, and where are you struggling ? Please show your work.
Thomas
rdenise
Tue, 10/04/2016 - 02:02
Permalink
worked great!
thanks - that was really helpful
lingvemulo
Fri, 05/19/2017 - 16:08
Permalink
Amazingly helpful!
My heartfelt thanks to you! I was feeling a bit intimidated by the instructions, but you bailed me out... It works perfectly! :-)
One question: is using this method pretty foolproof? By this, I mean will future updates affect my changes? I've only modified fonts.
Thank you again!
tomaj
Mon, 05/22/2017 - 07:12
Permalink
Yes
It should work well with future releases.
- Tom
lingvemulo
Mon, 05/22/2017 - 19:31
Permalink
Thanks!
Thanks again! :-)
Mikael
Sun, 08/06/2017 - 20:47
Permalink
Can't change the font family
Hello,
I followed the steps explained in the comment (Thank you! :)) but although I paste this code in the custom-h5p.css file:
<code>html.h5p-iframe .h5p-content {
font-family: 'Barrio', cursive;
}</code>
The font of the text i my Course Presentation still doesn't change.
It should not be a problem of unexisting font because I have been loading it, and also because when I try to change the font color for example, it also doesn't work.
Can I not customize with this method he font to be used in Text added to Course Presentations?
thomasmars
Mon, 08/07/2017 - 09:39
Permalink
font-family and color is set
font-family and color is set for .h5p-course-presentation element, which is a more specific selection than .h5p-frame, which you are using.
So if you want to set font-family for the whole presentation you have to do it at the .h5p-course-presentation DOM layer, or a more specific selector.
Also make sure that your css is properly loaded by inspecting the network tab.
Mikael
Mon, 08/07/2017 - 22:17
Permalink
Still not working, please help me
Thanks a lot. I have tried adding in the CSS code I mentioned the .h5p-course-presentation and all the other layers I could find after inspecting my content, and it still doesn't work. I don't know what I am doing wrong. Please help me! Changing the font in my presentation is crucial and although I start to understand how it works to modify via CSS, what I do has absolutely no effect.
I don't see any error indicating that custom-h5p.css has not been loaded. I can even find this file in the Sources on the Dev console in Chrome.
I have tried overriding the styles with my custom-h5p.css in two different ways. The one explained by Realia and also by using the plugin Snippets and adding this code:
thomasmars
Tue, 08/08/2017 - 13:56
Permalink
Hi, he css of your file is
Hi, he css of your file is invalid, and for the path a version cache buster is set twice.
Your css does not have an ending curly brace, and the css rule does not hit the correct element. You should always try out the css rules in the developer tools of your browser before trying to apply them through the customization.
Changing your css code to the following should resolve your issue:
That is add a curly brace to the end, and remove the space between the h5p-element-inner and h5p-advanced-text selector.
You should also change the path to not include the cache buster: http://30dni.zostanwege.pl/wp-content/uploads/h5p/custom-h5p.css.
Mikael
Tue, 08/08/2017 - 15:18
Permalink
Thank you!
Thank you so much! It's working.
My website is still not loading the right font "Barrio" unfortunately but I will look into this issue, I probably didn't load the font properly.
I had another question but it's completely about another topic: is it possible to block the progress inside a Course presentation until the learner doesn't correctly answer Questions added in this Course presentation?
BV52
Tue, 08/08/2017 - 17:19
Permalink
Assessment mode?
Hi Mikael,
As of the moment no, but you can post your suggestion/s in the Feature Request forum for a better chance of getting implemented.
-BV52
Mikael
Thu, 08/10/2017 - 19:43
Permalink
Thanks. Problem of "font not tolerated"?
Thank you for your answer.
I am getting back to my previous problem: I properly managed to load the Google font Barrio in the overriden CSS and it seems like this font is "not tolerated" by H5P which seems to display some kind of "placeholder" font instead. Is it possible that some fonts cannot be shown in H5P elements? If yes, can we do something about it, or is there a list of font that are for sure working?
Thanks
thomasmars
Fri, 08/11/2017 - 09:22
Permalink
What do you mean by that the
What do you mean by that the font is "not tolerated" ?
Are you getting a console error when loading the font throught the hook ?
There should be no functionality in H5P for blocking certain fonts, can you describe the problem more in detail so I might be able to help you ? What exactly are you seeing ? What browser are you using ? When does this error show ?
Mikael
Fri, 08/11/2017 - 10:33
Permalink
Thanks for your support. I am
Thanks for your support. I am using Chrome (but got the same issue with Firefox). Here is what I see: http://prntscr.com/g74y9sI don't get any console error and the font "Barrio" is mentioned but as you can see it doesn't show properly (normaly this font looks like that: https://fonts.google.com/specimen/Barrio?selection.family=Barrio)
Let me know if you need more details or more screenshots.
thomasmars
Fri, 08/11/2017 - 11:05
Permalink
How are you defining the font
How are you defining the font-face/loading the font ? I assume "Barrio" is not part of the standard browser fonts.
Mikael
Fri, 08/11/2017 - 12:05
Permalink
I am using the plugin "Snippets"
I am using the plugin "Snippets" and I am adding this code:
thomasmars
Fri, 08/11/2017 - 12:48
Permalink
Okay, this will probably not
Okay, this will probably not work if the H5P is loaded inside an iFrame. Since the font is not added inside the H5P iFrame, the font is not loaded there as well. You should add the font to the H5P iFrame through the H5P hook, like you did when adding the css.
See https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Mikael
Fri, 08/11/2017 - 14:16
Permalink
I added .h5p-ifram in custom
I added .h5p-ifram in custom-h5p.css and it still doesn't work.
I tried adding all the other hooks I could find: .h5p-iframe .h5p-slide .h5p-content .h5p-container .h5p-current .h5p-element .h5p-advancedtext-outer-element .h5p-wrapper .h5p-box-wrapper .h5p-presentation-wrapper .h5p-initialized .h5p-standalone
And it doesn't work either.
Should I load the font with @font-face somewhere, as you mentioned? If yes, in which CSS file or with what other means should I do so?
fnoks
Mon, 08/14/2017 - 10:26
Permalink
You should use Chrome's
You should use Chrome's developer tools to check if your CSS rules are applied. Just right-click an element on the page, and select "inspect". If you don't find your rules, the css file is probably not included in the correct way.
Elina Solovei
Mon, 02/15/2021 - 23:33
Permalink
Loading font
Hi, was following the thread and gradually resolving my problems with adding custom CSS. Everything is working now except the font (Nunito) isn't recognised by H5P. I'm using a Wordpress H5P plugin. Does it still mean the content is loaded as iFrames? Is there a step-by-step guide on how to add the font inside the H5P iframe through the H5P Hook?
Thank you
Elina
Thank you.
ms930
Tue, 02/23/2021 - 14:42
Permalink
Fonts not loading in H5P iframe
Same problem here, This is the code to introduce a new font in moodle that I put in custom.css:
@font-face { font-family: 'fontname'; src: url([[font:theme|fontname.eot]]); src: url([[font:theme|fontname.eot]]) format('embedded-opentype'), url([[font:theme|fontname.woff]]) format('woff'), url([[font:theme|fontname.woff2]]) format('woff2'), url([[font:theme|fontname.ttf]]) format('truetype'), url([[font:theme|fontname.svg]]) format('svg'); font-weight: normal; font-style: normal; } The url refers to the fonts folder in the theme's directory. It takes effect everywhere except in the H5P iframe.I can change all attributes like font-size and ... except for font-family which I can see in the console but the font is not loaded in the iframe.phaqlancs
Tue, 08/22/2017 - 14:09
Permalink
you dont need to enter the
you dont need to enter the relucatent <code> tags. they dont belong into CSS.
bparks
Tue, 11/13/2018 - 20:59
Permalink
Thanks very much. Your
Thanks very much. Your instructions were straightforward and easy.... Appreciated!
jess_taylor7
Wed, 10/16/2019 - 14:58
Permalink
Hello! This may be a silly
Hello!
This may be a silly question:
where do you create the new file? In h5p itself?
musabtahir
Tue, 10/04/2022 - 13:50
Permalink
where will i apply my custom
where will i apply my custom CSS
railscr
Tue, 09/06/2016 - 22:44
Permalink
Thanks
Hi Thomasmars, thanks for replying!
I made a memory set just for fun, very simple for testing purposes, but I noticed the Iframe Background color is always white, is there a way to change that color if is a WP site? I tried to follow the steps above with no luck...
This is the Iframe code:
<iframe src="https://h5p.org/h5p/embed/22745" width="1090" height="225" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>
And this is the place I embed for testing purposes:
http://soda7cr.com/favor-no-eliminar/
Is there a way to match Iframe background color with Theme's background color, that'd would be just awesome, please let me know.
I appreciate any help from your side.
Frank.
Realia
Tue, 09/06/2016 - 23:09
Permalink
Hi ! If you use this piece of
Hi ! If you use this piece of CSS, your background should be transparent :
.h5p-content {background: transparent !important} Cheers, Isarailscr
Wed, 09/07/2016 - 00:06
Permalink
Thank you!
Yeah, you are right Isa, I appreciate it!
I installed H5P WP plugin and that code works like a charm if I'm self hosting H5P content, but If I use an Iframe code that will not work, please see the following link and you'll se both examples: http://soda7cr.com/favor-no-eliminar/
First one: Iframe code (css code doesn't work) and
Second one : Self host H5P in WP and yes it worked, however I would still like to know how to change the code in Iframe if anyone knows, that'd be really really awesome.
Thanks Isa for your help on this, I appreciate it!
fnoks
Wed, 09/07/2016 - 10:00
Permalink
Hi,Unfortunately, you can't
Hi,
Unfortunately, you can't do anything with the content of the iframe, when the content is served from another domain. The only way you could add your own style to the embedded content, is if this was included by h5p.org, but there is no support on h5p.org to define your own CSS.
railscr
Wed, 09/07/2016 - 20:09
Permalink
Understood, Thanks!
Hi fnoks, I appreciate the answer, thanks for your detailed explanation, I appreciate it!
willski
Thu, 12/22/2016 - 20:59
Permalink
Need assistance
Is the procedure here different depending on what kind of library you're trying to load? I'm attempting to alter the CSS in a course presentation and not having any luck. I've followed all the steps above, but no changes are taking place. You can see the course at https://mahonebaywebdesign.com/test (the password is 'test').
Any feedback here would be greatly appreciated, as I find the documentation here not specific enough for me.
tomaj
Fri, 12/23/2016 - 07:09
Permalink
Styling inside an iframe
Hi Willski,
This might be of help to you: http://stackoverflow.com/questions/583753/using-css-to-affect-div-style-inside-iframe
- Tom
willski
Sat, 12/24/2016 - 19:26
Permalink
Thanks Tom--I did some
Thanks Tom--I did some exploring of your link and related ones. They seem to be suggesting that I need to use javascript to affect the styles within an iframe. But I was under the impression that the h5pmods plugin would allow me to modify the stylesheet that is being called. If not, and I do need javascript, I am not clear on where to put it. If you or someone else could possibly help me out with an example, that would be amazing.
*Edit: I was able to get the plugin working, though to be honest I'm not sure why. I didn't change any paths. It might have been a question of the way I was calling elements, but in any case it's operational now. Thanks very much.
falcon
Mon, 01/02/2017 - 10:46
Permalink
I get the impression that you
I get the impression that you run your own WordPress site and try to add custom css when H5P is loaded, right?
And you've followed these instructions?
https://h5p.org/documentation/for-developers/visual-changes
Could you add debug code to figure out if the PHP that is responsible for adding the css is being run?
leac
Mon, 01/09/2017 - 07:27
Permalink
Is there such a hook for Moodle?
What I usually have to do in Moodle is modify the CSS of the question type (after downloading from the h5p site), zip it, and upload it to the library (via site administration). It'd be much esier to just use a hook in my theme code.
tomaj
Mon, 01/09/2017 - 09:30
Permalink
Github issue
Hi Leac,
Unfortionatly there isn't any support for this yet. But there is a issue on github on it.
It would be very nice if someone in the community could implement it, and create a pull request. :)
- Tom
eizeddin
Wed, 01/25/2017 - 20:04
Permalink
Pull Request
Hi Tom,
I have created the following pull request for this feature.
Eiz
thomasmars
Thu, 01/26/2017 - 09:35
Permalink
Very nice! We will have a
Very nice! We will have a look at it as soon as possible, you can follow along the issues for it at: HFP-555, HFP-556 and HFP-557.
KDChronos
Mon, 04/03/2017 - 23:11
Permalink
Moodle Visual changes
I'm trying to implement visual changes in activities in Moodle, but in a standalone way, being able to have the same activity in different courses, with different styles, i tried to upload a Memory game h5p file, that i modify the css, but when loading it show the standard visuals. How can I implement this?
thomasmars
Tue, 04/04/2017 - 09:41
Permalink
Hi, what have you done so far
Hi, you should not alter the css of a library directly in the library file, since this will be overwritten by later versions. Make sure to follow the steps outlined in this article.
Try creating the css example described in https://h5p.org/change-color-of-the-editor, using the theme skeleton found in https://github.com/h5p/h5pmods-moodle-plugin as described in this article. Let us know if the documentation is not sufficient or you get stuck somewhere.
marbaque
Sun, 07/22/2018 - 03:29
Permalink
standalone
What about h5p-standalone? is it possible to add a path to another stylesheet in the script?
Pages