Tag Text Colour Problem

xasharma

I want to this colour to white it is not much visible. Can someone please guide me about the code
I read 4-5 discussion ...their code didn't work for me.

tuxmain

You can try this in the custom CSS:

.Hero.TagHero {
    color: #fff;
}

But this will make all the tag heros white, including those that have a light background.

xasharma

tuxmain No effect ... i tried this

tuxmain

xasharma It works on my forum, both for primary and secondary tags, both for the title and the subtitle. Have you reloaded the webpage (F5 or CTRL+R)?

xasharma

This is fine

but I want to change the color of tag's text color this is the same problem with all the tags -

Justoverclock

xasharma have u tried .Hero-subtitle?

xasharma

Justoverclock No can you give me the code .. i don't know css

xasharma

tuxmain

yes i tried from other devices also

xasharma

I also tried with !important ... no effect

Justoverclock

.Hero-subtitle {
    color: #fff;
}

xasharma

Nope 🙁

xasharma

This is another flarum which is installed at localhost .... it is working great but I don't know why my server hosted flarum has that tag color change.

Justoverclock

h2.Hero-title {
color: #ffffff;
}

xasharma

Justoverclock

This worked ... THANK YOU VERY MUCH 🙌

xxlipe

Justoverclock this didn't work for me. do you guys know what did i do wrong?!
![

tuxmain

In a modern browser, right-click on the title -> Inspect Element (or anything like that). Find the style rules for the title and search for all the instances of the property color. Some may be cancelled (gray and strike). Where is the one that isn't?

screenshot on Firefox

xasharma

tuxmain

Thank bro .. this worked fo me.

h2.Hero-title {
color: #ffffff;
}

Justoverclock

remember to set the best answer so anyone can easily find a solution 😉

SKevo

Here's the updated CSS that should work on the latest Flarum version. It will "invert" the text color based on the background. However, this may still produce unreadable colors in some edge cases (colors that have equal/similar RGB values, I think - because inverted equality equals the previous equality, e. g.: pure grey color). So, you should probably adjust the color property to be always readable, according to your tags color schema:

.TagHero .Hero-title {
    color: #ffffff;
    mix-blend-mode: difference; /* remove this line if you want the text to be always white, regardless of background */
}