Removing white background

Which specific H5P activity

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

Fri, 02/03/2017 - 07:56

Hi,Look here for relevant

Hi,

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

Mon, 04/03/2017 - 21:45

Not clear to us

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

Tue, 04/04/2017 - 07:16

h5p inside iframes

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

Tue, 04/04/2017 - 16:38

Not working

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

Fri, 04/07/2017 - 08:57

Examples

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

- Tom

Tue, 04/11/2017 - 18:05

Resetting the cache

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

Wed, 04/19/2017 - 15:38

Some elements remain unchanged

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

Thu, 04/20/2017 - 07:35

Hi TKC,You probably don't

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:

.h5p-memory-game .h5p-memory-card .h5p-front {
  background-color: #badd28;
}

I don't know about this one :(

- Tom

Tue, 05/02/2017 - 17:00

No change

Hi Tom,

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

TKC

papi Jo

Tue, 05/02/2017 - 23:32

Just tried the CSS rule given

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/

Wed, 05/03/2017 - 08:31