Custom CSS for H5P in Moodle
Hi,
I need to chnage some basic styles like button color, text fonts etc. in H5P for Moodle. I want to use an existing theme to add custom H5P css. Could you please give me a step-by-step guide to do that?
I tried following your documentation here - https://h5p.org/documentation/for-developers/visual-changes but didn't get the expected result. Can you please provide more detailed instructions; for example - if I am using an exisiting theme, in which php file of my theme should I "add a handler for the h5p_alter_styles override function". I tried adding it in lib.php file but eneded up getting a server error (screenshot attached).
Thanks in advance! :)
- Sumya
thomasmars
Mon, 08/06/2018 - 14:00
Permalink
Hi,The Moodle customization
Hi,
The Moodle customization guide in combination with the visual changes guide gives a detailed example of how you can style your page by extending an already existing theme. Please see the H5PMods example theme, and try to get this working. If you're not able to get it working please let us know which steps you've taken and where you're getting an error or not getting any further. I also recommend looking at Moodle's themeing documentation, which will help you understand the code in the H5PMods example. Good luck!
Best regards, Thomas
rahul331
Wed, 11/14/2018 - 09:32
Permalink
H5P css
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
thomasmars
Wed, 11/14/2018 - 10:13
Permalink
You should never write any
You should never write any functions inside the config.php of your site. Please read the guides I linked to in my previous comment in detail.
Especially the part on how to write a new theme for Moodle: https://docs.moodle.org/dev/Creating_a_theme_based_on_boost and our example implementation for it: https://github.com/h5p/h5pmods-moodle-plugin. You have to write a new theme or extend your existing one, like the guides suggest.
rahul331
Tue, 11/20/2018 - 12:09
Permalink
Theme extend
Hi Thomas,
Thanks for your reply, but I am making changes in h5p css in totara and want to know that h5p also support customization on totara as well?
thomasmars
Wed, 11/21/2018 - 09:16
Permalink
Hi,I don't know if themeing
Hi,
I don't know if themeing is changed on Totara, but Totara is basically a fork of Moodle, so if they haven't changed something fundamental there should be no problem following the Moodle themeing guide, and make the same steps as you would there to create a new theme that inherits from the Totara default theme.
Kieran Briggs
Mon, 07/22/2019 - 16:09
Permalink
Problem with using CSS file on a Bootstrap theme
Hi,
I've followed your guide and installed the h5pmod theme to test and it works fine. I've then taken the alter styles function and class into my own theme, but I hit a brick wall then. I'm using Snap which is a theme built off bootstrap which dynamically creates a stylesheet at runtime so I can't link to it in the following section
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/mypd/style/custom.css',
'version' => '?ver=0.0.1',
);
}
}
Have you run into this issue yet and can you give me any pointers?
Thanks
Kieran
alanpt
Fri, 07/26/2019 - 00:12
Permalink
I am interested to know how I
I am interested to know how I can customise the H5P CSS to match Snap too. I notice that the Essential theme has a form in their settings to allow custom CSS for H5P. Could there be a similar form for the H5P plugin?
manfredsteger
Wed, 11/18/2020 - 06:37
Permalink
+1
Same problem here, would be great to have a "Custom CSS field in Snap Theme for H5P".
manfredsteger
Wed, 11/18/2020 - 07:13
Permalink
Same problem, any solution?
Hi, same problem with my snap theme (3.8) - do you have a solution for styling h5p content with snap theme so far?