Rendering of Player's Buttons is Off

Hi gmgrim, thanks for helping out!

Do you have a link where I can preview that player? From what I can tell, it’s likely a conflict with the theme’s styles.

What happens is WordPress bundles MediaElement.js to handle the audio players in core. That script includes its own styles, WordPress adds styles of its own, then the theme adds more styles, which plugins like Cue can’t account for. I wrote “Considerations when Customizing MediaElement.js in WordPress” last year, which covers this issue and proposed a solution that themes can use to isolate their styles to prevent conflicts.

That probably won’t help you immediately, but you can share it with the developers of your theme to see if it’s something they’ll implement (if it is the problem). Otherwise, you’ll need to add a bunch of custom CSS to “reset” Cue’s styles by overriding the theme’s CSS.

If you have a link available. I can take a look and let you know where the conflict is coming from.

Cheers,
Brady

https://petfoxstudios.com/sample/

Thanks. It’s hard to tell, but that might be due to the minification plugin you’re using. Can you disable that and give it a shot?

I disabled the Better WordPress Minify and the Leverage Browser Caching Ninja plugins, cleared my cache, with no change.

Brady, I missed the first post! I had posted that link on a whim to show you how it was being affected.

I have custom CSS overriding the theme’s base CSS, but the theme deliberately made it’s classes X-Nav, X-Icon, etc… So that shouldn’t have touched Cue’s. Can I head into the plugin’s folder and copy the style into my global css override?

Haha, I thought that was a pretty fast response!

It looks like conflicts are coming from a plugin called “The Grid” and also from the theme. Copying the plugin’s CSS probably won’t help, so you’ll need to add some custom rules to override the conflicts. This CSS should get you most of the way there, but some other things will still likely need some tweaks:

.cue-skin-default.mejs-container .mejs-layers {
	height: auto;
	position: static;
	width: auto;
}

.cue-skin-default.mejs-container .mejs-controls {
	border-width: 0;
	box-shadow: none;
	height: auto !important;
}

.cue-skin-default.mejs-container .mejs-controls .mejs-horizontal-volume-slider {
	margin-top: 0;
}

I’m slightly concerned as to how easy it was for you to see that I use that plugin. Just by inspecting element w/ Chrome?

Good news for me is that that CSS did override any changes The Grid had made. The bad news is that it didn’t fix the AudioTheme.com logo. I’m okay with this. It’s fixed for me. But I don’t know if you want to address that… We get like 5 visitors a week.

Yeah, any style sheets or scripts on the frontend have the plugin directory in their URL, so in this case, I saw a style sheet being loaded from a plugin folder called “the-grid.” Otherwise, I don’t really know anything about that plugin.

Our logo looks like it’s displaying all right to me, but feel free to hide it with some extra CSS if you’d like.

– Brady