Styling some images in H5P questions with a special style

Submitted by alexander.b on Tue, 08/27/2019 - 15:50
Forums: 
Developers

In general, images in H5P questions scale to fit in the surrounding div-container (css-class: h5p-container), which is good behavior in most cases, but sometimes we would like to limit the image to a certain max-width. How is it possible to address these hand-picked images? If each question could have its own css ID, then styling would be easy. Is there a possibility to assign a CSS class or ID manually? If not: how could we implement our requirement?

otacke's picture

otacke

Tue, 08/27/2019 - 21:44

Hi Alexander!

You can add your custom stylesheets using the alter_styles hook and adding your custom CSS - you'll just have to define proper selectors. Since all H5P contents have their own ID, you could even restrict changes to particular contents only using something like

.h5p-frame[data-content-id="PUT-CONTENT-ID-HERE"] .some-other-class {
  /* Your CSS here */
}

 

Best,
Oliver