Removing white background

Hi Guys,

I absolutely love this plugin. One challenge that we are having at the moment, though, is integrating it within our design. We are trying to remove the white background of the div behind the text so that the text appears with our colored div as the background. See the following page for reference. (the drag the text content type)

http://www.trinikidscorner.com/test/

I've tried every element in the css but have been unable to remove the white background.

I've tried:
.h5p-content.h5p-initialized.h5p-no-frame {background: transparent}

Is this incorrect? Any assistance would be appreciated.

Kind regards,
Trinikidscorner.com

papi Jo's picture

Which specific H5P activity do you want to remove the white background on? Or is it all of them?

your link does not work: http://www.trinikidscorner.com/test/

fnoks's picture

Hi,

Look here for relevant documentation. Let us know if anything is unclear!

Thanks. Unfortunately it isn't clear. I usually make adjustments to the css of our site using the plugin 'Custom CSS & JS'. Can we use this? I'm not familiar with the way that you are suggesting.

Thanks in advance,

-TKC

tomaj's picture

Hi TKC,

No, you probably wouldn't be able to use the "Custom CSS & JS" plugin, because most H5Ps are running inside i frames, and the styling needs to be applied there.

- Tom

Thanks Tom,
I tried the method that you have but it doesn't work. I'm not quite sure where I've gone wrong.
I used the first comment on this page as a guide, and it doesn't work: https://h5p.org/documentation/for-developers/visual-changes

When I check for errors in the developer tool, I see none that relate to the css not loading.
The page that we are checking is: http://www.trinikidscorner.com/protect-our-wildlife/

Any advice would be appreciated.

Regards,
-TKC

 

tomaj's picture

Can you share your code with us. As well as your approach (e.g. how did you install it, filename).

- Tom

Hi Tomaj,
It turns out that the changes were being made. We just had to clear the cache. I have to clear my cache everytime I make an adjustment to the css file to see the changes.

Thanks for the help. If anything else comes up, I'll be sure to reach out again.

Regards,
TKC

Hi Tomaj,
I've gotten most of the colours to change, however, there are few that don't no matter what I do. For example:
1. Memory game
http://www.trinikidscorner.com/sports-2/football/
code:
div.h5p-front {
background: #badd28;
}

2. Choose the correct statement
http://www.trinikidscorner.com/protect-our-wildlife/
code:
.h5p-summary .summary-options li {
background-color: #badd28;
}

These change when I use the developer tool to change it. However, when I place the code in our css file and upload, then clear and cache and refresh, they do not change. Do you have an idea as to why this is so?

We'd appreciate the help.
TKC

tomaj's picture

Hi TKC,

You probably don't have specific enough css selectors. A longer css selector would "win" over a shorter one. If two selectors are the same, the last one will win.Try:

  1. .h5p-memory-game .h5p-memory-card .h5p-front {
      background-color: #badd28;
    }
  2. I don't know about this one :(

- Tom

Hi Tom,

I actually used that approach and it still doesn't change. At all. It's very strange.

TKC

papi Jo's picture

Just tried the CSS rule given by tomaj for the color change in the Memory activity and it works fine.

PS The links you gave in your post do not work (blank page)
http://www.trinikidscorner.com/sports-2/football/ and http://www.trinikidscorner.com/protect-our-wildlife/

tomaj's picture

Yes, it looks wierd. Can you double check that you don't have any caching enabled?

The first thing you need to do, is to make sure that the Visual Changes are being loaded. In Chrome, can you do the following?

  1. Click the network tab
  2. Click on css
  3. Check if the file you added trough the Visual Changes approach is actually being loaded.

- Tom

Attachments: