add custom CSS in Lumi

Submitted by roberthabeck on Thu, 01/18/2024 - 18:11
Forums: 
General discussion

Hi all,

for our moodle - plattform content creators work a lot with lumi, in order to be able to create h5p content locally on their notebooks.

We ' re looking for a way to write css in a separate file in order to store it persistantly and to add it to  h5p content flexibly.  It's possible to maniplate the css of a h5p content via the developer tools of lumi. There is also an ovewrite option for files. Is it possible to include / overwrite our own custom.css files via the developer tools ? Or some how different. 

The aim is to write css flexibly for different Moodle skins.

Thanks a lot for your help !

 

Best

Robert Habeck

 

otacke's picture

otacke

Thu, 01/18/2024 - 22:15

There are plans to make H5P content themable, but it's unclear whether that is going to cover individual stylesheets per content as well and when that will be done.

The only (simple) option that you have today is overriding the stylesheet globally on moodle, but that will not be flexible (per content) and there's no option to add the stylesheet to exported H5P files.

roberthabeck

Mon, 01/22/2024 - 11:01

Hi otacke,

 

Thanks a lot for your targeted answer!

 

The way to change the css in Moodle should be (like you described) to override stylesheets globally in Moodle. There will be no other way. Maybe we can edit css in the Web interface or we need to create childtheme ... whatever ... think we are on common ground here.

 

 

Our aim is to be able to play arround with the css in Lumi. That could mean to override the css files lumi creates by our own css files stored somewhere on the computer. I tried to do so via the developer tools of lumi but wasn't succesful...

 

... if somebody has experiences concerned with that, please let me know...

 

Best 

 

Robert

 

roberthabeck

Mon, 01/22/2024 - 11:51

So my idea was to open an existing lumi file in lumi and then open the developer tools. That would show the developer tools like shown in the picture I attached to this posting.

 

Via page in the menu (1.) you can navigate to the css file that organizes the multiple choice css for h5p. You can click on the file "multiplechoice.css?version=1.16.6" (2.) which opens this file in window right  site to the navigation tree. Here you may e.g. manipulate the background in line 47 (3.) and you see immediately what happens to the h5p file.

 

My approach would be to attach a file, that Overides this css file (4.). So I can store my css over time.

But it never worked ...

 

Maybe someone can help.

 

Best

 

Robert

Attachments: 
Image icon lumi_css.PNG
otacke's picture

otacke

Mon, 01/22/2024 - 18:10

What do you mean by lumi file? An H5P file? Modifying its contents is not working, because Lumi already has the respective files installed as part of the content library. In that case, it does not install them again (please cmp. https://snordian.de/2022/12/31/why-cant-i-upload-h5p-content/ for details on what H5P does when you upload files). You'd need to remove the respective library first.

Anyway, please DO NOT modify the contents of H5P files if they are supposed to be spread in any way (sharing files directly, allowing download). While in the aforementioned case an H5P instance (such as Lumi, the H5P plugin for WordPress, etc.) would ignore your modified files anyway if the library is already installed. If the library way not installed however, the one that you tampered with might get installed and that's most likely not what the person who is installing wants.