Product:

WonderPlugin Audio Player

Question:

I am using the skin "Three Buttons" for my audio player, but the buttons are very small. How could I change the design to use some big buttons?

Answer:

The buttons are actually images, you can create your own images and use them in the plugin.

Step 1 - Create your own play/pause and previous/next images

The play/pause buttons are defined in one image, with the bottom line as the image of the hover over state. For example, the following is as an example of the play/pause image of 90px.

The following is the previous/next image of 90px.

Step 2 - Change the buttons in the player

1. Upload your images to your web server and get the full absolute URL address of each image.
2. In the player, step 2, select the skin "Three Buttons", in step 3, Options tab, "Player Control", select the option "Play/pause button image" -> "Use own image (absolute URL required)", enter the absolute URL address of your own play/pause image, change the following width and height to 90.
3. In the same option panel, select the option "Previous/next button image" -> "Use own image (absolute URL required)", enter the absolute URL address of your own previous/next image, change the following width and height to 90.

Step 3 - Change the relevant size in the player

1. In the plugin, step 3, Options tab, Skin Options, change the value of Width to 90.
2. In the plugin, step 3, Options tab, find the following CSS, and change the red code.

#amazingaudioplayer-AUDIOPLAYERID {
	box-sizing: content-box;
	padding-right: 180px;
}

And:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-playpause {
	float: left;
	margin-left: 90px;
}

And:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-next {
	position: relative;
	margin-left: 180px;
}

The following is the player created with the above images: