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
otacke
Mon, 07/23/2018 - 09:34
Permalink
Hi marbaque!If the community
Hi marbaque!
If the community doesn't have any experience with this and nobody answers here, your best chance probably is to contact the authors of h5p-standalone.
Cheers,
Oliver
ronpluy
Tue, 07/04/2017 - 16:13
Permalink
Adding handler to Moodle
Hi, I'm afraid the intructions as given on the site are insufficient for me... Using Adaptable theme in Moodle 3.3 Where exactly do I add the PHP code given to extend the handler:
Does that mean just add the code snippet given here to /mod/hvp/renderer.php ??
Help much appreciated
Sincerely
Ron
tomaj
Wed, 07/05/2017 - 07:53
Permalink
Example
Hi,
Here is an example of how it can be done.
- Tom
ronpluy
Tue, 07/04/2017 - 17:19
Permalink
Adding handler to Moodle
Hi, I'm afraid the intructions as given on the site are insufficient for me... Using Adaptable theme in Moodle 3.3 Wher exactly do I add the PHP code given to extend the handler:
Does that mean just add the code snippet given here to /theme/adaptable/renderer.php ??
Help much appreciated
Sincerely
Ron
Hodgekins
Fri, 08/18/2017 - 14:01
Permalink
Drupal 8 visual changes
What do you think is the best way to alter css in the D8 module?
I searched for hook_h5p_syles_alter in the D8 module files and I couldn't find anything. Is this something that's going to be included in the September release?
Many thanks for all the work that's gone into the D8 module so far :)
Ben
tomaj
Mon, 08/21/2017 - 09:28
Permalink
Code example
Hi,
I pushed some example code here on github, from when I was developing the hook functionality.
Hopefully it can help you out. Just clone it, and put it together with your modules.
- Tom
Hodgekins
Fri, 08/25/2017 - 01:24
Permalink
Thanks very much!
This is just what I needed. Thanks :)
phaqlancs
Tue, 08/22/2017 - 14:03
Permalink
Cannot change CSS file location (WP)
It seems that whatever i enter in the 'path' => description i cannot use any path other than the uploads/h5p path.
I tried so far:
Which results in an invalid link in the sourcecode (does not work without the leading "/" as well)
<link rel='stylesheet' id='h5p-------plugins-h5p-ci-custom-h5p-styling-css' href='http://example.com/wp-content/uploads/h5p/../../plugins/h5p-ci/custom-h5p-styling.css?ver==1.3.7' type='text/css' media='all' />
When I try:
It does not work either, but simply directs to the uploads/h5p directory:
<link rel='stylesheet' id='h5p-custom-h5p-styling-css' href='http://example.com/wp-content/uploads/h5p/custom-h5p-styling.css?ver==1.3.7' type='text/css' media='all' />
Even when I use an absolute path...
(I entered the space in http only to disbale the auto-transform-to-link "function" here in the editor)
...it does not work
<link rel='stylesheet' id='h5p-http---example-com-wp-content-plugins-h5p-ci-custom-h5p-styling-css' href='http://example.com/wp-content/uploads/h5phttp://example.com/wp-content/plugins/h5p-ci/custom-h5p-styling.css?ver==1.3.7' type='text/css' media='all' />
---
How can I use a css file from the plugin-directory?
Thanks in advance
icc
Wed, 08/23/2017 - 11:22
Permalink
There is a bug when adding
There is a bug when adding scripts to content types that are embedded via 'div' instead of an iframe. This was fixed in June (c5365cc) but hasn't been released yet.
I recommend you apply the fix to your code and then use absolute paths.
It will continue to work when the next update comes.
look
Thu, 05/10/2018 - 02:14
Permalink
Is there a bug in it? did you found a solution?
trying to
add_action(
'h5p_alter_library_styles'
,
'h5pmods_alter_styles'
,
10
,
3
);
in functions.php of the theme - just has no effect. it look like it is never called.
(sorry this comment in wrong location for some reason - and can't delete it...)
Marlon Sabala
Tue, 10/24/2017 - 16:54
Permalink
Please please help
I must admit, I am kind of doing guess work with wordpress here but I follow the instructions from the begining and still, it seems the file css file is not being loaded properly.
So, I have a phpmods.php with the folowing code:
The plugin is active. Then I have the css file in the URL above with this:
I was able to chnage the font as you can see so the file is being called correctly, but still I can't make the other chnage. page.
I know I'm probbaly doing somehting really dum, but please can someone shed some light?
Realia
Tue, 10/24/2017 - 16:52
Permalink
Hi !I think that you should
Hi !
I think that you should clear your browser cache because the changes did apply from where I stand :
Greetings,
Isabelle
Marlon Sabala
Tue, 10/24/2017 - 16:57
Permalink
that was quick. thanks
that was quick. thanks Isabelle.
I saw that a couple of minutes after posting. My bad, I had been working on a site with development mode on all morining and just switched to play on this one.
Anyway, thanks again. I still have an issue though. the thing that I really wanted to change is not budging. (I updated the previous post.)
Realia
Tue, 10/24/2017 - 17:22
Permalink
You're welcome :)Concerning
You're welcome :)
Concerning your second issue, if I load your CSS (https://portuguesewithcarla.com/wp-content/uploads/h5p/custom-h5p.css) I don't find the CSS code restyling the progress bar in it. That's why the progress bar doesn't change. Also, in your CSS, maybe you should try to add an "!important;" argument :
background
: linear-gradient(to
right
,
white
,
black
) !important;
Hope this helps :)
Marlon Sabala
Tue, 10/24/2017 - 17:44
Permalink
Oh for goodness sake. stupid
Oh for goodness sake. stupid cashing again. Anyway, thanks for your help.
I just need to sort out where the bottleneck is now.
Marlon Sabala
Tue, 10/24/2017 - 17:44
Permalink
Oh for goodness sake. stupid
Oh for goodness sake. stupid cashing again. Anyway, thanks for your help.
I just need to sort out where the bottleneck is now.
carole
Mon, 10/30/2017 - 17:15
Permalink
Newbie needing help!
Hello,
I am very new to WordPress. I have followed the steps above as I want to change the font and button colours for background and hover. It does not seem to work for me. Anybody willing to help with this? ThanksCarole
jlb224
Sun, 12/03/2017 - 17:18
Permalink
alter css styles in Moodle 3.4
Hello, I am not a developer so apologies if these seem like very basic questions!
I am trying to alter css styles for a H5P fill in the blanks question in Moodle 3.4.
In the theme/{theme name}/classes folder, I have added:
a php file called mod_hvp_renderer containing:
<?php
class theme_clean_mod_hvp_renderer extends mod_hvp_renderer {
public function hvp_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
if (
isset($libraries['H5P.FillIn']) &&
$libraries['H5P.FillIn']['majorVersion'] == '1'
) {
$styles[] = (object) array(
'path' => $CFG->httpswwwroot . '/theme/clean/style/h5p_fi_overrides.css',
'version' => '?ver=1.6',
);
}
}
}
and in the theme/{theme name}/style folder a css file containing (just for testing at this point):
.h5p-question-introduction > p {
font-size: 100px;
color: #2ECC40;
margin: 0;
}
But no changes are applied.
I am using a local version of Moodle (not sure if that affects path?).
In the PHP code I dont know what version refers to. For this I have used the release number noted in mod/hvp/version. Is that right? I have also tried 'ver=1.6' '1.6' '2017112800' (the plugin version number) and no change.
Also, I have used 'H5P.FillIn' but I couldnt find the content type names listed anywhere so not sure that is correct.
Can you see anything obviously wrong here? Any help appreciated. Ive been trying to figure it out all day!
Best wishes
Jo
thomasmars
Mon, 12/04/2017 - 13:54
Permalink
Hi,Do you have a github
Hi,
Do you have a github repository with the code ? This would make it much easier to see what is wrong.
First of all, you should start with a working example, I suggest using https://github.com/h5p/h5pmods-moodle-plugin, and putting it flatly in the theme/ folder, then do small incremental changes to make sure that it works with what you are trying to achieve. I think this will save you a lot of debugging trouble.
From what I can see the library name seems to be off, unless you're developing something locally called "H5P.FillIn". I assume this should be "H5P.Blanks". You can find library names for all content types in the library.json file inside that repository under the "machineName" property. See https://github.com/h5p/h5p-blanks/blob/master/library.json#L4
Assuming the folder and theme name of your theme is "clean", the rest looks good.
When you get the configuration right you should keep an eye on your "network" tab in the browser developer tools, where you should be able to see if your .css file is being loaded properly.
The version in the styles object is not very important, it is mainly used for busting caching of the styles, so that you will get the new styles when you have made changes to it. Just make sure to increment or change the version when you make changes to the .css file.
As mentioned earlier it will be easier if you have a repository where we can see the full code you have written.
Best regards, Thomas
jlb224
Mon, 12/04/2017 - 16:38
Permalink
Thanks! All sorted
Hi Thomas,
Thanks for your reply! Its now working :)
Your note about the Network tab in the developer tools was super helpful. I could see straight away that the css file was not running.
In summary, I changed the library name to "H5P.Blanks" (thanks for pointing to the location; I had searched but couldnt find them), and it looks like the version name was causing a problem after all. I changed it to be ?ver=1, refreshed and all changes applied!
Thanks again :)
Best wishes, Jo
thomasmars
Tue, 12/05/2017 - 09:43
Permalink
Happy you figured it out :
Happy you figured it out :)
Don't hesitate to let us know if you run into more troubles.
aaespaul
Mon, 12/18/2017 - 11:39
Permalink
Please update this explanation
Hello Guys,
I must say this explanation is terrible! Please update this to show the details better:
Explain where to add the code, explain where to find other library names, explain explain explain......
EDIT: Also adding the preview theme to my moodle enviroment didn't add it as a theme.
I'll just figure it out myself now, just hope this will improve.
Bye Bye
thomasmars
Tue, 12/19/2017 - 14:58
Permalink
Thank you for the feedback :)
Thank you for the feedback :) Would you be interested in contributing with some improved documentation here on what you've strugged with ?
ac1643
Mon, 01/22/2018 - 17:19
Permalink
Hi, I've tried multiple
Hi, I've tried multiple combinations of the above and cannot get this to work. Its on wordpress and I've tried creating the plugin, but no sign of the css file being detected when displaying the page. I've tried putting the handler into code snippets but that gives this error:
Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID
So my questions are, do you have any idea why the plugin method wouldn't work and why am I getting this error when using code snippets?
Thanks in advance
thomasmars
Tue, 01/23/2018 - 13:34
Permalink
Hi, a quick google search
Hi, a quick google search will tell you that this error is caused by you trying to get a resource from an address that has an invalid certificate.
This means that you probably do not have a valid SSL certificate on the server where you are fetching the css file from, so your browser will stop you from fetching the resource. You can fix this by adding a valid certificate for your site, or circumvent the error, I'm sure google can help you find a good solution here.
Best regards,
Thomas
cchantzis
Fri, 02/02/2018 - 10:03
Permalink
Styling H5P authoring tool
hello guys, I need your help.
I'm trying to change the fonts of H5P authoring tool using a plugin in which the following code is included
In custom-h5p.css the following code is included
What am I doing wrong? (I checked that the .css file is loaded...)
thomasmars
Mon, 02/05/2018 - 15:03
Permalink
Hi, if you see that the .css
Hi, if you see that the .css file is loaded, then the css should be applied, but since you have selected .h5p-hub it will only be applied inside the h5p-hub client (that is the drop-down). If you want the fonts to be applied to the whole edited you should use:
Note that the css will not be loaded before a library is selected, as it is meant for altering styles of a library, not the whole editor including the hub client.
ayoze
Fri, 02/02/2018 - 15:43
Permalink
Change width of a div
I am trying to change the size of the div with the styles h5p-image-hotspot-popup, h5p-video, h5p-image-hotspot-has-header and that it has a width of 49% that is in this direction https: / .. ....... com / mod / hvp / view.php? id = 1688 when you display the plus button located just above CE. How could the width change by 35%? I have installed h5p plugin in moodle. thanks to everyone.
ayoze
Fri, 02/02/2018 - 16:00
Permalink
Change width of a div
I am trying to change the size of the div with the styles h5p-image-hotspot-popup, h5p-video, h5p-image-hotspot-has-header and that has a width of 49% that is in this direction https: //....com/mod/hvp/view.php?id=1688 when you display the plus button located just above CE. How could the width change by 35%?
I appreciate a quick response.
thomasmars
Mon, 02/05/2018 - 15:08
Permalink
I don't understand your
I don't understand your question. Please be more specific about what you have tried so far and where you are stuck.
afinkdesign
Sat, 02/03/2018 - 10:22
Permalink
Your documentation does not work
Hello,
I have tried to change the css of personality test on my WP-Site by doing your step by step documentation because on mobile the "Personality" is not showing correctly (does not fit into frame).
I am not able to change the css ... :-(
I also have read the comments here and found out that the problem still exist but you found a solution.
Maybe you should update your wrong documentation to a correct one.
Thank you very much!
Regards,
Alex
thomasmars
Mon, 02/05/2018 - 15:06
Permalink
What is wrong in the
What is wrong in the documentation ? Please be more specific.
phaqlancs
Sat, 02/03/2018 - 15:32
Permalink
Whut?
sorry but instructions are unclear. i fear no one can understand your question.
leac
Sun, 02/25/2018 - 08:55
Permalink
Overridin the renderer on Moodle 3.3 in a theme inheriting Boost
The Boost theme has a different way of overriding renderers: it places the renderer in the classes->output folder. Do you have an example of how to implement the Moodle code in this new way? I've been struggling with various sub-folders, namespaces, class names, etc., and haven't managed to get it to work.
I'd really appreciate your guidance as much as possible.
Thank you
thomasmars
Mon, 03/05/2018 - 14:19
Permalink
Hi,When overriding multiple
Hi,
When overriding multiple renderers, like the Boost theme, you must be meticulous with your namespaces, i.e. namespace should be the same for all renderers that you're overriding, if you're making modifications directly within the boost theme, the namespace must be "theme_boost\output". Make sure you extend the correct class, should be "mod_hvp_renderer", and that it finds the renderer that it should extend.
Apart from this, the guidelines in the documentations should be the same, and just as valid for this approach. Perhaps if you tell us what you have done so far, where you are stuck and what error messages you are getting we can help you further.
Best regards, Thomas
leac
Tue, 03/06/2018 - 07:39
Permalink
I found a solution
Thank you for your detailed answer, Thomas.
I actually have this solved, since I posted a question in the Moodle developer forum, so I'll share the solution here:
In the
classes->output
folder of my theme (which is a grandchild theme of Boost, based on Fordson), I create a file named mod_hvp_renderer.php. In it, like you said, the namespace is theme_mytheme\ouput, and the class is mod_hvp_renderer which extends \mod_hvp_renderer.In a nutshell:
namespace theme_mytheme\output; defined('MOODLE_INTERNAL') || die; class mod_hvp_renderer extends \mod_hvp_renderer { public function hvp_alter_styles(&$styles, $libraries, $embedType) { global $CFG; $styles[] = (object)array( 'path' => $CFG->httpswwwroot . '/theme/mytheme/style/h5p_cp_overrides.css', 'version' => '?ver=0.0.1', ); } }File
classes->output->
mod_hvp_renderer.php:I think if a demo theme that uses this kind of code were created, similar to the demo theme that was created for the usual way, It might help other people in this situation. However that, of course, is your decision.
Again, thank you for your answer and for your willingness to help!
thomasmars
Tue, 03/06/2018 - 09:53
Permalink
I'm happy you got this
I'm happy you got this working. I agree, a demo with this approach would be very valuable. Unfortunately I don't have much time to spare for this currently, but I'd be happy to accept a demo with some descriptive documentation for it and put it up here.
Thanks for the feedback and description of how you got this working, I'm sure it will help others in the same position.
jonmase
Thu, 04/12/2018 - 19:48
Permalink
Thanks, really helpful!
Thanks LeaC, and Thomas, this really helped me get this working in my own child theme. This is definitely not easy/intuitive for a relative Moodle rookie, so I'll try to put this together into a simple demo that can be added to this documentation, as I hope/expect this is something that others will increasingly want to do.
BV52
Fri, 04/13/2018 - 04:35
Permalink
Hi jonmase,We'll be looking
Hi jonmase,
We'll be looking forward to that and thank you :-)
-BV52
nikolas
Thu, 03/22/2018 - 09:40
Permalink
My 5 cents for Drupal 7 with subtheme
You can add the css changes in your subtheme.css file. It works for me.
I didn't like the grayscale and opacity of images in Memory Game. I changed them adding these rools in mysubtheme.css
.h5p-memory-game .h5p-memory-card.h5p-matched { opacity: 1; }
.h5p-memory-game .h5p-memory-card.h5p-matched img { filter: none;}
PS: I am not a developer :)
BV52
Thu, 03/22/2018 - 11:44
Permalink
Thanks for sharing Nikolas ;-
Thanks for sharing Nikolas ;-)
-BV52
Greygal
Sun, 05/06/2018 - 15:14
Permalink
Using Moodle 3.4, unable to override/change CSS
Apologies in advance for being long-winded, but figured better to not forget anything!
So I went to https://github.com/h5p/h5pmods-moodle-plugin and download the zip file, I installed it using the plugin system.
Then I opened ../moodle/theme/h5pmod/config.php
I changed $THEME->parents = array('bootstrapbase'); to say $THEME->parents = array('boost'); I made no other changes.
Then I went to ../moodle/theme/h5pmod/style and opened the file named custom.css
I think I made the change I needed to, in that using Google Chrome, best I can figure, the changes I needed to make was to comment out border-radius and border in h5p-dq-element.h5p-draggable.
For testing purposes, I also made all text bright red and bold to make sure this custom.css file was being loaded.
In Moodle's theme selecter, I selected H5Pmod theme. I cleared the theme caches, but I there appears to be no changes made to the H5P css at all.
I also attempted to just change the css by adding my changes to the boost theme settings, but alas, that did not work, either.
As an FYI, I have an issue with the drag-and-drop feature. When creating image drag-and-drops, if the image files are not all exactly the same size, they get resized in highly undesirable ways. I have not been able to figure out how to stop the drag-and-drop from resizing completely, but through highly convulated changes to my image sizes, drop zone sizes, and changing border styles, I have more or less figured out a work-around to this problem.
However, I can't seem to make changes to the H5P css!
Any help would be greatly appreciated! Thank you!
thomasmars
Wed, 05/16/2018 - 11:17
Permalink
Hi, thanks for being detailed
Hi, thanks for being detailed about your process.
Now when you change the theme's parent, you also has to declare it as a dependency for the theme (ref: Moodle's creating a theme guide). This means adding a dependency to "theme_boost" in your version.php file.
Additionally if you look at the "Moodle" section in this guide you can see that the "custom.css" stylesheet is only applied if the "H5P.InteractiveVideo" library is used in the H5P. This is not the case for "Drag and Drop", so you can remove the if-clause if you want the styles to always be applied.
Finally I can't see any elements that would match the "h5p-dq-element.h5p-draggable" selector. You could probably use just ".h5p-draggable" as your selector and you would be fine.
For your second issue. Drag-and-drop image for the background will resize to fit within the available space that the drag-and-drop task is given. You can restrict the width of the container containing drag-and-drop to control this. Images for dropzones and draggables will resize to fit the space that you've given the respective dropzones and draggables.
Hope this helps, let us know how it goes.
Best regards, Thomas
look
Thu, 05/10/2018 - 02:17
Permalink
wordpress CSS override for iframe not working
trying the instructions above does not work.
add_action(
'h5p_alter_library_styles'
,
'h5pmods_alter_styles'
,
10
,
3
);
in functions.php has no effect. no error. no matter which link or even intential error.
all i'm trying is to twik the CSS of the inner iframe (.h5p-iframe)
it look like it is never called.
icc
Tue, 05/15/2018 - 15:11
Permalink
Try adding some debug code
Try adding some debug code after the add_action() to see that it's actually run, e.g.
If you do not see the "I am running" text it probably means that you've placed it in the wrong file or theme.
kmoret
Mon, 08/20/2018 - 15:40
Permalink
hvp_alter_styles for drag and drop question
Hello,
I am trying to customize the drag and drop questions. But i cant find the name of the libary.
Customization to the MultiChoice question works fine.
if ( isset($libraries['H5P.MultiChoice']) && $libraries['H5P.MultiChoice']['majorVersion'] == '1' || isset($libraries['H5P.h5p-drag-question']) && $libraries['H5P.h5p-drag-question']['majorVersion'] == '1' ){ $styles[] = (object) array(
'path' => $CFG->httpswwwroot . '/theme/adaptable/style/custom.css',
'version' => '?ver=0.0.1',
);
}
Thx!!!
otacke
Mon, 08/20/2018 - 15:54
Permalink
Hi kmoret!It's the so called
Hi kmoret!
It's the so called machineName you're looking for that you will find in the file library.json for each content type. For Drag and Drop it is "H5P.DragQuestion".
Cheers,
Oliver
hcallens
Fri, 08/24/2018 - 14:58
Permalink
Overriding css in WP works, but a strange link is added
I added the MYPLUGIN function to my theme's functions.php and uploaded a custom css file to /uploads/h5p. All works well except that before the h5p object (documentation tool in this case) a text line
http://my-domain.com/wp-content/themes/genesis
is added.
How can I get rid of this?
https://www.dropbox.com/s/9gwmri4y8g62fff/Schermafdruk%202018-08-24%2014...
https://www.dropbox.com/s/7e7sjxlw4nwcig9/Schermafdruk%202018-08-24%2014...
otacke
Mon, 08/27/2018 - 09:38
Permalink
Hi hcallens!Have you maybe
Hi hcallens!
Have you maybe left bloginfo('template_directory') in your code? It would do exactly that.
Cheers,
Oliver
hcallens
Mon, 08/27/2018 - 10:12
Permalink
Thanks a lot!
Indeed, removing the bloginfo part solved the problem. Thank you so much!
Pages