No "Description", "Time spent:" and "Card turns:" in Front end

Submitted by Edin on Mon, 10/23/2023 - 19:52
Forums: 
Bugs in content types

Hi,

I use WP plugin H5P Version 1.15.6.

WP admin is on FF, I tested the Memory game on front end on FF, Windows Chrome and Android Chrome. There is always the same issue.

I made two memory games, these issues are in both games.

When I test via Preview in WP admin, everything is OK, there is a "Description", but when I start the game in the browser, that "Description" does not exist when the images match. Please see the picture on https://prnt.sc/29oFLg1lUo_T

All the time while the game is going on, there are no "Time spent:" and "Card turns:" in the browser, everything is OK in the WP admin preview.When the game ends, in the browser there is no "Time spent:" and "Card turns:" and "Good Work" text, in the WP admin preview everything is OK.

Please see the screenshot at https://prnt.sc/sW15iags3OEk

You can watch from your side at https://nur-ns.com/wp5/games/memory-games/

Best regards

Edin

Content types: 
Memory Game
otacke's picture

otacke

Mon, 10/23/2023 - 22:16

This is not a bug in the content type, but your site's theme stylesheet is bleeding into the content types stylesheet and sets the font color to white.

Here's the culprit that you are looking for

/* Custom Main Text Color */
body, select, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
  color: #ffffff;
}

Edin

Tue, 10/24/2023 - 10:56

Hi,

thank you very much for the answer.

First of all, I apologize for the wrong title, for the word "bug", because this is not a bug because it only happens to me, it is not a general phenomenon.

However, I do not understand how this phenomenon is due to the theme, because everything is OK in the preview, and the preview and the page in the browser are exactly the same. If it's because of the theme, how is everything OK in Preview?

But it doesn't matter, I added this CSS to Appearance/Customize/Additional CSS (please see the screenshot https://prnt.sc/6nk_PZbGD3Ju ), but everything is the same, I still don't see the mentioned elements.Did I do something wrong?

otacke's picture

otacke

Tue, 10/24/2023 - 13:01

Hi!

Calling it a bug was absolutely fine from your perspective, but I wanted to clarify that it's not a bug of Memory Game (even though I'd call it a flaw, because unlike most other content types it doesn't protect itself by running inside of an iframe).

I am not running your theme, and I have not installed in to check whether it applies the same stylesheets to the editor side as well, but one could easily determine that it causes trouble when checking your site that you linked to.

You have now added the very same code, so now you're setting the color to white (#ffffff) twice - once in the stylesheet, once in your customization. You should not override all the classes that the stylesheet defined, or you will most likely cause trouble in other places. The correct way out would be to specify a selector with higher specificity that targets the Memory Game stylesheet only.

Best,
Oliver

Edin

Thu, 10/26/2023 - 20:14

Hi Oliver,

thanks for successfully "indicating" that the "culprit" is the theme.

I solved the problem by changing the color of the main text in the theme.

I didn't use the CSS you sent, it wasn't necessary.

Regards

Edin

otacke's picture

otacke

Fri, 10/27/2023 - 00:42

Hi Edin!

Good for you! 

But I didn't send you any CSS to use, merely pointed out to the CSS that's causing the issue. As I said, the solution is to declare a color for Memory with a class of higher specificity.

Best,

Oliver 

Edin

Fri, 10/27/2023 - 02:49

Hi Oliver,

thank you for your response.

Someone sent me the CSS that should have solved the problem before you posted, but that didn't help.

Anyway, the problem is solved and thank you once again for your support.

Best regards

Edin