Small custom CSS change in Boost theme

Small custom CSS change in Boost theme

by Anthony M -
Number of replies: 6

Hi All,

I am trying to change the colour for the small H5p fullscreen button, under the Course Presentation (see red arrow)....




I am using the browser console and the color change works there (see the button changed to red)...




The problem is that when I copy the yellow code from the browser console (see in yellow above) and paste it into the Raw SCSS box for the boost theme the code doesn´t work...


The below is the code that I am entering there...


.h5p-course-presentation .h5p-footer .h5p-footer-button {

      color: red;

}


Any help is appreciated!

Thanks,

Average of ratings: -
In reply to Anthony M

Re: Small custom CSS change in Boost theme

by Gareth Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
H5P Styles are in an iframe, therefore with reference to MDL-69087, then you need to implement a solution in Boost / Child of Boost that allows this to happen in a setting etc. If you're using the contributed module, then the solution is similar. My Foundation theme has a setting 'hvpcustomcss' that is used for both with the supporting code. This is not trivial code!
Average of ratings: -
In reply to Gareth Barnard

Re: Small custom CSS change in Boost theme

by Anthony M -
Thanks a lot for your reply and explanation Gareth

I am using the core H5P integration and as you noticed I am not a dev, I am a Moodle administrator and was asked if it's possible to change the colour for the H5p fullscreen button.

Thanks for the detailed info, I understand that for H5P core integration (not sure if also for the external H5P plugin?) it's not possible to change that colour by inserting custom css code in the Moodle UI.
Average of ratings: -
In reply to Anthony M

Re: Small custom CSS change in Boost theme

by Gareth Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Antonio,

No problem. Indeed, you'll need custom code added to what you have or use a theme that implements the tracker isssue.

G
Average of ratings: Useful (1)
In reply to Gareth Barnard

Re: Small custom CSS change in Boost theme

by Anthony M -
Thanks for your advice Gareth! I might just refrain from changing that colour.
Average of ratings: -
In reply to Anthony M

Re: Small custom CSS change in Boost theme

by Birgit Lachner -

Hi 

to change the size (width) of the H5P Aktivities I enter the CSS in the activity description. 


For this I need to change to HTML-View an copy the code to the editor, but don't change back zu "normal view".



If you want to edit you H5P, and Atto ist activeated, the CSS-Code ist deleted. Just copy it again or change editor before to unformated view.

Regards ,Birgit


Average of ratings: -
In reply to Birgit Lachner

Re: Small custom CSS change in Boost theme

by Gareth Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Birgit,

The 'h5p-iframe-wrapper' CSS class is attributed to the markup outside of the 'iframe' containing the actual H5P markup and so the custom CSS you have applies to that being the containing 'frame' and not the actual segregated content within the 'iframe' and so won't solve this issue.

Gareth
Average of ratings: -