Help with CSS Code styling

[cdhimit]

Hi

Anyone care to share a CSS Code snippet to change the color of ‘Collapse btn - [+] Show all timings’ from Black to White ?

Demo screenshot

Screenshot

My project screenshot

Screenshot

Since I have changed the Elementor section B/G colour from black to white, the ‘collapse button’ is hidden.

Below is the screenshot of the browser inspect console in order to formulate the CSS Code snippet.

Thanks in Advance.

[m_hutley]

Well, first thing i’d do is find out what’s turning the text black.

Expand your style panel over there on the right, and look for any rule defining the color of the element.
(If there is none, you just define a rule for the specific element; if there is one, change or overwrite it.)

[cdhimit]

Here’s another screenshot showing the right style panel.

Does the screenshot reveal the info you’re looking for ?

I have absolutely no idea how to write a CSS code snippet.

[DaveMaxwell]

It’s the bg-no on the button which is causing you the problem. That’s setting a transparent background on the button. Remove it.

The btn-light should have a background and foreground color attached to it. If that’s not the look you’re going, change the btn-light to btn-dark.

[cdhimit]

Hi Dave

Unfortunately, the Elementor section does not a setting to change the color of the ‘Collapse btn’, hence the post requesting for a CSS code.

Thanks for sharing your comments though.

[rpg_digital]

It’s a really hacky way of having to do things, but I think what you need to look at is specificity.

Specificity - CSS: Cascading Style Sheets | MDN

For example with these two rules

.open-hours .today-hrs button {
    color: blue;
}

.today-hrs button {
    color: red;
}

The color of the text on the button will be blue not red. Even though it appears to be over-written by the second rule, it is more specific and holds more weight.

It’s difficult to give you the answer without playing with it hands on, but I would actually try adding that first rule.

.open-hours .today-hrs button {
    color: white;
}

If that fails try using an !important tag.

.open-hours .today-hrs button {
    color: white!important;
}

If it works with an !important tag then you know you need an even higher specificity. Ideally you should be able to find the exact rule that is setting the text to dark. (It is the text you are talking about?). My first thought is the class ‘btn-light’.

Note Dave is talking about the background-color, so I may have the wrong end of the stick, but I still think the solution is probably to add a more specific rule. That’s if this can’t just be fixed in elementor’s ui.

[cdhimit]

This worked.

.open-hours .today-hrs button {
    color: white;
}

Thanks !

[cdhimit]

Thank you all for taking the time to fix my problem.