Product

Wonder Audio Player

Tutorial

This tutorial will guide you how to use Custom CSS code to customise the volume control bar of audio players created with Wonder Audio Player plugin.

Please note, on mobile and tablet devices, volume can not be controlled by JavaScript in webpage, so the volume button is removed from players on these devices. This tutorial only works for desktop audio players.

By default, the volume control bar of the audio player is as follows (place your mouse over the volume button to view the volume bar):

To customise the volume bar, in Wonder Audio Player, edit the player, in step 3 Options tab, Advanced Options, Custom CSS input box, add the following code:

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-volume-bar-adjust-active {
  background-color: #007cba !important;
}

#wonderpluginaudio-AUDIOPLAYERID .amazingaudioplayer-volume-bar {
  width: 6px !important;
  height: 48px !important;
  padding: 2px !important;
  left: 8px !important;
}

The created player is as follows:

In the above CSS code, the following line in the first paragraph changes the highlight colour of the volume bar.

background-color: #007cba !important;

The following lines change the width, height, the padding around the highlighted volume bar and the left position compared to the volume bar:

width: 6px !important;
height: 48px !important;
padding: 2px !important;
left: 8px !important;