Custom CSS for H5P in Moodle

Forums: 

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 

 

Attachments: 
thomasmars's picture

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's picture

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

Attachments: 
thomasmars's picture

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's picture

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's picture

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.

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

 

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's picture

Same problem here, would be great to have a "Custom CSS field in Snap Theme for H5P".

manfredsteger's picture

Hi, same problem with my snap theme (3.8) - do you have a solution for styling h5p content with snap theme so far?