Mastodawn

Giovanni Fonseca (he, him)👋🏻

Liebe #moodlebande und #H5P-Community, ich versuche, die Standardfarben von H5P über die Funktion "Raw CSS for H5P" des #LearnR #Moodle Theme Plugins an unser Corporate Design anzupassen, aber ich bin schon überfordert, die zu ändernden CSS-Selektoren manuell zu identifizieren😅. Habt ihr Erfahrung damit oder wisst ihr, wo ich eine Liste der Selektoren finden kann?

Vielen Dank im Voraus für jeden Hinweis!

Thomas Unkelbach Aug 22, 2023

@giofonsecaf @fusion kennt sich aus

Norbert Forster Aug 22, 2023

@giofonsecaf Ich wüsste nicht, wie das gehen soll, weil H5Ps in iFrames angezeigt werden, die nicht "von außen" zu beeinflussen sind, allerdings habe ich LearnR nicht im Einsatz.
Um für weitere Versuche an die Selektoren zu kommen, könntest du H5P-Inhaltstypen mit Lumi als HTML exportieren, darin sind alle H5P-Einstellungen enthalten. Dann kann man solche schlimmen Dinge tun, jedoch ist das kein H5P mehr und der Trick funktioniert auch nicht systemweit sondern immer nur für eine Umwandlung...

Giovanni Fonseca (he, him)👋🏻Aug 22, 2023

@fusion danke für den Hinweis über Lumi, das probiere ich auf jeden Fall.

Tatsächlich ist diese Funktion von LernR ganz nützlich, weil genau das ermöglicht. Die ersten Tests bei unserem Test-Moodle funktioniert ganz gut.

Dag Klimas (aka Moodle-Guide)Aug 22, 2023

@fusion @giofonsecaf - mit #Moodle 4.2 gehen CSS-Einstellungen auch für H5P- Inhalte https://tracker.moodle.org/browse/MDL-77049 unser Hoster hat die Funktion für uns auch auf 4.1 (LTS) gebracht... und es hat funktioniert... 😄 #moodlebande

[MDL-77049] Customise H5P styles via Raw SCSS theme setting - Moodle Tracker

Norbert Forster Aug 22, 2023

@dag_moodle @giofonsecaf
Super, das macht Anpassungen leichter 🙏

Norbert Forster Aug 22, 2023

@dag_moodle @giofonsecaf
Schau an, da kann sogar H5P barrierefreundlich werden (die Farbkombi ist hier natürlich nicht gemeint sondern die Schriftart Opendyslexic)
#moodlebande

chschett Aug 22, 2023

@giofonsecaf Vielleicht hilft das weiter (ich selbst verstehe nur Bahnhof):
https://h5p.org/moodle-customization

Moodle customization

H5P empowers everyone to create, share and reuse interactive content - all you need is a web browser and a web site that supports H5P.

Giovanni Fonseca (he, him)👋🏻Aug 22, 2023

@chschett @ThomasUnkelbach @fusion

Vielen Dank für eure Hinweise🙏 , nach dem Begriff "Overrides" (dank @chschett)🙌 habe ich das hier gefunden:

https://github.com/h5p/h5p-interactive-book/blob/master/src/styles/_color_overrides.scss

Wenn es fertig ist, teile ich gerne das Ergebnis mit der Community

h5p-interactive-book/src/styles/_color_overrides.scss at master · h5p/h5p-interactive-book

Contribute to h5p/h5p-interactive-book development by creating an account on GitHub.

GitHub

otacke Sep 2, 2023

@giofonsecaf Jeder Browser dürfte so etwas wie einen "Inspektor" haben, mit dem du ein Element der Seite auswählst und dann die CSS-Infos inkl. Klassennamen/-hierarchie einsehen kannst. Ich würde es nicht beschwören wollen, aber vermutlich zeige ich das hier: https://campus.oercamp.de/lessons/wie-kann-ich-das-visuelle-erscheinungsbild-von-h5p-veraendern/

Wie kann ich das visuelle Erscheinungsbild von H5P verändern? – OERcamp SummOERschool 2021

Giovanni Fonseca (he, him)👋🏻Sep 2, 2023

@otacke vielen Dank fürs Teilen. Das ist echt ein sehr nützlich Lernmaterial für alle, die, wie ich gerade über die CSS & co. -Welt lernen möchten!
Ich habe mich auf dein Code (denke ich) _color_overrides.scss des Interactive-Books orientiert, um meine Anpassungen zu machen. Ich bin kein GitHub-Experte, aber habe ich nun mein erster Versuch hier hochgeladen: https://github.com/giofonseca/h5p-css-customization/blob/main/style.scss
Es ist kein fertiges Ding, weil ich noch die andere CSS Elemente auch anpassen möchte, die nicht auf dem IB sind...

h5p-css-customization/style.scss at main · giofonseca/h5p-css-customization

The idea is to collect here, all the CSS elements to customize the color of the different H5P content types - giofonseca/h5p-css-customization

GitHub

Giovanni Fonseca (he, him)👋🏻Sep 2, 2023

@otacke bin mir gleichzeitig nicht ganz sicher, ob man mit dieser Methode (über SCSS des LernR Themes) vermeiden könnte, dass die eigenen Einstellungen von Interaktive Books, Tabs, oder Portfolio überschrieben werden. Also meine Idee wäre, meine Anpasung als Default nutzen, damit unser CD auf H5P dargestellt würde, aber wenn der Nutzer ein andere Faber für das IB, Tabs oder Portfolio möchtet, dass das auch möglich wäre. Hast du eine Idee, ob das möglich ist?

otacke Sep 2, 2023

@giofonsecaf Ist vermutlich nicht ohne Weiteres machbar.

otacke Sep 2, 2023

@giofonsecaf Das wird demnächst™ einfacher. Eine der nächsten Aufgaben des H5P-Kernteams wird es sein, in H5P Themes zu erlauben (vermutlich über zentral definiert custom property values wie bei dir), Inhaltstypen entsprechend anzupassen, das in den H5P-Integrationen anpassbar zu machen, und auch das Standard-Theme zu modernisieren.

Giovanni Fonseca (he, him)👋🏻Sep 2, 2023

@otacke Jap, ist sehr interessant, die Frage ist, wann es fertig wird.

Mit meinem ursprünglichen Toot habe ich die Hoffnung, dass eine Liste von CSS Elemente schon irgendwo wäre, damit ich ein schnelle und unkomplizierte Anpassung machen könnte, um das sofort für unsere Nutzer anbieten zu können, aber die Realität ist ein bisschen anders 😜 Danke, wie immer, für deine Hilfe!

otacke Sep 2, 2023

@giofonsecaf Darum "demnächst™" 😁 Terminangaben gibt's halt leider nicht einmal ungefähr.

Giovanni Fonseca (he, him)👋🏻Sep 2, 2023

@otacke das klein TM!