Hi, you can apply your own CSS to H5Ps by leveraging your own custom mod for wordpress and hook into the H5P styling. It requires some familiarity with programming and styling, see: https://h5p.org/documentation/for-developers/visual-changes
Hi,
Thank you very much for the quick answer, I really apreciate it, however, I cannot imagine, why should be this setup so complicated, instead of a built in setup options / menu for the colors.
Please be so kind and let me know, how can I find the list of the possible css options? I mean, button background, button color etc.
It woud be great to have the full list, instead of the very time consuming using of the website inspector…
Additionally, I checked the article, but I am not sure, what is the expected, correct full path of the custom css file, please be so kind and post some concrete example for our domain.
Thank you very much and thank you again for the great plugin!
We do offer a graphical UI for doing theming on our SaaS h5p.com, but unfortunately that has not made it to the open-source-plugins just yet.
If you are using the latest versions of content types, they have been built for theming, and can be styled with the following theme variables: new end-user design css variables.
I can not help with exact paths for your system, as I don’t have access to it. The h5pmods example plugin should provide reasonable defaults, but you will have to be comfortable with making changes to it and digging into the internals of your own system to get it to work.
@thomasmars There is SNORDIAN’s H5P Themer which adds the H5P.com theming features to WordPress and is fully open source (code at https://github.com/otacke/snordians-h5p-themer). It’s built atop a reusable (web) component by the way – the way H5P Group should probably have done it themselves to begin with if making it available everywhere had been the plan. So, if H5P Group really wants to include a theme picker in their own H5P integrations for WordPress, Moodle and Drupal: piece of cake. See https://www.npmjs.com/package/h5p-theme-picker for details or https://github.com/otacke/h5p-theme-picker/.
@webreneszansz Adding options for all kind of things that users may want to tweak colors, borders, paddings, etc. for different elements primary buttons, secondary buttons, input fields, menus, etc. simply is not feasible. You’d end up with a gazillion sliders and input fields. On the other hand, those would (most of the time) only relay the values to CSS anyway, and CSS basics that you need are not rocket science but a well established and flexible way of defining the style of a page. So, while I understand your wish, I think the way that H5P Group allowed to customize styling makes a lot of sense.
@otacke Excellent, thanks for sharing! The beauty of open-source.
