Audio Player CSS Customization

[crosstownalliance]

Hi guys!

On this page: http://jeremygorham.com/concern-vs-personal-responsibility/, we’re trying to stylize the audio player (colors, fonts, padding, border, background, corner width of the audio player, basically everything), and are having a hard time trying to find the CSS ID for it. We tried:
.mejs-controls
.x-audio .x-audio-player

Would you be able to help us?

Also, it seems like the controls (play, stop, and the audio level), don’t seem to show up when their color is set to white. Would you know how to fix this?

Thanks so much for your help!

[rad]

Hi there,

Thanks for writing in.

The audio player uses Wordpress’ Media Element JS library and we only styled it a bit to match the theme and stack. You may install this plugin https://wordpress.org/plugins/media-player-style-kit/. But it may not work, it depends on the loading priority if that plugin’s custom CSS.

What part of the player you’re changing, I’m able to see the class name when using the Google chrome’s inspector. You could use that browser tool to inspect and get the classes you meant to change the style

And also, make sure to use !important (eg. color: #fff !important;) to make sure it’s prioritized than X’s player CSS.

Thanks!