Customization - why I think the H5P model needs review

Submitted by petarb on Wed, 04/29/2020 - 03:31
Forums: 
Feature requests

As this is my first post, I'd like to start by saying how awesome H5P is, and to thank everyone for their hard work on it.

Having said this, one of the constant requests we find, are ways to override default styles of H5P, usually through CSS.

It's a reasonable request, and I understand that the H5P model relies on core CSS behaviours to actually make it work, so keeping these to a minimum seems like a good idea from a strategic point of view.

However, fitting your H5P content into an existing site, that even needs simple things like a consistent colour amongst all Headline tags seem a bit of a chore.

The current documentation advises these overrides can be done through LMS-based php hooks. I've deployed these successfully in Drupal, and it's relatively straight-forward. Whilst this is fine for the module deployed on that specific LMS... if you're sharing the content, all those CSS overrides are gone. And if it's in another LMS platform entirely, there's no simple method to port those CSS overrides over.

This seems to go against the fundamental model and goal of H5P - easily shareable, modular content that is transportable across different LMSs.

Has there been any discussion around this? Attached is a quick and dirty UI mockup of how I would imagine this would work. CSS could be added per object, then reusing the .h5p file on a different LMS would keep the CSS on that other LMS as it would no longer require hook usage.

 

Attachments: 
Image icon css.png
Summary: 
CSS customization
3
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
falcon's picture

falcon

Wed, 04/29/2020 - 10:23

Hi petarb,

Good points. There are a couple of plans related to this. We have the plugin consept which will allow the creation of themes for content types. The themes may be hard coded or configurable (allowing color config for instance). The themes will follow when content is exported and imported through the upcoming hub or through files. New premium content types on H5P.com launcing the next couple of months also have built in themes and color pickers.

petarb

Wed, 09/09/2020 - 13:17

@falcon, I'm really keen to hear more about this. How have you progressed?

BV52's picture

BV52

Wed, 09/09/2020 - 18:46

Hi petarb,

No updates yet these are still all concepts on the drawing board. The H5P core team is currently doing some finishing touches on the OER HUB.

-BV

frumbert

Tue, 09/01/2020 - 09:55

the ability to keep css as part of the package not as a hook / override per lms / implementation would be preferable. I like where it is in the mockup which would make it easily accessible, or perhaps under an 'advanced' expandable box if there were to be other potential customisations to be considered.

[email protected]

Mon, 10/19/2020 - 19:31

While we wait for a new way to customize css it would be quite useful to implement a custom css line in the editor that is added to a style tag in the head. I've made a working test https://we.tl/t-xf3VVUTVoR I think I'll add this to the h5p's were using. I was wondering if you think this is a good way to go until a more advanced system is in place? Thanks Jorgen

Ps. if not in developer

otacke's picture

otacke

Sat, 10/17/2020 - 09:01

Hi Jorgen!

I don't think anyone who has installed the latest version of Memory Game already will be able to see your changes unless developer mode is turned on. If they don't have the latest version, you're forcing a modified version on them that will potentially prevent them from using memory game files from other systems.

If you want to demonstrate features that way (with non-developers), I positively suggest to use a fork in order to not mess with other systems.

As for the implementation: I don't judge the idea, but the implementation: Adding that field in semantics would mean to update every single content type (again if there are more related ideas that require the code to be changed). I think such an option should be added to the editor by editor core, could be stored in the extras like the metadata for content, and the CSS should be loaded and added by core. That way no content type would need to be touched. Ideally, since semi-forcing a style on users (they'd still need to delete the line) might be annoying (sites might have their own custom look-and-feel), a setting in the plugins' option to filter out external stylesheets when uploading content might be a good idea. Also, some general styling options in the plugins (basically an inbuilt hook setter) would probably be a good idea in order to not being forced to set a general styling manually for every content (cmp. H5P.com).

Cheers,

Oliver 

[email protected]

Mon, 10/19/2020 - 19:45

Hi and thanks for the reply!! I changed the name of the example module so it won't mess up the original version https://we.tl/t-xf3VVUTVoR

The Lms we're working on is a .NET custom buildt one and from what I can gather there is no solution for me to change the styling of the h5p that does not involve getting way to deep into something I have no idea of the scope of. As the module is in an iframe I cannot simply add css to the parent document either. 

So unless I'm missing something here I have to change the css directly in the h5p or use the method in my example. Do you agree with that and will the method your working on adress this type of use case by enabling css upload from the editor or similar?

Thanks Jorgen

otacke's picture

otacke

Mon, 10/19/2020 - 20:20

Hi Jorgen!

First of all: I am not a member of the H5P core team, so I cannot comment on any plans they may have, because I don't know them.

If you're running a custom solution based on .NET that I don't know and if it doesn't feature something like the customization hooks of the original core, then I fear I cannot comment on your options either. Sorry.

Cheers,
Oliver

[email protected]

Mon, 10/19/2020 - 21:17

Hi again Oliver and thanks! I thought you were one of the h5p guys looking at this :D

Would be great if anyone from the core team could answer if this use case will be covered in the not to distant future!

J

BV52's picture

BV52

Tue, 10/20/2020 - 19:09

Hi Everyone,

I've reached out to the core so that they can provide their insites to this thread.

-BV