0

I want to change the CSS background definition for #wpadminbar in the new WordPress 3.8 admin themes. I can (and have) updated the /wp-admin/css/colors/theme/colors.min.css file but wonder if there is a cleaner way? Is there a filter that I could use in functions.php to update this specific style?

I found this approach but it is a blunt instrument, replacing the entire CSS file:

http://wp-snippets.com/custom-admin-css/

If it matters, I find the single color for the top bar and left column visually odd so I've manually updated #wpadminbar to use the medium color shade assigned to the background of #adminmenu.wp-submenu style. That makes the top bar slightly darker than the left column.

Thanks for any ideas how I might do this more cleanly.

5

You can use the wp_add_inline_style() function to override styles in an already-enqueued stylesheet:

add_action( 'admin_enqueue_scripts', 'wpse127850_css_overrides' );
function wpse127850_css_overrides() {    
     wp_add_inline_style( 'color', '.mycolor { background: #ccc; }' );
}

You'll need to find the handle of the stylesheet you want to affect -- I've guessed at color but there's no guarantee I'm right.

References

Edited to answer questions from the comments

  1. The function name can be whatever you want -- it just has to match the 2nd parameter of the add_action() call.
  2. color is the CSS file's "handle" -- if you View Source of your admin page, you'll see that all the stylesheets are called like this:

    <link rel='stylesheet' 
     id='the-erudite-css' 
     href='http://example.com/wp-content/themes/the-erudite/css/erudite.css?ver=3.8'
     type='text/css' media='all' />
    

    The id part contains the CSS file's handle, followed by -css. So in my example, the handle is the-erudite.

  3. I know this because I went looking for this ability one day, and figured it out by a combination of Google and Codex searching. The WordPress Codex is a fantastic resource for any WordPress development you're trying to do. If you haven't yet, you should visit -- and probably bookmark -- it.
4
  • Brilliant, thank you! Is wpse127850_css_overrides() custom or required as a function name? And 'color' is the admin CSS file name minus the file extension? Appreciate the quick reply. And curious how you knew this... – FredHead Dec 28 '13 at 16:48
  • I've updated my answer with answers to your questions. (Also, if this solved your problem, please mark the answer as "Accepted" -- click the checkmark on the left.) – Pat J Dec 28 '13 at 18:53
  • Thanks for the extra detail. Also should help if someone else later on has the same question, too! – FredHead Dec 28 '13 at 23:47
  • Had to make two tweaks: function override_wpadminbar() { wp_add_inline_style( 'colors', '#wpadminbar { background: #627C83; }' ); } add_action( 'admin_enqueue_scripts', 'override_wpadminbar' ); The add_action line needed to end with semi-colon and, more interesting, while the WP 3.8 themes have specific names/folders (e.g. Ocean, Ectoplasm), you only can affect them by targeting the /colors folder that holds all the theme folders. Apparently you cannot target the #wpadminbar CSS background definition for the Ocean theme, only all themes. – FredHead Dec 29 '13 at 0:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.