Make WordPress Core

Opened 7 years ago

Last modified 6 months ago

#26691 new enhancement

Admin Color Schemes: generic classes for colors

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


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 (11)

#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
6 months ago

  • Focuses css added
Note: See TracTickets for help on using tickets.