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