Editing CSS in a Course Presentation *.H5P file

Submitted by John Nicholson on Thu, 05/13/2021 - 16:17
Forums: 
General discussion

I am attempting to make some changes to a particular H5P course presentation.  So I've exported the h5p file, changed the extention to *.zip and now have access to some 72 folders and 2000+ files  (including 90+ *.css files) that make up that single h5p package. After editing as needed I reverse my steps and upload the modified h5p back up into our moodle site.

But I am having trouble getting this to work correctly and sorting out which files to edit.

1) I want to get rid of the progress bar and also the "slide counter" navigation (but still retain the table of contents with auto-hide).  This works fine using the developer tool in my Chrome browser - all I have to do is add "display:  none"  (see images)

However when I attempt to do this by editing the h5p file, the results are inconsistent or incomplete. 

My specific question here is: How do I find the exact CSS file and section that I need to edit to produce the results I want?

2) I also want to edit a particular slide in the Course Presentation that I've created.  (Specifically, right now, I want to edit a link so that clicking it will result in a video playing in a "pop out" screen rather than within the course or in another browser tab.)

My question here then is:  How do I locate a specific slide file so that I can edit the contents?

Thanks for your help.  John

Attachments: 
Image icon 2021-05-13 10_01_32-.png
Image icon 2021-05-13 10_05_10-.png
otacke's picture

otacke

Thu, 05/13/2021 - 19:25

Hi!

Changing the CSS in the file will not change the CSS on your platform unless you're by chance uploading a library that's not yet present on the platform. The proper way to change the CSS of H5P content is documented at https://h5p.org/node/2692. You do not have to locate a specific file, you just need to define classes to be overridden.

Best,
Oliver

John Nicholson

Thu, 05/13/2021 - 20:07

Oliver,  Thank you for the quick reply.

However I don't think this will do it.  I believe that the method you are referring to will change CSS for the entire theme.  I only want to hide the progress bar for one specific course presentation and tweak the link (edit the html) only on one SPECIFIC SLIDE of that course.  

otacke's picture

otacke

Thu, 05/13/2021 - 20:37

Hi!

Yes, it will change everything if you don't specify some particular content by using its id to identify it in the selectors. There's no simple way to change just the CSS of one content.

Best

Oliver