Buttons’ color by clicking on them

Hi,
Can you explain what do you mean by clicking? Do you want a different color when clicked to stay persistent or just the hover color?

Thank you.
I was not clear, I talked about the hover color which is pink by default for some buttons.

Here is a example for the HOVER color for NEXT button:
https://ibb.co/3YY69Py
Have a nice day,
Beno?t

• This reply was modified 4 years, 7 months ago by skytrancer.

Hi @skytrancer
Add this

.ai-wrap .ai-audio-control:hover {
    background: green!important;
}
.ai-wrap .ai-btn:hover {
    color: yellow!important;
    background: blue!important;
}
.ai-wrap .ai-btn:hover svg {
    fill: yellow!important;
}

in your custom CSS box under Customize-?Additional CSS

Let me know if this worked for you.

Yes it works well, it contains just one line who has no effect on my player but all buttons that had pink color hover are working well with your css!!
Thank you so much

That’s great. Glad I could help. If you need additional help with anything, feel free to get in touch and I will be there for you within 24 hours.

Also, we’d really appreciate if you could you take a minute and rate our plugin at https://www.ads-software.com/support/plugin/audioigniter/reviews/

Can you help me with this too?

I am using your Chords Theme and I would like the player to be green like the theme.

https://prnt.sc/twzhu0

This is the colour: #096B70

The instruction you gave to Skytrancer: “in your custom CSS box under Customize-?Additional CSS”

Is that this location: https://prnt.sc/twzjwx

Thank you.

Hi @dankje70
Thank you for using AudioIgniter.
Yes this is the location you will need to add it like this

.ai-wrap .ai-audio-control:hover {
    background: #096B70!important;
}
.ai-wrap .ai-btn:hover {
    color: #096B70!important;
    background: #096B70!important;
}
.ai-wrap .ai-btn:hover svg {
    fill: #096B70!important;
}

Let me know if this worked for you.

Hi thanks for this. Sadly it didn’t work.

https://prnt.sc/txn4bp you can see on the right bottom what happened when i hover above that square. The symbol disappears and the square turns green. In the plugin only the symbol changes color. the square stays the same.

https://prnt.sc/txmvtu this is the original. Al I want is everything that is purple to be green. Nothing needs to change further. Exchange purple for green in the whole plugin.

Any easy way to do that?

Please let me know.

Hi @dankje70
This will work

.ai-wrap .ai-track:hover, .ai-wrap .ai-track.ai-track-active,.ai-wrap .ai-volume-bar.ai-volume-bar-active::before,.ai-wrap .ai-track-progress {
    background: #096B70!important;
}
.ai-wrap .ai-btn:hover,.ai-wrap .ai-audio-control {
    color: #096B70!important;
    background: #096B70!important;
}
.ai-wrap .ai-btn:hover svg {
    fill: #fff!important;
}