Board Thread:Support Requests - Getting Technical/@comment-9927972-20140722144934/@comment-452-20140722163908

I lied about giving up on a way to pick any color.

Here's how to do it:

 You can replace "cyan" with anything.
 * HTML

.ogg_player_recolor .ogg_player, .ogg_player_recolor .ogg_player div, .ogg_player_recolor audio, .ogg_player_recolor { display:inline; } .ogg_player_recolor .ogg_player, .ogg_player_recolor .ogg_player div, .ogg_player_recolor .ogg_player>div>button, .ogg_player_recolor audio { background: inherit; } .ogg_player_recolor audio { vertical-align: top; border-radius: 0; } .ogg_player_recolor .ogg_player div+div { position: absolute; background: none; } .ogg_player_recolor .ogg_player .ogg-player-options { background: white; }
 * CSS

The one tiny problem I was not able to get rid of was that when you play the file, there was a little bit of the background visible outside of the lines, so I took away the rounded edges when playing.

And if you want to change the background of the player itself as well: (This probably only works in Chrome.) audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { background: inherit; }

edit: It works absolutely fine on it's own, but there are some "side-effects" in some cases.

To avoid the info button inheriting the same background colour, I used position: absolute;, but this causes the info button to be ignored by other elements, so text which immediately follows the audio player will be under the info button, and when the audio is in a template or another box, it will overlap.

The position: absolute; also has the handy effect of turning the "more info" box into a popup, so I was planning on using that myself, but I've been unable to resolve the side-effects.