custom play/pause buttons

Resolved mtm
(@flatpack-music)

10 years ago

hi, this plugin is great, simple and versatile, thank you.

i really need to customise the play/pause button so that it will fit the design of the site i am working on though – ideally without adapting the plugin’s core files but instead by over-riding the CSS if possible, so that my client can still update their plugins as usual.

so far i am running into the following issues:
1. the CSS in the plugin’s files has the !important tag appended to many calls, so this rules out using !important to create new rules in the theme’s stylesheet
2. even when experimenting with adapting the CSS within the plugin i am seeing an empty space where the new button should be

any help with this would be very much appreciated, thank you.

https://ww.wp.xz.cn/plugins/compact-wp-audio-player/

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Contributor mbrsolution
(@mbrsolution)

10 years ago

Hi, can you share your URL? Can you also share what exactly are you trying to customize with the play and pause buttons?

You might find the following documentation helpful.
Thread Starter mtm
(@flatpack-music)

10 years ago
thank you for the response. i did make use of that resource while getting it working as i have now. if you visit my dev site you’ll see the player working exactly as i want at the bottom of the main image on screen:

http://wpb.matmartin.co.uk/

the issue is that to make this happen i have had to edit the player.css file and add images to the compact-wp-audio-player/image/ directory in the plugin directory, meaning that the plugin cannot now be updated without losing the following customisation:
```
.sc_player_container1 .myButton_play {
    background: transparent url(../image/icon-pl.png) no-repeat !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    background-size: contain !important;
    opacity: 0.7;
    display: inline-block;
}
.sc_player_container1 .myButton_play:hover {
	opacity: 0.9;
}
.sc_player_container1 .myButton_stop {
    background: transparent url(../image/icon-pause.png) no-repeat !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    border: none !important;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    background-size: contain !important;
    opacity: 0.7;
    display: inline-block;
}
.sc_player_container1 .myButton_stop:hover {
	opacity: 0.9;
}
```
is it possible to create a css file which overrides player.css, or to somehow add these changes to the theme’s css file and have them override player.css, and will the images i added to the /image/ directory be deleted too if an update is performed?

thanks.
Plugin Contributor mbrsolution
(@mbrsolution)

10 years ago

Hi the custom css illustrated above can be saved using a plugin or if your theme has this feature available or you are using a child theme. However the image in the image folder will be lost when ever you update the plugin in the future.

Regards

Thread Starter mtm
(@flatpack-music)

10 years ago

thank you for the response. i’ve got it doing exactly what i want now (http://wpb.matmartin.co.uk/voice-work/) so i guess the solution is simply to back up the CSS and be careful with updates.

again, some lovely functionality here – the disable multiple players at once feature is a nice touch!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘custom play/pause buttons’ is closed to new replies.