Unable to change colours in branching scenarios

Submitted by tyne-ninox on Tue, 12/31/2024 - 04:12
Forums: 
Developers

Hello, 

I am not an IT but an NGO worker creating online training using Learn Dash and H5P as interactive parts. My e-learning sits on the wordpress website which was done by developers and has a custom theme created. 

For the most part H5P mimics the fonts/colours of the theme. Text is #1C5B4A and background is #F1E6CB or #FCFAF5. 

 

I have tried the following solutions (with chatgpt instructions): 

1. Custom CSS via WordPress Customizer:  Applied CSS targeting .h5p-branching-scenario to change colors globally.  This fixed the main screen but did not apply to the branching question screens ( but the main screen was always ok with two contrasting colours green and beige or off-white).

2. Targeted CSS for Branching Questions:  Added more specific CSS for .h5p-current-screen, .h5p-action-button, and related elements.  Applied this CSS using the WordPress Customizer and a custom plugin. Changes did not reflect on the branching question interface.  

3. Editing the H5P Library JSON:  Modified library.json in the H5P Branching Scenario library to include a custom stylesheet.  Uploaded the CSS file to to my themes folder through the cpanel on the hosting.  Rebuilt the H5P cache to load the changes. Nothing. 

4. Creating a Custom Plugin:  Created a custom plugin (h5pmods) to add custom styles via the h5p_alter_library_styles action hook. Verified that the plugin was activated and properly linked the custom CSS file. Again no change to this particular question pop up.  

5. Inspecting with Developer Tools:  Verified the specific classes used for the branching question interface using browser developer tools. Confirmed that .h5p-current-screen and .h5p-action-button are the correct classes to target.

This branching scenario is a super useful tool and I don't want to give up but I am not sure where and what to do. 
What are my options? (I'd be grateful for super simple instructions like for a 5yo). 

 

Attachments: 
Image icon Screenshot 2024-12-31 at 1.46.24 PM.png
Summary: 
Branching scenarios colours are not changing (including through css) and are unreadable.
Content types: 
Branching Scenario
otacke's picture

otacke

Tue, 12/31/2024 - 14:28

Well, GPT ...

I will not explain how to inject CSS into the H5P iframe, as you have obviously managed to do that already. I had no trouble whatsoever overriding the values using these overrides:

.h5p-branching-scenario .h5p-branching-question-title {
  color: rgb(255, 0, 0);
}

.h5p-branching-scenario .h5p-branching-question-alternative {
  background-color: rgb(0, 0, 255);
  color: rgb(0, 255, 0);
}

My best guess is that you uses one of the modifying classes for `.h5p-branching-scenario` in your selector, making it more specific than it needs to be - you can specify `.h5p-medium-tablet-size`, `.h5p-mobile-screen` and others to target different devices, for instance. Your selector may not have matched your current setup. Would have helped if you actually had shared your CSS code ...