Ability to add a custom CSS class

Submitted by juliandavis71 on Sun, 02/02/2020 - 23:29
juliandavis71's picture
Forums: 
Feature requests

Hi guys

I've been asked a few times about modifying the styles of the content types. Whilst you do it when self hosting, I get this would not be an easy thing in h5p.com (unless it utilises a built in text CSS area). So thinking about it, for a self hosted soluton, would it be possible to have a setting where you could add a class or ID reference that you can then add your own CSS through your own style sheets?

Thanks

Julian

 

Content types: 
core
0
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
otacke's picture

otacke

Mon, 02/03/2020 - 08:29

Hi Julian!

Not sure if I understand you correctly, but on H5P.com there's an optional setting with a simple text area where you can define your own classes, and the plugins for self-hosting provide a hook to override styles with your own style definitions without the need to touch the regular code of H5P, see https://h5p.org/documentation/for-developers/visual-changes

Is it that what you're looking for?

Best,

Ollie

juliandavis71's picture

juliandavis71

Tue, 02/04/2020 - 01:38

Hi Ollie - thanks for getting back to me.

I think from a self hosted perspective, I'm thinking that some users will not have the knowledge to add the hook to overide the settings, but I can see how this would be used.

As for h5p.com, I couldn't see where to add the class. I'm assuming this is content type sepecfic? I did find this article https://documentation.h5p.com/content/1290501941071440038, however I can't see the option Manage Organization > Settings > Custom CSS

Thanks - Julian

BV52's picture

BV52

Tue, 02/04/2020 - 09:13

Hi Julian,

Since changing of the CSS can sometimes disrupt layout, these features is OFF by default. We warn administrators of such potential outcomes before we turn this option ON (upon request).

Also, some content types allow changing of the font and color/size of the text, like Course Presentation and Interactive Video, but for others this can be done only with custom CSS.

To this enabled you can request for it directly to H5P.com's development team by replying to the confirmation e-mail that you received when you signed up for your H5P.com subscription.

-BV

otacke's picture

otacke

Tue, 02/04/2020 - 09:26

Hi Julian!

I understand your concerns about using the hook for customization. It shouldn't be difficult to add an option similar to the one on H5P.com. Could go into the H5P plugin, could also be a separate plugin. I just had a look at the WordPress plugin repository: have not tried it, but there's https://wordpress.org/plugins/h5p-css-editor/

Best,

Ollie

juliandavis71's picture

juliandavis71

Tue, 02/04/2020 - 23:18

Hi Ollie and BV

I know you can change the fonts and colours in some of the content types, but I was asked about CSS spefcially for the columns content type, this is where the original question / thought came from.

Ollie, I'll have a look at the WordPress plugin and let you know how it goes :)

thanks for your help and quick replied!

Julian

GUILLOU

Thu, 02/24/2022 - 16:19

I would like to add custom CSS to my quiz but I don't know how. Can you help me ? Thanks very much.
otacke's picture

otacke

Thu, 02/24/2022 - 19:54

Sure! Why not have a look at the documentation?