Modify colour of template 1 progress bar

Hi stigekalder try the following code.

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: none repeat scroll 0 0 #10ccb2;
}

Let me know if that helps you.

Regards

Hi,
I copied your code into my style.css and uploaded, but it does not change the blue colour of the progress bar.

Hi, is your style.css file being used by the player or your theme?

Does your theme allow for custom style to be added? If not then I suggest for you to use the following plugin. This plugin will allow you to add custom style without affecting your other styles.

Regards

Hi mbr,
My style.css is being used by the theme (I made a child theme of Spacious), because I have a few additions which works fine. But I don’t know if it is being used by your player ?
Spacious has a theme option for adding CSS, and I tried to include yours but it does not work.
I also have installed the plugin you suggest and included it, but that also does not work.

Okay, did you try to add the code to your child theme?

Yes that was the first thing I tried: Adding it to style.css of the child theme. Is that what you mean ?

Yes that is what I mean. It is very strange that neither the style.css, the theme custom code or the plugin works.

Let me check again, maybe I am giving you the wrong code.

Do you have a cache plugin? Did you delete the browser cache?

Do you have another media player installed?

Hi,
I really appreciate your efforts on this !
I don’t use any cache plugin or other audio player plugin.
I cleared all cache in IE on my home-pc and in Chrome on my work-pc, and the progress bar is still blue.
Best regards

Hi the file that has the code is

[https://www.detfynskekammerkor.dk/wp/wp-includes/js/mediaelement/wp-mediaelement.css?ver=4.0]

Notice the css file “wp-mediaelement.css?ver=4.0”.

I just carried another test and added the same code as above.

.mejs-controls .mejs-time-rail .mejs-time-current {
    background: none repeat scroll 0 0 #10ccb2;
}

It worked for me and I even tested all the players in the URL you provided in reply number 1.

I hope the above helps you further.

Regards

Waau, I added the code to the bottom of the css file you’ve located, and it works! Looks pretty cool with the same colour as the background colour of the theme.

Of course I am not too happy having to modify that file manually like this, but I guess I can live with that ??

Under which circumstances do you think that the addition could be overwritten ? By the next update of your plugin, or otherwise ?

Best regards !

Hi stigekalder that is good news ??

Although it is very strange that you have to add the code to the original file to make it work. Keep in mind that the moment the plugin is updated you will loose your changes.

If you don’t need any more help with this ticket, can you mark this support thread as resolved.

Thank you

Case closed ??

Thanks !

I have found that soemtimes it is necessary to add the !important statement to get precedence over the default CSS, as in:

body {
font-size: 20px !important;
}