Custom CSS for H5P in Moodle

Submitted by Sumya on Tue, 07/31/2018 - 02:44

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:

error500.PNG

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

Attachments:

1.PNG

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?