Wie können wir helfen?

Übersicht
Aktualisiert1. August 2021

H5P Visuell anpassen (CCS)

H5P kann nicht wie andere optische Anpassung direkt in Moodle / Logineo LMS durch z.b. ein unformatiertes Textfeld oder zusätzliches CSS Code im Theme angepasst werden. Der Hintergrund dazu ist, dass der CSS Code von H5P extra geladen wird, damit der CSS Code von Moodle und H5P nicht in Konflikt geraten.

Wenn man als nicht wie „üblich“ Anpassungen in H5P Vornehmen kann, wie dann?

Jetzt muss man unterscheiden:

  1. Hoste ich Moodle selbst?
  2. Ist mein Moodle mindestens Version 3.10
  3. Habe ich Logineo LMS (Hier ist die Moodleversion am 1.08.2021 noch 3.9)

Zu Punkt 1: Hostet man selbst ein Moodle, dann kann man die Anleitung auf der H5P Seite einfach benutzten. Allerdings ist das auch nicht gerade einfach. Dieses tolle Video hilft dabei:

Zu Punkt 2: Ab Moodle Version 3.10 ist es etwas einfacher geworden da

:In Moodle 3.10 können H5P Inhalte nun gestylt werden. Ein „renderer“ […] wurde zum Core H5P Plugin Hinzugefügt: 5p_alter_styles and h5p_alter_scripts, to alter CSS and JS for the player and the editor.

https://docs.moodle.org/dev/H5P_styles

Damit kann nun ein Theme gestylt werden und veränderungen an den Serverdateien sind nicht mehr nötig. Näher Informationen findet man hier.

Nun zu unserem Fall 3:

Wir haben im Moment nur eine Möglichkeit. Über einen Umweg eine CSS Datei erzeugen, die wiederum von H5P ausgelesen wird. Einen ganzen Forum Beitrag dazu findet ihr im Moodleforum hier. Diese Weg ist allerdings sehr „unelegant“ und wird nicht empfohlen.

Wem das egal ist, braucht jetzt nur noch Adminrechte. Als Admin einloggen bei den Einstellungen“Darstellung“ -„Zusätzliches HTML“ folgenden Code „Innerhalb von <Head>“ hinzufüge:

<script type="text/javascript">
 
window.addEventListener("load", applyH5pCustomCss);
 
function applyH5pCustomCss() {
 
     h5pselector = document.querySelector(".h5p-iframe");
 
     if (h5pselector) {
 
         h5piframe = h5pselector.contentWindow.document;
 
         const style = document.createElement("style");
 
          
         style.textContent +=" HIER KOMMT EUER CSS REIN  ";
 
         h5piframe.head.appendChild(style); 
 
     }
 
}
 
</script>

Eure CSS Änderungen müssten dann umgesetzt werden. Ein Video dazu folgt.