WordPress.org

Make WordPress Core

Opened 7 years ago

Last modified 2 months ago

#26691 new enhancement

Admin Color Schemes: generic classes for colors

Reported by: coolmann Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: needs-patch
Focuses: ui, css Cc:

Description

Our team is trying to adapt our plugin to the new admin color schemes. It would be great if we could have generic CSS class declarations that allow us to apply the current scheme's background/text colors to our elements.

Something like

.admin-color-flat .sidebar-background-color{ background-color: #.... }
.admin-color-vineyard .sidebar-background-color{ background-color: #.... }

This would allow plugin developers to leverage those schemes without having to reinvent the wheel every time, and would make their plugins adapt to any third-party color scheme people may be using on their site.

WordPress already adds the current color schema class to the body tag. But then I don't see anything in the CSS that I could use to recycle, let's say, the admin sidebar current background color and use it as the
background color for my metabox headers. Yes, I could do this in jQuery, but I was hoping for a pure CSS approach.

Change History (14)

#1 @sabreuse
7 years ago

See wp-admin/css/colors.css at lines 49+:

* Helper classes for plugins to leverage the active WordPress color scheme */

#2 @SergeyBiryukov
7 years ago

  • Component changed from Appearance to Administration
  • Keywords ui-focus added

#3 @coolmann
7 years ago

  • Component changed from Administration to Appearance
  • Keywords ui-focus removed

Thank you, Sabreuse, for pointing me into the right direction. However I see that other classes could still be added. The following could be added:

#adminmenu .wp-has-current-submenu .wp-submenu -> .wp-ui-submenu
#adminmenu .wp-has-current-submenu .wp-submenu a -> .wp-ui-submenu a
#adminmenu .wp-submenu a:hover -> .wp-ui-submenu a:hover

However what you provided is already a good start! Thank you.

#4 @SergeyBiryukov
7 years ago

  • Component changed from Appearance to Administration
  • Keywords ui-focus added
  • Type changed from feature request to enhancement

#5 @jdgrimes
7 years ago

  • Cc jdg@… added

#6 @coolmann
7 years ago

Adding more as I find them:

.plugins .active th.check-column -> .plugins-active

#7 @dd32
7 years ago

I've also run into this recently..

The easy-access classes are good for what they cover, but they unfortunately don't cover very much, and it's impossible to use them with :hover for menu's and the like without resorting to slow JS.

Without defining half a dozen classes per colour variable I'm not sure how best to target this though..

#10 @chriscct7
5 years ago

  • Keywords needs-patch added

#11 @garrett-eclipse
10 months ago

  • Focuses css added

#12 @netweb
3 months ago

  • Milestone set to Future Release

Not sure how the milestone was removed here, adding it back to future-release

#13 follow-up: @garrett-eclipse
2 months ago

Hmm seems the two you remilestoned there @netweb were just previously updated by me to add the css focus. If I see that again will open a meta ticket.

#14 in reply to: ↑ 13 @netweb
2 months ago

Replying to garrett-eclipse:

Hmm seems the two you remilestoned there @netweb were just previously updated by me to add the css focus. If I see that again will open a meta ticket.

That I did, I was doing a quick triage of the CSS focus, this ticket and a couple of others had no milestone, it was blank, so I added back to the milestone I thought best suited the ticket

Edit: This was the report view I was using, so it was weird seeing tickets in this view without a milestone https://core.trac.wordpress.org/report/30?FOCUS=css

Last edited 2 months ago by netweb (previous) (diff)
Note: See TracTickets for help on using tickets.