Audio Player color change

[LucyKeile]

Hey guys i am using the audio player on my record releases and would like to change the color.
Can you help me?

here is a screenshot of the current player

I would like the play button and the progress bar to be purple or anything else that could stand out a little more than what is there.

Thank you

[Prasant]

Hello Lucy,

Thanks for asking.

You can change the color of audio player from Control Colors section.

Having said that as you are asking question, I think you might be using classic audio player element. To change the color, please use following CSS under X/Pro > Theme Options > CSS:

.mejs-controls {
    background-color: #ddd;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[LucyKeile]

@Prasant

.mejs-controls {
background-color: #ddd;
}

thart code works for the background, I would like to leave the background the same color, like dark grey but what is in white I wanted to be #bc02d6, or maybe I could just add a border on the background.

[ruenel]

Hello @LucyKeile,

Please add #bc02d6 to the Time Progress option in the settings.

Please play around the other options in the settings till you can get the styling that you want.

Hope this helps.

[LucyKeile]

I can’t get to this window you have shared. I am using the element classic audio player. can you please guide me how to get to this?

[ruenel]

Hello @LucyKeile,

Thanks for clarifying.

To resolved your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.mejs-button button:hover, 
.mejs-button button:focus {
    color: #bc02d6;
}

.mejs-time-rail .mejs-time-current {
    background-color: #bc02d6;
}

The result would be like this:

We would loved to know if this has work for you. Thank you.

[LucyKeile]

@LucyKeile

.mejs-controls {
background-color: #ddd;
}

It did work, but because my background is black the player doesn’t stand out, so I wanted to have a purple border, just like on this image.

Also can you please tell me which element you use to be able to customize the audio player like you showed me on the response a few days back? I would like to know for future.

here is the look I am trying to achieve with the player.

[paul.r]

Hi,

You can add the border together with your background code.

eg.

.mejs-controls {
      border:2px solid #bc02d6;
      background-color: ##bc02d6;
}

Hope that helps

[LucyKeile]

exactly what I needed! Thank you!

[friech]

Hi Lucy,

@LucyKeile

Also can you please tell me which element you use to be able to customize the audio player like you showed me on the response a few days back? I would like to know for future.

That is the Audio element (not the classic), if you choose the Player audio type, you’ll get the Controls tab.

Hope it helps,
Cheers!