Removing white background
Submitted by Trinikidscorner on Tue, 01/31/2017 - 14:31
Forums:
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
Wed, 02/01/2017 - 10:39
Permalink
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
Permalink
Hi,Look here for relevant
Hi,
Look here for relevant documentation. Let us know if anything is unclear!
Trinikidscorner
Mon, 04/03/2017 - 21:45
Permalink
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
tomaj
Tue, 04/04/2017 - 07:16
Permalink
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
Trinikidscorner
Tue, 04/04/2017 - 16:38
Permalink
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
tomaj
Fri, 04/07/2017 - 08:57
Permalink
Examples
Can you share your code with us. As well as your approach (e.g. how did you install it, filename).
- Tom
Trinikidscorner
Tue, 04/11/2017 - 18:05
Permalink
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
Trinikidscorner
Wed, 04/19/2017 - 15:38
Permalink
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
tomaj
Thu, 04/20/2017 - 07:35
Permalink
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:
- Tom
Trinikidscorner
Tue, 05/02/2017 - 17:00
Permalink
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
Permalink
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/
tomaj
Wed, 05/03/2017 - 08:31
Permalink
Yes, it looks wierd. Can you
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?
- Tom