[Help] Custom CSS for Changing Text Colors

Simdol

Hi,

I've been had pleasant experience for using Flarum from the start I've been started to test and / or use. It's slick, fast, geek friendly, and it's just as what I was looking for.

While I was modifying the theme of Flarrum installation, I've come to a problem where texts are really hard to see due to the background color. The problem is that if I do change the background color, it also slightly changes the text color which makes the entire effort futile.

I've heard that something as this is achievable through custom CSS, but I am not familiar in that aspect and I am struggling to make it the way I want. I may be wrong about this as it is just my assumption that I've deduced by browsing the forum and researching from search engines.

Is there any way I can change the text color of 'Welcome Banner' and other primary text color in the forum?

Thank you.

Simdol

Bump! It's been 24 hours since I've posted this, and I still haven't received any reply. Please take a moment to help me out! 🙂

HavocK

I've seen a thread about that : http://discuss.flarum.org/d/665-increasing-text-contrast

Simdol

HavocK

I see! While defining custom CSS for

@muted-color: #444;
@muted-more-color: #666;

did help to change the color of the buttons & each tag's description color, I still haven't figured the workaround for changing color of the 'Welcome Banner'.

I am guessing I have to override one of the variables here, but which one do I have to override for the color of the 'Welcome Banner'?

https://github.com/flarum/core/blob/master/less/lib/variables.less

Thanks a lot! 🙂

Toby

Simdol You're probably looking for the @hero-color variable.

HavocK

I believe that you could change those value, and then recompile the css (because it's LESS).

About the welcome header here is a dirty fix i believe... 😉 But hey ! It works !

.Hero.WelcomeHero {background-color: #e7e7e7;}

Copy that and go to the administration :
Appearance > Edit Custom CSS

Paste it there. It should work.
Of course, don't forget to change the color.

Simdol

HavocK

Yup! That worked perfectly. Is there way to change the text of the welcome header? You are the life saver!

I attempted to try out '.Hero.WelcomeHero {text-color: #e7e7e7;}' but it didn't work (obviously...).

Thanks!

HavocK

Try color instead of text-color.

.Hero.WelcomeHero {background-color: #e7e7e7; color:#000000;}

Simdol

HavocK

Thanks! That worked perfectly fine. I hope that this would either be documented in the future, or someone would implement the feature to change text & background color much easier.

Dominion

Simdol It will be documented. The current lack of documentation is one of the (many) reasons the devs do not recommend use in production sites during the beta testing phase.