Resolved: CSS issue

[C.Ezra.M]

The post flair feature seems to be broken. For example, I put the color of my username in my post flair as #ffaa55 (this color), but it shows as white no matter what. Here's what I mean:

 

[Nah]

I don't know much about CSS myself, but your username is displaying as the color you've chosen on my end.

 

[Mab]

I can see your name in orange too. What browser is that?? I've never seen it before.

 

[gimmepie]

I can see your name in orange too. What browser is that?? I've never seen it before.

It's Opera GX. I checked on mine and it's working fine for me there though. No idea why it's not for them.

 

[Roni]

Confirmed I can see it as the color you chose too. Maybe it's a browser glitch? Try viewing on something else and see if it's still white on your end.

 

[C.Ezra.M]

I tried again with Microsoft Edge, and the colored username does show properly. Please check with regular Opera, and see if the issue exists there.

 

[Fairy]

Still looks orange to me. Some browsers just don't show certain colors or support certain fonts. Maybe try logging in on another device so you can see what we see?

 

[gimmepie]

To reiterate: I tried on Opera GX and did not have the issue.

 

[C.Ezra.M]

I checked on Opera GX on my phone, and my username showed as white on the user flair. I applied the same formatting to the statistics and the mini bio, and the number of posts also showed as white.

 

[Fairy]

Man I dunno what to tell you other than when I look at your name and stats I see orange! ¯\_(ツ)_/¯

 

[C.Ezra.M]

Maybe I have this error because Opera GX has CSS caching problems. Also, I saw the actual ignorance:

Spoiler:

The inherit value means that the value is taken directly from the parent element.

 

[Mab]

Can you confirm that you are on the latest version of Opera GX and have done a hard refresh (clear cache). Can you post photos of both the flair edit page and your flair on this page once you've done so? I can't replicate this bug on any of the browsers I've tried, including both Opera and Opera GX.

The inherits in the default flair CSS should never interfere with user settings, which it seems to be doing in your case. I can only assume that must be an Opera CSS bug in whatever version you're on, but as it seems to be Chromium based I'm not sure why it would be different.

 

[C.Ezra.M]

Can you confirm that you are on the latest version of Opera GX and have done a hard refresh (clear cache). Can you post photos of both the flair edit page and your flair on this page once you've done so? I can't replicate this bug on any of the browsers I've tried, including both Opera and Opera GX.

My Opera GX installation was LVL 3 (core: 81.0.4196.61), and I checked if Opera GX needs updating. It did, and now, I'm on the version LVL 3 (core: 82.0.4227.44).

After updating, but before emptying browser cache:

Spoiler:

After emptying browser cache, the problem unfortunately remains unless I have to restart the browser. Is there something else I have to do?

 

[C.Ezra.M]

I emptied the cache once again, but even after rebooting my laptop, the text stayed white where it should have been orange. Or maybe this is caused by the still present "New Member" marking?

 

[C.Ezra.M]

I discovered the reason: dark themes just prioritize white over post flair icons! "Infernal Smash" is one of them.

 

[C.Ezra.M]

I found the actual reason the Infernal Smash theme overrides the color set on the post flair for links.

It's because of the .block.forum-bit a:not(.btn, .userinfo), .block.threadbit a:not(.btn, .userinfo), .block.postbit a:not(.btn, .userinfo), .block.user-list-block a:not(.btn, .userinfo) selector, which has the color property set to white !important. The use of !important is NOT recommended here, because the only way to override !important is to use !important in a property declared for a more specific selector. The screenshot shows how it looks.

Spoiler:

There are two possible workarounds for now though:

1. Using -webkit-text-fill-color set to the same value. It's supported in all major browsers, except IE. Must be defined after the color property.
2. Adding !important to the color property in the post flair.

Despite Johto Elite being a dark theme as well, it doesn't affect the color of the link in the post flair.