Audio Controls

Support
#1

It appears that I have a conflict between the media plugin that I’m trying to use (SeriesEngine) and the theme settings for the audio controls. When I go to hutchfirstnaz.org/media and click on listen, there are audio controls that are covering the buttons.

I have contacted the plugin developer and he gave the following answer: “It looks like the stylesheet from your theme or another plugin is trying to override the styles for the audio element in Series Engine. You’ll want to have your web developer look for any styles trying to modify the audio element or things with a mess prefix.”

Thanks for any help you can provide!

#2

Hello,

Thank you for writing in!

You can try adding following CSS under the code below to X > Launch > Options > CSS

#seriesengine ul.enmse-player-tabs {
 padding-top: 54px !important;
}
#3

I have this same problem. I’ve tracked down where the problem is, but I can’t figure out how to implement a solution.

.mejs-time-rail {
width: calc(100% - 30px) !important;
padding: 10px 10px 0;
}

If I disable that width command through the inspector then it displays as it should. I just don’t know how to disable that one line on a single page. I don’t want to change it globally.

#4

Hey @pixelsandfrets,

If you have CSS skills, you can inspect your site and see that the body has exclusive classes and you can replace the custom code like that:

.ExclusiveClass .mejs-time-rail {
 width: 100% !important;
}
#5

I have some CSS skill, but not a whole lot. I seem to know just enough to be dangerous. :slight_smile: I don’t quite follow you regarding the exclusive class. Here’s the page where I’m having the problem:

newsongsd.info/messages/

Since I couldn’t figure out how to disable that command on that single page I commented it out globally here:
wp-content/themes/pro/framework/css/dist/site/stacks/renew.css

I’m not really sure how this will affect other things globally, but it at least made this section of the site more functional.

#6

Hi again,

Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.page-id-445 #seriesengine .enmse-audio .mejs-container {
    width: calc(100% - 100px) !important;
    height: 35px !important;
}

Let us know how this goes!