Signup and Login Text Color Change CSS Code

Mahendra

I am running a Flarum forum, on front page their is sign up and login button near the search bar.
I want to change the color of text, pure white.

If you can write a css code, this help me lot. Because button are hard to visible for user.

huseyinfiliz

Mahendra
.item-signUp button span, .item-logIn button span{color: #fff !important}

After this css code: Sign Up and Log In buttons text color is white in Night and Day mode.

Anomalum

huseyinfiliz Guessing you might've been meaning:

.item-signUp .Button-label,                    /*(OPEN) SIGN UP BUTTON (SELECTOR)*/
.item-logIn .Button-label {                    /*(OPEN) LOG IN BUTTON (SELECTOR)*/
    color: #fff;                             /*SET TEXT/ICON COLOR*/
}                                              /*(CLOSE) BOTH (SELECTORS)*/

Mahendra Try this...

Mahendra

huseyinfiliz Thanks very much! Now button is white after this code.

huseyinfiliz

Anomalum Both codes will perform the same function. I tested both, and I didn't notice any difference

Mahendra You're welcome! If this isn't exactly what you were looking for, feel free to provide more details

Addition: Regardless of which CSS code you use, I recommend adding !important to the custom CSS codes you add, such as in the example #fff !important. This will help prevent issues with other themes and plugins you may use in the future.

Mahendra

Anomalum I changed to this. Thanks 💗

Mahendra

huseyinfiliz Yes both code worked, such a kind feedback.

Anomalum

huseyinfiliz I honestly didn't even know we could use span as part of selectors.
I'd just figured you might've been in a rush or something and had probably intended to write .Button-label.

Regardless, we ought to avoid using !important wherever possible, mainly because it can become problematic down the line.

Mahendra

huseyinfiliz One more issue pop up actually, after login.... icon and user name is in black color, Can I do those also white? with css.

huseyinfiliz

Anomalum yes, we can certainly use the span. CSS provides a very advanced filtering mechanism. Also, to suppress potential issues that may arise with other plugins and themes in the future, !important should always be used in "custom CSS". This issue has been mentioned many times before. While one might advise avoiding AI or internet sources, this is not a valid argument when it comes to "custom CSS".

Mahendra where is login icon?

Anomalum

Mahendra
This resource might be helpful for you.

Edit: For the header username alone, try:

.Header-secondary .username {                   /*(OPEN) HEADER USERNAME (SELECTOR)*/
    color: #fff;                             /*SET TEXT/ICON COLOR*/
}                                              /*(CLOSE) HEADER USERNAME (SELECTOR)*/

Mahendra

Anomalum This work out. Thanks 💓

Mahendra

huseyinfiliz It working fine right now.

Anomalum

huseyinfiliz Thanks, I'll definitely have a go at using span asap.

However on the matter of !important, it may be prudent to reconsider your current stance.

Mahendra

This is forum link https://wamotors.community/

Subarist

Mahendra
It's rare to see such a pleasant color scheme for a light theme. Well done!

huseyinfiliz

Anomalum I don't think there's any need for a long explanation on this, but in short; we’re not writing CSS code for a project here. Custom CSS actually allows us to do the very things that are considered bad practice in the article you shared. I'm not sure how long you've been working with CSS, but I was using CSS code even before HTML5 and CSS3.

In short, "custom CSS" is exactly the place where you would need to use !important. However, if you ever plan to write an extension or theme for Flarum, you should avoid using it there.

Anomalum

huseyinfiliz No worries mate.

Mahendra

Subarist Thanks