Product:
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
- Upload your images to your web server and get the full absolute URL address of each image.
- 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.
- 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
- In the plugin, step 3, Options tab, Skin Options, change the value of Width to 90.
- 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: