Customize H5P activity plugin css

Customize H5P activity plugin css

by Zabelle Motte -
Number of replies: 58
Picture of Particularly helpful Moodlers

Hello,

I have been trying to curtomize H5P activity plugin css and I while reading the H5P documentation I learned they suggested to make it through a specific theme.

That seems to me a bit complicated (see this Moodle discussion that raises the same question and where people find it not simple) and I found how to apply css to the H5P iframe through a custom javascript. Go through the Site administration > Appearance > Additionnal HTML.
Here is for example the script to paste in the HEAD field to hide the upload video H5P button :

<script type="text/javascript">
window.onload = function() {
iframes = document.getElementsByClassName("h5p-editor-iframe");
if (iframes.length>0) 
{
h5piframe = iframes[0].contentWindow.document;
var style = document.createElement('style');
style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'Suggested service';} ";
h5piframe.head.appendChild(style);
}
}
</script>

The H5P reviewers told  me it was not a good way to do that but I do not understand why.
Here is the discussion on that question on the H5P forum.
What do you think about this approach ?

Note that the easiest way to add curstom css to H5P contents could be to have an open field to add a list of custom css in the H5P plugin configuration ...

Thanks in advance for answer.

Kisses

Zabelle

Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
You need to read and implement https://h5p.org/moodle-customization - this is not trivial!
Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

P.S. Ok, interesting what you have done, but not as flexible as implementing the API provided and then having the attached in a theme:

Attachment Screenshot 2021-03-03 162213.png
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Oliver Tacke -
Hi all!

I am the one who answered Zabelle. Just to be clear: I am not an "H5P reviewer". I am not a member of the H5P core team and not affiliated with them. I am a regular H5P community member with some coding experience who likes to help out from time to time.

As you will notice in the post (if you're curious), I tried to explain why the approach suggested by the H5P core team deviates from "the moodle way". I also mentioned: 'You're way is not necessarily "bad", but it feels overly complicated to me to write the CSS "by hand".' I did not say it was the wrong way, but that to me it feels more complicated.

Just wanted to get that weight off my chest.

Best,
Oliver

Average of ratings: -
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers

No problem Oliver,

I like very much code challenges and succeeding to apply a custon css to H5P Moodle activity was one such challenge.
The question I raise myself now is the following : is this approach as much or less optimal form the technical point of view ?
I do not want other users to apply such script if this may cause technical problems.
But as far as I know, javascripts are stored in Moodle cache as well as Moodle Themes, so, I don not see why it would be less optimal ...

Kisses

Zabelle


Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Oliver Tacke -
Hi Zabelle!

There are a couple of things to keep in mind at least.

You are using the onload handler of the window reference directly. That's probably fine in your case, but it will conflict with other scripts using that handler that others may use. It's a better practice to use addEventListener in order to listen to the load event.

While you are waiting for the main page to be loaded (including resources such as stylesheets and images) before trying to access the iframe, I am not 100 % sure that the iframe content will also always be available for you to access. It might depend on the client's connection and your server's capacity.

Just a note (not relevant since you're only targeting content stemming from the same site): accessing the iframe contents that way is not possible across origins.

And one thing, but that's a matter of taste: I prefer querySelectors over getElement calls, here document.querySelector('iframe.h5p-editor-iframe') that would give me the first find directly (or null).

Cheers,
Oliver

p. s.: Beyond that, I still think it's more convenient to write pure CSS using the recommended approach than creating it programmatically.
Average of ratings: Useful (1)
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Thanks Oliver,

So, here is my script rewritting, while taking your comments into account :

window.addEventListener('load', (event) =>{
iframes = document.getElementsByClassName("h5p-editor-iframe");
if (iframes.length>0) {
    h5piframe = document.querySelector('iframe.h5p-editor-iframe');
    var style = document.createElement('style');
    style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
    style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:'Suggested service';} ";
    h5piframe.head.appendChild(style);}
}
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Oliver Tacke -

Just some observations smile

  • You are using an arrow function. If you want to uphold IE11 compatibility (at least the H5P core team still tries to), you'd not use arrow functions or make sure your code is transpiled.
  • You are using the "var" keyword for variable declaration. In this case, nowadays you would rather use "const" unless you need hoisting or have some other reason to use "var".
  • You're mixing the use of "getElement" methods and querySelector. Matter of taste, but I'd stick with one.
  • You're sometimes using single quotes for strings, sometimes double quotes. It's good practice to decide for one.
  • You are "omitting" some white spaces. There are no rules ,but most coding standards that I come across prefer to e.g. have white spaces around operators like ">", white spaces around the arrow of arrow functions, etc.
  • You are not using the "event" argument in your function, so you could omit it.
  • You are not indenting the contents of the event handler function.
  • The curly bracket after you append the DOM element probably was supposed to go on a new line.
Average of ratings: Useful (1)
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Here is a new version of the working script with careful review of all Oliver remarks :

window.addEventListener("load", applyH5pCustomCss);
function applyH5pCustomCss() {
     h5pselector = document.querySelector(".h5p-editor-iframe");
     if (h5pselector) {
         h5piframe = h5pselector.contentWindow.document;
         const style = document.createElement("style");
         style.textContent =" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5peditor-field-description {display:none;}  ";
         style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box:first-child  {display:none;} ";
         style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-or-vertical {display:none;} ";  
         style.textContent +=" .h5peditor .h5p-add-dialog .h5p-add-dialog-table .h5p-dialog-box h3::after {content:' Suggested service';} ";
         h5piframe.head.appendChild(style); 
     }
}

wink

Zabelle
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Oliver Tacke -
One more thing ... wink Hint: variable declaration/variable scope
Average of ratings: -
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Oliver, I don't think there is a variable scope problem here.
This problem raises when using a variable defined inside a block outside this block.
This does not arise here.
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Oliver Tacke -
Hi Zabelle!

It's the other way around. You're unnecessarily polluting the global variable space with h5pselector.

Cheers,
Oliver
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Alexander Touloumtzidis -

Hi Zabelle,

many thanks for your Workaround!! 🤩 I was searching for this for days!!

I dont have access Moodle Files on the Server and we dont get an upgrade to Moodle 3.10. So thanks a lot!!!!!!

But i did change the code a littel bit. I wanted to change the style of H5Pcontent not the editor. I just changed :

h5pselector = document.querySelector(".h5p-editor-iframe");

to

h5pselector = document.querySelector(".h5p-iframe");
and it worked for me!

Alex
Average of ratings: -
In reply to Alexander Touloumtzidis

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
All this discussion shows that it would be great to have an easier way to customize H5P css.
Installing a thema and customizing a style file is not within the grasp of an Moodle administrator.
Hoping this will arise this the H5P Moodle integration ...

Kisses

Zabelle
Average of ratings: Useful (1)
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
But.... 'Site administration > Appearance > Additional HTML.' won't be stored in the Moodle cache as its a script that will be added and not minified to the output of each and every page. To optimise it, you'd have to add it to the theme as a file at least.... Then there could be other optimisations like only requiring it on pages that have H5P content.
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
You are right Gareth, I had a look at source code, I applied the changes Oliver suggested, and they were applied without having to empty Moodle cache.
So this possibility to add additionnal HTML should be used for small script or css modifications, because it can impact the site performances.
Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
The main idea to remember of this discussion is that applying custom H5P css through additonnal javascript is less optimal than using the custom theme approach because the script is called on all pages and it is not cached and minified.
This should not be used for important css modifications nor on platforms where hign level of perfomance is needed.

Kisses to all for help in this discussion :-*

Zabelle


Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
It would be excellent if one of the H5P developers made a comprehensive video on how to implement what needs to be done to be able to modify the CSS for H5P in Moodle....just saying...
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
RE: It would be excellent if one of the H5P developers made a comprehensive video on how to implement what needs to be done to be able to modify the CSS for H5P in Moodle....just saying...

I think they've done a great job already in providing an API in the first place. All you need is some OO PHP skills and an understanding of how themes in Moodle work.
Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
I think all our problems will soon be solved as far as I read that H5P css customization is a new feature of Moodle 3.10 !
This will probably not concern the H5P activity additionnal plugin but only the native H5P to Moodle integration.
But that's a good news !

Kisses

Zabelle
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Zabelle!
The new integration is only for the theme colours and such to be added to the styling of the H5P modules based on the theme. I'm using 3.10 as we speak and no cigar sad
Average of ratings: Useful (1)
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear MarkAnthony,

RE: The new integration is only for the theme colours and such to be added to the styling of the H5P modules based on the theme. I'm using 3.10 as we speak and no cigar.

You're incorrect, if you look at the code commit that added in the functionality into core (https://github.com/moodle/moodle/commit/d23f05828f59ddd4f5b8d74f36ce1f673f226f30) then there is code for altering the styles too etc.

G
Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Dear Gareth,

Thank you! I stand corrected smile

Sooo, with my limited programming knowledge, I understand that I need to create an h5p_alter_styles.css document and place my new css there. In which directory should I put is? In the Classes folder?

Thank you!!!

MAC
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Gareth and all!

I have successfully installed the H5PMod theme and yes, I can alter states while in this theme. It is based on Boost, but I am using Moove, which is also based on Boost. Is there any way to base the H5PMod on my Moove theme? I tried renaming the fields in the config and other files in the mod theme, but it broke the theme...as you might expect. I shouldn't have thought it would be so easy...any suggestions on how I could integrate the H5PMod with my Moove theme???

Thank you all!!!
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Zabelle,

RE: I think all our problems will soon be solved as far as I read that H5P css customization is a new feature of Moodle 3.10 ! This will probably not concern the H5P activity additionnal plugin but only the native H5P to Moodle integration.

This being 'Personalise your H5P content with your own themes and branding by adding your styles and Javascript code to customise the appearance of slider bars, headings or buttons.' relates to 'MDL-69087' which I raised and was implemented by Sara in core for Moodle 3.10 and is the same mechanism as the mod_hvp one already mentioned.

G
Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Gareth,

I've installed the h5pmod theme from sara's github as instructed in MDL-69087. I found the instructions crystal clear.

It all works fine on my localhost moodle 3.10.2 installation. The only thing I'm missing is (lots of) more examples of altering the semantics. Currently the only example given is removing the Media field from the MCQ semantics. Of course this will depend on users' needs, and it might not be used much, but still... If I can find examples myself I will contribute, of course. Maybe here: https://docs.moodle.org/dev/H5P_styles

Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hi Joseph,

Ah, I've not used the alter semantics functionality in the API! So don't have an example.

Gareth
Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Hello guys !

I finally find time to read all your suggestions and I tested the h5pmod theme from sara's github as instructed in MDL-69087.

Like you all said, it is very easy to install and I succeeded to apply my custom ccs while altering the styles.css file of this theme.
I could also use a custom.css file while using the h5p_alter_styles function, I know this will work.
I also tested it worked fine for the Fordson theme while adding "h5pmod" as parent theme in config.php file of this theme.

This is an easy an optimal approach to add custom css to H5P contents !

Great thanks for your help ! 💪

Kisses to all ! 😘
Hoping to see you soon at a Moodle meeting to offer you a beer (special dedication to Joseph) !🍻

Zabelle
Average of ratings: Useful (1)
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by Radek Fujak -

Hello,

is it possible to change the font globally in H5P by overwriting the CSS file (I don't know which file)? 

Without having to proceed in this way.

Thank you

Average of ratings: -
In reply to Gareth J Barnard

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Thanks Gareth for this screen capture.
It is effectively an easy way to have custom css once you succeeded to apply a custom theme.
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Zabelle!
I have been trying to figure out a way to do this as cloning and making themes is beyond me...could you describe the process in adapting this to other H5P modules? I can you the Inspect in Google, but I am not a programmer so I would just be copying and pasting...
Your help would be ever so welcome!!!!
Thank you in advance!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Hello MarkAnthony,

You effectively have to use a tool to inspect the code to find which css to modify but these tool enables you to preview small css changes directly on the page.
You can have tries on an existing page while adding a color:red; style on a text for example to see what happens.
Once you found the html or class element to modify, you have to refer to it correctly in you css call, because elements are nested.
For example, h1 {color:red;} will put all level 1 titles in red while  .breadcrumb h1{color:red;} will only make red level 1 titles in block with class breadcrumb.

Style elements may be tagged with classes, like <a class="menu"> in html and refered to .menu in css.
Ids may also be used, often for block structure of the page, it work pretty the same as classes but the html becomes <div id="maincontent"> and css to refer to is #maincontent.

You can find al lot of online courses to learn css, like for example the openclassroom free course here :
https://openclassrooms.com/en/courses/5265446-build-your-first-web-pages-with-html-and-css

And once you master css, you can learn javascript to be able to modify html elements on different events ...

Kisses

Zabelle
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Thank you Zabelle!

I have a layman's understanding of CSS, but the nesting is a bit beyond me...I have attached a screenshot of the F12 with the specific element I am trying to target...if you could maybe show me how to write that line of code, and how it would fit into your solution, I would be able to reproduce this for other application...please...

It's the word bank in a "Find the Word" puzzle.

Thank you in advance!!!

Kisses smile

MarkAnthony
Attachment HELP.png
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
MarkAnthony, you first of all have to try to modify the css properties on the left part of the screen, adding for example a line with "color:red;" to test if you find the right element.
In the case you present, I would begin to tru to apply the css modification on the following element that is the first cited on the left part :
.h5p-find-the-words .vocabulary-container ul { ... }
and it is perhaps the li element that should be styled
.h5p-find-the-words .vocabulary-container ul li { ... }

Zabelle
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Thank you Zabelle!!!

I can make all changes in the Inspector, but when I try in the theme CSS it doesn't have any effect. That is why your JavaScript solution is interesting. If you could just show me how to implement some change based on the screenshot, I am sure I could back engineer the code for my needs...care to lend a hand? Actually, I would like to add some internal margins or padding to the word block in the find the words activity as the output is not very accurate. And also to be able to change the font styles in dialog cards activity...

It has been such a struggle...

Thank you again!!!
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Zabelle and All!

So, at 4.35 am this morning I was finally able to install and clone the H5PMods to my Moove Theme, yeah!

And as I was able to apply CSS to my Find the Words Puzzles:

public function h5p_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
if (
isset($libraries['H5P.FindTheWords']) &&
$libraries['H5P.FindTheWords']['majorVersion'] == '1'
) {
$styles[] = (object) array(
'path' => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
'version' => '?ver=0.0.1',
);
}
}

I tried to do the same to my Dialog Cards and it broke my site....

public function h5p_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
if (
isset($libraries['H5P.DialogCards']) &&
$libraries['H5P.DialogCards']['majorVersion'] == '1'
) {
$styles[] = (object) array(
'path' => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
'version' => '?ver=0.0.1',
);
}
}

Could you please let me know what I'm doing wrong?

Thank you!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
@MarkAnthony,
If you don't post here the contents of your custom.css we can't replicate your problem to try to help you.wink
 
EDIT.- Just tried to alter CSS for Dialog Cards, using your script. It does not crash my site but it has no effect, i.e. none of the custom Dialog Cards I try to enter is effective. I'll continue my tests...
Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Thanks Joseph,

The thing is that when both the functions are in the renderer, it crashes. I know it is because I'm calling the same function twice. I need a way to combine all of the libraries in one function.

The inspector doesn't show the css loading either...

Any ideas?

Thanks again!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Oliver Tacke -
@MarkAnthony
Are you declaring the h5p_alter_styles function twice?
Average of ratings: Useful (1)
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Oliver,

Well, that's what I tried before I figured out that you can't do that. Actually, I know that but was half zombified at that moment. Shouldn't have mentioned it as it is quite foolish. This leads me to ask how I can reference several H5P activity types inside of the same one function?

Thanks!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Oliver Tacke -
@MarkAnthony
You'd simply put multiple if-clauses into the function one after the other and if you want to have separate stylesheet files for different content types.
Average of ratings: -
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Thank you Oliver!

I've tried that and it didn't break the theme. It seems ok, but I have yet to be able to make any changes, whatsoever, to the dialog cards activity....any ideas???

Thank you again!!!

Quoting:

In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Joseph Rézeau -Saturday, 13 March 2021, 6:05 PM

@MarkAnthony,
If you don't post here the contents of your custom.css we can't replicate your problem to try to help you.wink
 
EDIT.- Just tried to alter CSS for Dialog Cards, using your script. It does not crash my site but it has no effect, i.e. none of the custom Dialog Cards I try to enter is effective. I'll continue my tests...

Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators
@MarkAnthony,
See my answer below... There seems to be a bug with the Dialog Cards activity. Let's see what Oliver says.
Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by Oliver Tacke -
Hi all!

The machineName of Dialog Cards is H5P.Dialogcards, not H5P.DialogCards.

Best,
Oliver
Average of ratings: Useful (1)
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Of course, Oliver! My mistake, but for my defence, it seems to be the only H5P content not to use camelCase in its library name.wink

Maybe I need new glasses or new eyes or even a new head. blush

Now it's working as expected...

Thanks for your prompt reply.

Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Joseph,

Great news! I couldn't get it to work... could you share your code and implementation, please...

Thank you all!!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

@MarkAntony,

First of all I suppose you have carefully followed all the steps in Sara's report in the bug tracker at MDL-69087 especially point 4: Access to "Site administration / Appearance / Themes / Theme selector" and choose "H5PMod" as Default theme.

In YOURMOODLE\theme\h5pmod\renderers.php

public function h5p_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',
            );
        };        
        
        if (
            isset($libraries['H5P.Dialogcards']) &&
            $libraries['H5P.Dialogcards']['majorVersion'] == '1'
        ) {
            $styles[] = (object) array(
                'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
                'version' => '?ver=0.0.1',
            );
        };

...

}

In YOURMOODLE\theme\h5pmod/style/custom.css (for example)

.h5p-dialogcards .h5p-dialogcards-card-content {
    background-color: lightcyan;
}

Result:

 

Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Excellent!

Thank you all so very much!!!!!

All the best!!!!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hi MarkAnthony and all,

To help, I've just updated my Foundation theme (https://moodle.org/mod/forum/discuss.php?d=419677) and in the M3.10 version it now supports the core H5P as well as the contributed version with style theme settings - so you're welcome to look at it.

In essence, the override code for both is essentially the same, but I've done some clever plugin orientated things too. So there is no actual file, that's on storage, instead I get the CSS from the theme setting which is then served as a 'file' from the browsers point of view using the lib.php 'pluginfile' function over HTTP(S). So I override the H5P API to tell it to use a 'pluginfile' Moodle URL, that is then used to call the lib.php 'pluginfile' function which then gets the contents of the setting and then sends that as a reply to the response from the browser. All standard Moodle API and HTTP(S) client server stuff really.

G
Average of ratings: -
In reply to Oliver Tacke

Re: Customize H5P activity plugin css

by Joseph Rézeau -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi Oliver!

I think I've got the hang of this h5p_alter_styles function. And I got it to work for most of the H5P content types, except for DialogCards (and my own DialogCardspapiJo version, based on DC).

Strange finding, even when H5P.DialogCards library is present in the $libraries parameter, it is not acknowledged by isset($libraries['H5P.DialogCards']) as shown in this output:

public function h5p_alter_styles(&$styles, $libraries, $embedType) {
        global $CFG;       
        echo'<pre>';
        print_r($libraries);
        echo'</pre>';
        echo 'isset(Audio) = '. isset($libraries['H5P.Audio']) .'<br>';
        echo 'isset(DialogCards) = '. isset($libraries['H5P.DialogCards']) .'<br>';

Gives this output (I have cut out parts of the display)

I have even tried replacing the isset() PHP with array_key_exists(), but it still does not recognize the presence of H5P.DialogCards in the $libraries array. I get:

isset(Audio) = 1
array_key_exists(Audio) = 1
isset(DialogCards) =
array_key_exists(DialogCards) =

Any idea? I suspect a bug...

Average of ratings: -
In reply to Joseph Rézeau

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello Everyone!!!

Do you know if the H5PMod Theme has become obsolete? I'm having a version conflict when trying to update my Moodle plugins using the Moove Theme...
Has it been incorporated into Moodle?
Should I stop using the cloned H5PMod theme?

Thank you!!!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -

Here is the error page

Attachment H5PMod Error.jpg
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Zabelle Motte -
Picture of Particularly helpful Moodlers
Hello Mark Anthony,

The error message lets think the H5PMod theme needs the Moove theme to be installed.
It is strange but you should test if it works.
If you want to get helped for that question, you should give informations about your Moodle version and default theme.

Kisses,

Zabelle
Average of ratings: -
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hi Zabelle!

Thank you for your reply! I'm using the Moove Theme and I'm in Moodle 3.11.4. I based my H5PMod on the Moove which is dependent on Bootstrap. Moove is installed and when I try to reinstall it, it won't let me as it is already installed.

I'm including the H5PMod config.php and version.php just in case it is helpful.

Thank you again!!!!
Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by Christian Milani -
Hello Mark,
you need to add the minimum version of the moove in the version.php file.

From your screenshots i can see that you installed moove version: 2021052100

you need to change your version.php like this:
$plugin->dependencies = ['theme_moove' => 2021052100, 'theme_boost' => 2020060900];


christian
Average of ratings: Useful (1)
In reply to Zabelle Motte

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -

Hi Zabelle,

Please get back to me when you can... If you can help of course.

Or can you ask someone about this....

Thank you in advance!

Happy Spring!!!

Average of ratings: -
In reply to MarkAnthony Chesner

Re: Customize H5P activity plugin css

by MarkAnthony Chesner -
Hello again Zabella,

After the zombification had subsided, I did realize that you cannot call the same function twice in the same....duh! And I've been trying, to no avail, to try and combine the "if statement" with several h5p activity types into the same function. if / ifesle...

Could you maybe show me how to do this.......please.... :/

Thank you!!!
Average of ratings: -