Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#27516 closed enhancement (fixed)

Re-style Audio/Video players in the admin

Reported by: celloexpressions's profile celloexpressions Owned by: wonderboymusic's profile wonderboymusic
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.8
Component: Media Keywords: has-patch
Focuses: ui Cc:

Description

The audio & video players' skins need to be updated to match the WordPress 3.8 redesign. We have two options: change the defaults for all players (effects the front-end also) or override our defaults in the admin.

We could potentially do some cool things with the colorschemes here, perhaps like Twenty Fourteen did and the Fourteen Colors plugin does. We could also replace the icons with Dashicons for flexibility (see also #26469). At a minimum, we should remove the orange color and update the blue.

These players are more visible in the admin in 3.9 with the addition of audio and video to the media editing modal. This should be fairly straightforward, as the players are easily styled with CSS, but we need to decide where to make the changes first.

Attachments (2)

27516.global.diff (1.5 KB) - added by celloexpressions 10 years ago.
Cleaner global MediaElement styling, inspired by Twenty Thirteen and Fourteen's overrides, and using the WordPress 3.8+ design aesthetic and colors.
27516.global.png (1.4 KB) - added by celloexpressions 10 years ago.

Download all attachments as: .zip

Change History (9)

#1 follow-up: @wonderboymusic
10 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9

Those colors were chosen because they are the official WP school colors. Global overrides for MediaElement take place in wp-mediaelement.css. So, once you update there, they are updated everywhere. Themes can subsequently override those in their own CSS.

If this happens soon, 3.9, otherwise next time.

#2 in reply to: ↑ 1 @celloexpressions
10 years ago

Replying to wonderboymusic:

Those colors were chosen because they are the official WP school colors.

Were the official colors :)

The minimum thing to do would be to swap out those colors in the global styles. We could also flatten the global styles a bit, like Twenty Thirteen and Fourteen do (#25209) without worrying about compatibility, but that's obviously a subjective choice. The question is: does the flatter look work better for the majority sites/themes currently in use? Themes can (and should) override the defaults, but the defaults should look good on as many sites as possible. I'd vote for flattening.

In addition to that change, though, the players should definitely be flattened in the admin, and the colors could also potentially be tied to the admin menu colors. As part of that flattening, we could replace the icons with Dashicons for consistency. Since themes can re-style the players anyway, causing inconsistencies between front- and back-end, I don't see a reason that they shouldn't match the admin in the admin. If we did this, it would be a matter of updating whichever global styles we want to for front-end, then doing the rest in probably wp-admin/css/media.css. Essentially, this is about having different styles for the front-end defaults and the back-end.

Once we figure out the scope I can put together patches & screenshots with specific proposed changes.

#3 @helen
10 years ago

  • Milestone changed from 3.9 to Future Release

Yeah, no, not happening for 3.9.

@celloexpressions
10 years ago

Cleaner global MediaElement styling, inspired by Twenty Thirteen and Fourteen's overrides, and using the WordPress 3.8+ design aesthetic and colors.

#4 @celloexpressions
10 years ago

  • Keywords has-patch added; needs-patch removed

27516.global.diff proposes new default styling for MediaElement players, most importantly using the new WordPress colors.

With or without this, we can also override the default styles in the admin to make the players feel more at home, utilizing the admin color schemes and Dashicons. The Fourteen Colors plugin's implementation of #26469 provides inspiration for this. I'll look at this for core soon, but in the meantime it would require new Dashicons, which I've requested on #27844.

#5 @wonderboymusic
10 years ago

  • Milestone changed from Future Release to 4.0

#6 @wonderboymusic
10 years ago

The flatness looks a lot better - I am not a huge fan of the MEjs default styles, have seen some players in the wild that look lamer with them.

Gonna drop this in

#7 @wonderboymusic
10 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

In 28365:

Update the default (WP-defined) styles for MediaElement players to be more in-line with our flat aesthetic. Use the new official colors.

Props celloexpressions.
Fixes #27516.

Note: See TracTickets for help on using tickets.