WordPress.org

Ready to get started?Download WordPress

Forums

P2
[resolved] P2 styles clashing with MEJS media player (7 posts)

  1. Manuel Schmalstieg
    Member
    Posted 4 months ago #

    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.

  2. Manuel Schmalstieg
    Member
    Posted 4 months ago #

    If you want to see how funny it looks :

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

  3. Manuel Schmalstieg
    Member
    Posted 4 months ago #

    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;
    }
  4. Thanks for the report and for providing your workaround. I've filed this bug with our developers for consideration in a future theme update.

  5. Lance Willett
    Themer
    Posted 2 months ago #

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

  6. 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.

  7. Manuel Schmalstieg
    Member
    Posted 2 weeks ago #

    Cool! Thanks for the notification :)

Reply

You must log in to post.

About this Theme

About this Topic