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
rahul331
Mon, 11/12/2018 - 13:42
Permalink
Hello Guys, I am not a core
Hello Guys,
I am not a core developer, but I would like to know how to customize h5p activities, I have read the documentation and have tired various way to reflect change on my css but it donsen't work on my totara or moodle.
Please anyone can guide me how to customized the css in h5p fpr moodle or totata.
in whcih file I have to add a code if I am using my moodle or totara theme
I am looking forward to hearing from you guys.
Regards
Rahul
BV52
Tue, 11/13/2018 - 03:23
Permalink
Hi Rahul,I think it's best to
Hi Rahul,
I think it's best to elaborate exactly what you are trying to achieve and also the code that you wrote and how you implemented it. If you have errors in the browser console this would make it easier for the community members to provide a solution.
-BV52
rahul331
Tue, 11/13/2018 - 10:24
Permalink
H5P css customization in moodle
Hi BV52,
Thank you so much fot your reply.I am trying to regelct changes on my local machine what I am doing is writing this code in my main config.php file
function hvp_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
if ($embedType === 'editor') {
$styles[] = (object) array(
'path' => $CFG->wwwroot . 'http://localhost/theme/basis/style/totara.css',
'version' => '?ver=1.10',
);
}
}
and copy this code in my totara.css which is basis theme custom css file
/* 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;
and my h5p version is 1.10
defined('MOODLE_INTERNAL') || die();
$plugin->version = 2018082200;
$plugin->requires = 2013051403;
$plugin->cron = 0;
$plugin->component = 'mod_hvp';
$plugin->maturity = MATURITY_STABLE;
$plugin->release = '1.10';
I dont know where I am making a mistake and nothing is reflectig on my chart , please can you help.I am looking forward to hearing from you
Regards
Kumar
BV52
Wed, 11/14/2018 - 02:03
Permalink
Hi Kumar,Thank you for the
Hi Kumar,
Thank you for the information. I must admit I do not have exprience with Totara but we have community members who I'm sure has implemented something similar. Their tips and inputs would be much appreciated.
-BV52
rahul331
Wed, 11/14/2018 - 08:46
Permalink
h5p css
Hi BV52,
Thanks for your reply mate, so now I should wait to hear from them.
Regards
Rahul
phippsju
Wed, 11/14/2018 - 22:22
Permalink
Custom CSS for Brightspace?
Do you have any instructions for creating custom CSS within Brightspace? Thanks in advance.
icc
Thu, 11/15/2018 - 09:38
Permalink
Hi, are you using H5P.com?
Hi, are you using H5P.com?
phippsju
Thu, 11/15/2018 - 13:49
Permalink
I can't say for sure
I am not the system administrator for our Brightspace installation, I am a test user currently and we are evaluating this plugin. I am creating and adding H5P media directly within Brightspace using the "add stuff" button within the Brightspace editor. When I look at the HTML source after adding media, the only thing that has been added is an iFrame that contains the H5P media.
I intend to speak with someone who is working with the installation and configuration, but I would need to know what I'm asking for. I can't find any documentation on this site that speaks directly to CSS editing within Brightspace.
Content creators in my environment do not have access to server-side scripting. That said, I don't see anything above that speaks to Brightspace configuration specifically, so, if I were to speak to someone who maintains this, I don't have any documentation to refer to with respect to this configuration request.
icc
Thu, 11/15/2018 - 14:15
Permalink
There is a feature for this
There is a feature for this but due to security and other concerns, only the admin get to customize the CSS. Also, the admin must request to have this feature enabled.
There is a guide available with more specific information: Info about CSS overrides
phippsju
Thu, 11/15/2018 - 15:42
Permalink
We're intending to start a
We're intending to start a dialogue with the admin, and ideally what we would like to request is for them to configure a specific directory and filename within each course that can be customized by those working on courses.
Assuming this can be done, the next question I have is whether your team has compiled a list of style names that CSS overrides can be applied to? I am assuming that each element has a unique name, (e.g., .h5p-content-paragraph, etc.), and while your documentation explains that styling is best done from within the editor itself, it would create a faster workflow to have a base stylesheet to work from that is organized in such a way that editable styles are commented and sorted by type (e.g., multi-select, single-select, etc.). Do you have any resources of this type available?
icc
Wed, 11/21/2018 - 10:49
Permalink
That is a good place to start
That is a good place to start.
Currently, there is only one global CSS override, but having different ones for different directories sounds like a really neat idea.
We are working on creating a good template for customizing the CSS but there is no ETA for this just yet.
Be sure to convey your wishes and needs to the admin.
phippsju
Wed, 11/21/2018 - 15:12
Permalink
A template for customizing
A template for customizing CSS would be an excellent addition! I have learned that this is not something we can do otherwise, so, if there is a way you can build this into the toolset, that would not only make H5P more versitile, but it also sounds like it would be more stable in terms of working with any updates that you make to the tool that impact the CSS. Thanks
LauDai
Tue, 03/12/2019 - 12:15
Permalink
Hi,I am trying to adapt the
Hi,
I am trying to adapt the size of image and interactive video (that is 100% wide) to our moodle 3.5 fordson theme. I have understood there is not a simple way to do that, and I need to modify the Moodle theme.
The document is not very clear on what to do, and I have tried different things that either crash the theme or do nothing...I am not able to get any modification of css.
This is what I did :
- Add the file theme/fordson/classes/output/mod_hvp_renderer.php with :
<?phpnamespace theme_fordson\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/fordson/hvp/custom.css', 'version' => '?ver=0.0.1', );
}
}
- add a folder "hvp" under /theme/fordson where I plan to put css file.
- add /theme/fordson/custom.css file with:
.h5p-iframe .h5p-content {font-size: 16px;
line-height: 1.5em;
width: 50%;
height: auto;
}
.h5p-column-content.h5p-image > img {
width: auto !important;
height: auto !important;
max-width: 50% !important;
}
It seams there is no effect. Any idea ?
icc
Wed, 04/24/2019 - 16:00
Permalink
Hi,Please check your
Hi,
Please check your inspector/network tab to see if the file is loading. Use Ctrl+Shift+J to open in Chrome.
Irith Herman
Thu, 04/04/2019 - 09:47
Permalink
Css file is not working anymore
I've been using h5pmods for about two years and everything worked well.
In the last month there was an update of the h5p and everything went wrong .
my site is RTL and now all the H5P items are LTR.
The css file is does not override
claueiko
Fri, 04/05/2019 - 16:08
Permalink
Changing the style/font/colors
Hi all,
I am not a developer and we are using h5p with Wordpress. I tried everything here and also hired a developer to help, with no success. We need to change the font and size of fields, colors, customize it.
If you know a plugin or a developer to help me do that (paid obviously), let me know.
Zamsite
Wed, 05/08/2019 - 09:50
Permalink
Customizing Modules on Wordpress
GM H5P
I am trying to add custom CSS to change the background color for the Flashcards module and am using the GeneratePress theme.
There is a section to add the custom CSS in the theme, but the changes are not being reflected. I am guessing because the handler has not been added:
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);
My question is that in which file on the WP install do I add the above code? And what parameters do I need to change on the code for the mods to work?
Thaqnks
Mattsmash
Wed, 05/15/2019 - 17:21
Permalink
Hi,I'm very new to this, so
Hi,
I'm very new to this, so please have patience.
I want to change the colour of some bars in a questionaire on my wordpress site. It was suggested I use H5P to do such a task but I can't for the life of me work out how. I'm sure it's a very easy tweak, but could anyone help explain to me how to do it?
I've included some screenshots to help explain what I mean.
https://cl.ly/7e418e62b78b - This one shows the code
https://ibb.co/RP1ShwV - As you all know, changing the colour in the inspect option doesn't save it.
https://ibb.co/26NPyJK - these are the current colours
https://ibb.co/LS22zJ2 - I'd like them to be these colours!
Any and all help is appreciated. Please remember I am new to this but I will do my best to keep up and learn.
Thanks in advance,
Matt
BV52
Thu, 05/16/2019 - 08:57
Permalink
Hi Matt,Please check my
Hi Matt,
Please check my answer here.
-BV52
JackAwardLS
Mon, 06/17/2019 - 13:05
Permalink
Clarification needed
Would someone be able to clarify where I place the PHP code within Moodle?
jmalteschuldt
Tue, 09/17/2019 - 07:50
Permalink
CSS Overrides
Okay.
Firstly: I just now a bit basic html, do I need to know CSS, or are there some ready made "code sheets" I could embed?
And where in the H5P code do I embed my CSS override?
Do I realy need either wordpress, dupal or moddle to do this?
Kind regards and sorry for the stupid questions.
Malte
jmalteschuldt
Mon, 10/28/2019 - 21:42
Permalink
weebly?
Would that work on weebly aswell?
glisapn
Tue, 11/26/2019 - 02:05
Permalink
Failed to load data.
When I installed the plugin H5P Mods , I got a message when I got into H5P content in wp dushboard : Failed to load data.
BV52
Tue, 11/26/2019 - 18:47
Permalink
Hi glisapn,Please check your
Hi glisapn,
Please check your browser console for any errors. This should give you a clue to what could be causing the issue.
-BV
glisapn
Tue, 11/26/2019 - 18:49
Permalink
When I installed H5P Mods
When I installed H5P Mods plugin for my custom css, H5P plugin it will not work, ie it throws out a message "Failed to load data." (in All H5P Content), and "Error, unable to load libraries." in Add New. In Inspect I dont have any error.
WordPres 5.3
H5P plugin 1.15.0
EA Draffan
Fri, 02/21/2020 - 10:58
Permalink
Font changes to match Moodle theme for non-coding authors!
I wonder if there if we can add a snippet of code to change the font style and size to the H5P activity In Moodle to match the text within the learning module, rather than having to make a CSS file etc which is not within my skill set at the moment?
BV52
Fri, 02/21/2020 - 17:30
Permalink
Hi EA Draffan,I'm afraid this
Hi EA Draffan,
I'm afraid this is not possible.
-BV
info@webdesignd...
Thu, 03/19/2020 - 23:56
Permalink
Memory Game Cards Responsive on all devices
Hi,
I am needing some help to make my memory games responsive on all devices so that all the cards are displayed on the screen when playing.
https://prnt.sc/rioe85 (desktop view is ok)
https://prnt.sc/rioegs (mobile view, no good)
As you can see on the 2 images the desktop view is ok but the mobile view you only see 6-8 cards out of the total 20...
I am using WordPress and the domain name is http://www.sightwords.com.au if you want to take a look!
I am really hoping someone can help me and give me detailed instructions on how to fix this issue.
Thank in advance :)
Eddify
Fri, 02/05/2021 - 21:31
Permalink
Followed the steps outlined above but didn't work
I'm using cPanel to create new files and folder and put them into the /wp-content/plugins/ h5pmods/phpmods.php folder as follows:
<pre class="brush: lang">'path'
=> plugin_dir_url( __FILE__ ).
'/custom-h5p.css'
,
</pre>I found that it did not work. Would you please tell me what I'm doing wrong?
ms930
Tue, 02/09/2021 - 12:49
Permalink
Change H5p content fonts
I'm trying to use css overrides to change fonts in the interactive video content in moodle. Using https://github.com/h5p/h5pmods-moodle-plugin I can change all fonts except the fonts in the H5P iframe. Here is how I define fontface in 'theme/h5pmod/style/custom.css'
@font-face {
font-family: 'Shabnam';
src: url([[font:theme|Shabnam.eot]]);
src: url([[font:theme|Shabnam.eot]]) format('embedded-opentype'),
url([[font:theme|Shabnam.woff]]) format('woff'),
url([[font:theme|Shabnam.woff2]]) format('woff2'),
url([[font:theme|Shabnam.ttf]]) format('truetype'),
url([[font:theme|Shabnam.svg]]) format('svg');
font-weight: normal;
font-style: normal;
}
I've put the fonts in 'theme/h5pmod/fonts/'
It works fine when I want to change any fonts outside h5p iframe. But for example
.h5p-interactive-video .h5p-splash-wrapper .h5p-splash .h5p-splash-title {
font-family: Shabnam !important;
}
shows up in the styles when I inspect the element in the iframe, but the font is not loaded.
BTW, I cleared cache
Kevin Winter
Wed, 02/24/2021 - 12:25
Permalink
Hide or Restrict the Navigation slider in Presentations
Hi
I was directed to this page. I'm hoping to send our developers this link as it's been suggested that by changing the CSS we can hide the slider bar on course presentations. Is there a page that lists the componant so I can point them to which tags we need modifiying?
Is it the following? #wp-h5p-xapi-spinner
Thanks
steve-o
Wed, 05/26/2021 - 09:44
Permalink
Moodle 3.9+ renderer example
Since noone explained how to override the official moodle h5p activity css/js here is an example, please update your documentation on this page
1. Create a file in your theme folder styles/h5p.css
2. Create a renderer.php in your theme folder and add this code:
/**
* Class theme_YOURTHEMENAME_core_h5p_renderer
*
* Extends the H5P renderer so that we are able to override the relevant
* functions declared there
*/
class theme_YOURTHEMENAME_core_h5p_renderer extends \core_h5p\output\renderer {
/**
* Add styles when an H5P is displayed.
*
* @param array $styles Styles that will be applied.
* @param array $libraries Libraries that will be shown.
* @param string $embedType How the H5P is displayed.
*/
public function h5p_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
$styles[] = (object) array(
'path' => $CFG->httpswwwroot . '/theme/YOURTHEMENAME/style/h5p.css',
'version' => '?ver=0.0.1',
);
}
}
atriaforever
Tue, 09/21/2021 - 12:35
Permalink
how to use inline style
I have followed the tutorial and it works, but I use the Divi Theme with WordPress, and it provides a convenient way to define custom CSS, right within the WordPress admin.
This custom CSS is generated in each page as inline CSS such as :
<style id="et-divi-customizer-global-cached-inline-styles">... your custom CSS here
How to inject this inline custom CSS so it is used by H5P?
guorkhan
Thu, 02/10/2022 - 19:57
Permalink
Display in browser options
Hi! I'm an English Teacher working in a primary school and I really appreciate you for your efforts. What annoys my pupils about this game is the Size of the Game on the browser. In this game there are 2 options about the size; Positioning the Cards in a Square or Putting them Side by Side. When applying the first option, it is not possible to see the whole card set. You have to scroll down the page to see the rest of the boxes. This takes the wind out of my pupils' sails. The second option, putting all the boxes from left to right on a long line, feels better but still not satisfying. Is there a way to display all the boxes in a square or a rectangle without scrolling down the page and also not putting them side by side on a long line? Fitting the game to browser window would make the game experience perfect. Also this option (fitting the game to browser) would be better for other games as well.
Best regards.
haltonbc
Thu, 02/17/2022 - 09:57
Permalink
Styles for individual content
Hello - I've managed to set up the wordpress plugin and am using a separate stylesheet to apply css. However is there a way to apply different styles to individual H5P content. For example: style buttons on branching scenario 1 as pink but style buttons on content branching scenario 2 as blue. At the moment all I am doing is styling all the branching scenarios.
Any help gratefully recieved!
arcadefire
Mon, 05/09/2022 - 22:03
Permalink
Have you found a way to apply
Have you found a way to apply different styles to individual H5P content? I would be very interested in that too!
arcadefire
Mon, 05/09/2022 - 22:07
Permalink
Have you found a way to apply
Have you found a way to apply different styles to individual H5P content in Wordpress?
mikha
Mon, 03/28/2022 - 05:15
Permalink
installing in moodle
i was try to use it in my moodle site. but nothing changes.
the step i use :
1. clone the h5pMods
2. upload it on my server ( moodle theme )
3. change the theme in moodle ( theme selector)
but nothing happen in my site. am i skip the steps ?
i want to hiding the playback rate on H5P video interactive using css. but it was 1 week and i have nothing to done :(
a.mcdonald@4men...
Mon, 04/11/2022 - 13:54
Permalink
I want to be able to use css
I want to be able to use css overrides from within the Javascript of a H5P content type
Is there a way to call the API hooks from Javascript, rather than having to rely on a specific CMS?
Kuriko
Tue, 09/20/2022 - 06:18
Permalink
I have followed these
I have followed these instructions above and managed to get it working for the H5P.Essay library. Thanks!
However, I want to apply CSS overrides for more than just one library. I tried the code below and it is not working, so I'm not sure how to apply the custom code to multiple libraries, for example, the Essay and the Course Presentation libraries as in my code below?
By the way, I just guessed the library name for the Course Presentation activity. I saw Otacke's comment above stating that all the library names ('machineNames') are listed in library.json, but I can't seem to find a libary.json file in mod/hvp in Moodle. Could anyone please point me in the right direction?
musabtahir
Tue, 10/04/2022 - 13:59
Permalink
iframe background color
i want to change iframe background color of drag and drop game but icant do it.
I tried everythin.Please help me as i am extremely frustrated and ran out of options
jasimp
Mon, 11/07/2022 - 08:16
Permalink
How to implement this in Moodle
Hi
Can any one help me to implment this in moodle with out creating additoinal theme.
I am using moov theme.
A step by step instruction is highly appreciated
Thanks
Pages