conflict between Independent Publisher 2’s Style.css and Core WordPress style.cs

  • Unknown's avatar
    timothyhildred · Member ·

    Hi there, I’m just following up on my post in the seriously simple podcasting forum. Somehow when Independent Publisher theme is active I get blue squares over the play and volume buttons on the podcast player.
    https://wordpress.org/support/topic/buttons-on-player-look-weird-with-jetpack-also-on/

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    This isn’t really a conflict: all themes add their own styles that override the default styles built into WordPress itself; that’s the whole point of using themes :)

    If Indenpendent Publisher was applying its custom button styles to the Core audio player added via the Audio Block, that would be a bug. But the theme’s CSS doesn’t target the controls of the core Audio Block, as you can see here.

    https://d.pr/i/qyrNvo

    The button styles are being applied to the Seriously Simple Podcasting plugin’s audio player controls, though. So if there’s any conflict here, it’s between the theme and that specific plugin, not between the theme and WordPress Core.

    The reason the theme treats these two players differently is because they’ve implemented the controls differently: The Core Audio block uses the HTML <audio> tag, and that tag has a controls attribute that creates the control buttons, so the theme’s custom button styles don’t target those controls at all.

    The plugin’s audio player, on the other hand, uses individually defined <button> elements rather than the controls attribute, and on top of that, doesn’t explicitly style those buttons, so they’ll use whatever styling is declared in the theme, and only fall back to the Core styles if the theme doesn’t define custom styles.

    This isn’t a bug with the theme, and not something we can fix – it’s simply not possible for us to account for every way a plugin can use a particular HTML element and ensure that the theme styles don’t inadvertently affect that element in a way that interferes with how the plugin’s content displays. The onus here is on the plugin developer to ensure they explicitly add CSS styling for any elements their plugin adds to the page, as any theme could potentially be overriding core styles for any element, as I explained above.

    It would be possible to “fix” this using some custom CSS, but it looks like the buttons for that media player don’t even have id or class attributes assigned, making it tricky to even target them directly using CSS code.

    I was able to get the blue boxes to disappear using the following:

    .mejs-button > button {
  background: transparent;
  border: 0;
  padding: 0;
}

    But I can’t get the actual controls to appear. Please ask the plugin developer for the CSS you need to add for that.

  • Unknown's avatar
    timothyhildred · Member ·

    Thank you so much for your response.

    I can’t tell if you’re saying it’d be better to follow up in the Independent Publisher 2 forum or the Seriously Simple Podcasting forum.

  • kokkieh · Staff ·

    The issue is that the plugin doesn’t define explicit styles for their buttons, so please follow up in the plugin forum.

    This isn’t something we can fix from the theme’s end, as the theme overriding Core styles is expected in this case.

  • Unknown's avatar
    zaharchenkodev · Member ·

    Hello,

    I am an SSP plugin developer and would like to clarify the issue.

    For a compact player, used on the site, our plugin does not define any custom styling, it is entirely a core WP function loaded with the wp_audio_shortcode() function. So the problem is that the current theme styles override the player button styles and turn them into blue rectangles.

    Please see the screenshot: https://i.imgur.com/1oauXbs.png

  • Unknown's avatar
    timothyhildred · Member ·

    Thanks for your response @zaharchenkodev. Does that change anything @kokkieh?

  • Unknown's avatar
    rpsonowal · Member ·

    Hi @timothyhildred,

    Can you try this CSS rules by adding it to the additional CSS section:

    .mejs-button>button {
    background: transparent url(mejs-controls.svg)!important;
    border: 0!important;
    cursor: pointer!important;
    display: block!important;
    font-size: 0!important;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0!important;
    position: absolute;
    text-decoration: none!important;
    width: 20px;
}
.mejs-container, .mejs-container * {
    box-sizing: border-box!important;
}

    Let us know if it helps!

  • kokkieh · Staff ·

    Hi @zaharchenkodev

    Thanks for weighing in :)

    So the problem is that the current theme styles override the player button styles and turn them into blue rectangles.

    I understand that this is what’s happening, yes. But as far as the theme’s concerned, it’s intentional. The theme’s CSS is simply targeting the <button> element, so the theme’s CSS will be applied to any HTML button, unless more specific CSS exists for a particular button.

    There isn’t more specific CSS in the Core stylesheets, so to override the theme’s CSS will require either custom CSS code added by the site owner, or for the plugin to add its own styling for the buttons.

  • Unknown's avatar
    timothyhildred · Member ·

    Hey there, thanks for the custom css to try. I’ve added it, and while it gets rid of the big blue squares, now there are no images on the buttons at all. The buttons still work, but with that CSS you just gotta guess where the play button probably would be.

  • kokkieh · Staff ·

    Hello again :)

    I ran into the same issue, yes, as mentioned in my initial reply here.

    I’m afraid I don’t know what Core styles are used to create those controls for the legacy audio player the plugin uses, so I’m not able to see exactly how the theme’s styles are overriding then and I haven’t been able to figure out the CSS to use to restore those.

    From what I can see, the line background: transparent url(mejs-controls.svg); in the code @rpsonowal provided above should add those back, but I can’t find any combination of color and background color declaration that makes them visible.

    Someone in the WordPress.org forums might have more knowledge on how exactly this audio player works, so perhaps try asking there as well:

    https://wordpress.org/support/forums/

  • The topic ‘conflict between Independent Publisher 2’s Style.css and Core WordPress style.cs’ is closed to new replies.