Custom CSS in Totara

Hi,

i really like H5P and i would to change the css for our own style. We are using Totara and i tried to follow this guide: https://h5p.org/documentation/for-developers/visual-changes
The thing is i dont see any changes in Style.

In our theme i use the following renderers.php:

<?php

require_once($CFG->dirroot . '/mod/hvp/renderer.php');


class theme_ventura_mod_hvp_renderer extends mod_hvp_renderer {

// H5P Custom CSS	
	    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/ventura/style/custom.css',
                'version' => '?ver=0.0.1',
            );
        }
    }
	
}

 

And i want to change the button style:

.h5p-joubelui-button {
	background: black;
}

 

Can someone help me with that? What am i doing wrong?

Best regards
Manuel

I wish I could help. I have the same issue. 

otacke's picture

Hi!

I am not sure whether Totara handles things differently than moodle, and I have nothing at hand to poke around, so I can only help with a couple of questions:

  1. Is the custom.css file being loaded? You should be able to check that in your browser's development tools in the network tab. I doubt that it is being loaded, because the CSS looks fine and should be used.
  2. Is the path that is constructed correct for the file?
  3. Your PHP code is limiting the override to Interactive Videos. So are you trying out the change with some Interactive Video content?
  4. Is the `hvp_alter_styles` function called at all? I don't know how these renderers are handled in moodle/totara - I believe themes can use different mechanisms and might not trigger the override, so the issue might be here.

Cheers,
Oliver