Support » Theme: P2 » P2 styles clashing with MEJS media player

  • The design of the MediaElementJS audio / video player, which is included by default with WordPress since 3.6, is “broken” by the button styling of the P2 theme’s CSS.

    To see the problem, simply insert an audio or video shortcode into one of your posts.

    If you view it in a compatible theme, such as Twentyfourteen, the media player looks fine.

    If you view it in P2, the player has some very weird, egg-shaped button styling. This happens because the CSS of P2 uses IDs as style selectors, like this:

    #wrapper button {
     ...
    }

    This code is overriding the audio player CSS, that uses classes:

    .mejs-controls .mejs-button button {
     ...
    }

    The best solution would be to refactor the P2 CSS, so that it relies on classes rather than IDs (classes are easier to override).

    The easy and unelegant solution is to duplicate the MEJS button styles and add them to the theme stylesheet, together with the offending ID.

Viewing 6 replies - 1 through 6 (of 6 total)
  • If you want to see how funny it looks :

    https://twitter.com/16kbit/status/454729484768653312

    Update: as far as I can see, here is what it takes for the audio player to make it look good in P2.

    Be sure to correct the file path for the SVG icon.

    /*---------------------------------------------------
    	Button Overrides
    ---------------------------------------------------*/
    
    #wrapper .mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 7px 5px;
    padding: 0;
    position: absolute;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent url(http://EXAMPLE.COM/wp-includes/js/mediaelement/controls.svg) no-repeat;
    }
    #wrapper .mejs-controls .mejs-pause button {
    background-position: 0 -16px;
    }
    #wrapper .mejs-controls .mejs-mute button {
    background-position: -16px -16px;
    }
    #wrapper .mejs-controls .mejs-unmute button {
    background-position: -16px 0;
    }
    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Thanks for the report and for providing your workaround. I’ve filed this bug with our developers for consideration in a future theme update.

    Lance Willett

    (@lancewillett)

    Themer

    Hi Manuel, thanks much for this bug report and the CSS to fix it. We’ve pushed the fix to the theme now. Cheers.

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Manuel – just wanted to let you know that your fix is now live in version 1.5.5 of p2. Thanks again for the report and the patch.

    Cool! Thanks for the notification 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘P2 styles clashing with MEJS media player’ is closed to new replies.