Add CSS class to the iframe for Course Presentation

Submitted by ondaconcepts on Wed, 10/17/2018 - 06:13
Forums: 
Developers

Hi there,

I would like to know if there is a way to add a CSS class to the iframe for Course Presentation. This is so that I can have a different colour scheme based off a course. Ideally, I would like to insert a CSS class (e.g. "module-01") into the tag as per the image attached.

I am using the Drupal distribution Opigno.

I also have gone through the Visual Change and have created a custom module successfully and a custom H5P CSS stylesheet.

I also have seen the H5P API hooks for Drupal too, however I can't seem to find the right place to do what I would like.

Thank you for your help!

Attachments: 
Image icon css_class.png
otacke's picture

otacke

Thu, 10/18/2018 - 10:13

Hi ondaconcepts!

Inside the iframe (that's what you have access to using the hook for using custom stylesheets), you'll always find a wrapping div element with the class "h5p-container" and a class for the content type -- in this case "h5p-course-presentation".

You can't inject new classes into the H5P iframe, but using the stylesheet that you seem to be able to include, you can override the existing classes with your changes.

Best,
Oliver

Attachments: 
Image icon h5p-course-presentation-class.png

ondaconcepts

Fri, 10/19/2018 - 05:01

Thank you, Oliver for your help :)

With some more coding, I've managed to get the Organic Group reference that I am looking for. Based off the Organic Group reference, I was able to swap the appropriate stylesheet I needed.

otacke's picture

otacke

Fri, 10/19/2018 - 09:09

Hi ondaconcepts!

Glad it works!

Best,
Oliver