Help needed with CSS to change text/background color

Submitted by Michaelabf on Tue, 07/09/2024 - 19:12
Forums: 
General discussion

Hi,

I'm struggling to do something simple like change the background color & text color for the Find The Words content.

I do not have access to a pc. So I can not do the "inspect element" method. I would not know how to do it anyway.

Can someone please provide me with the correct CSS to change the grid background color, and the grid letters color.

It's a Wordpress site.

Thankyou.

Daisy98

Thu, 07/11/2024 - 17:30

/* Change the color of the text to blue, set the font size to 18px, and make the text bold for better visibility */
.example-text {
    color: blue;
    font-size: 18px;
    font-weight: bold;
}
/* Change the color of the text to blue, set the font size to 18px, and make the text bold for better visibility */
.example-text {
    color: blue;
    font-size: 18px;
    font-weight: bold;
}
Thank you guys Whatsapp

Michaelabf

Thu, 07/11/2024 - 19:42

Thanks Daisy, but I need the exact CSS including the correct classes etc.

It will be something like ...

.h5p-content { background: blue; color: white; }

For example.

Michaelabf

Sat, 07/20/2024 - 00:50

Please can someone help me?
It seems like such a simple thing to do.
But I'm not a tech person, so I need help.
If it can be achieved with CSS then please tell me the correct CSS code and I can add it to my Wordpress site.

Thanks.

otacke's picture

otacke

Sat, 07/20/2024 - 20:41

Hi, Michaelabf!

The thing is that it's not thaaat simple if you've no motivation to dig into a little tech at least. For three reasons - see below.

The correct CSS selector + definition for the backgorund color would be 

.h5p-find-the-words .canvas-element {
  background-color: #f0f0f0;
}

where #f0f0f0 obviously would need to be replaced with the color code that you want to use.

Reason 1

The document with the H5P content lives inside an iframe and therefore cannot simply be modified by adding some custom CSS rules to your WordPress theme configuration. You will need to add a tiny extra plugin, to throw out what you don't need and to configure it appropriately, see https://h5p.org/wordpress-customization.

Reason 2

Find the Words does not use DOM elements to display the letters, but paints them on a canvas. Therefore, you cannot modify them (their color in particular) using CSS. This will require to change the code of the content type to either allow setting the color(s) directly or to not use the canvas.

Reason 3

This is just an addendum: Some people might interpret the statement "I am not a tech person" as an evasive defense, and they might rather hear "I want someone else to solve my problems (for free)". Those people will show you the door, but would want you to walk through it yourself. Other "non-tech people" have managed to do that before with a little help, too.

Best,
Oliver

Michaelabf

Mon, 07/22/2024 - 12:57

Thanks Oliver,

I downloaded the Mods plugin, I can't understand exactly what to do. Never mind. I will try to find someone to assist.
Meantime, I went ahead and used the Find The Words content type with its default settings, looks fine, so all's good.