How to change the color of the player progress bar and volume bar

Posted on by

Question:

I wonder how can I change the progress bar color and volume bar color of the audio player

Answer:

You need to change the CSS code.

In the application, Step 2 Skins dialog, CSS tab:

To change the progress bar color, change the value marked by red:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-progress-played {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #fcc500;
background-image: -ms-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -moz-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -o-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fede00), color-stop(1, #fcc500));
background-image: -webkit-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: linear-gradient(to bottom, #fede00 0%, #fcc500 100%);
}

To change the volume bar color, change the value marked by red:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-volume-bar-adjust-active {
background-color: #fcc500;
-webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
-moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
}