CSS to make H5P even more funky

Hi all H5P users and developers.

I've been experimenting with stylesheets to offer some more customization over the look and feel of the presentation layer in H5P. I've been looking at buttons, transparent colours on overlays, and adding some nice CSS3 elements.

I'll share these via github in January and post examples in the forums of things that you can do to further skin your own H5P instance. Hopefully, this is of interest to the community and we can get a bit of "design track" going in the forums. Happy to lead with some of this.


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

Sounds exciting. Looking forward to see it :)

By the way when we implement the plugin concept for H5P it will be possible to create H5P libraries that works as themes for other libraries/content types.


gpakat's picture

Hi, i saw your comment about creating more funky design via CSS for buttons and transparency etc. Do you already have some example of this? I am talking to a large company who want to do this. If you have something to show that would be great and i could involve you in the project based on specific requirements.

I've installed H5P in a Wordpress environment and have a number of people creating some really interesting resources. I've had a couple of requests to edit/change the look feel and colour of items. What's the best way to add/edit CSS? We're looking at using the WP environment as the authoring tool for the interactive resources, and then embedding them elsewhere - so changing theme CSS might not work for us. Are there any walkthroughs?

Great work and cheers!

falcon's picture

Thank you for reaching out. The visual changes guide is probably a good place to start. Feel free to share some cool css overrides here on the forum :)