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
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
[email protected]
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
Pages