Admin Menu in Your Brand Colors
Recolors the admin sidebar menu and admin bar with your brand colors, set as a few SCSS variables at the top.
Opens WPIDE on
Code
// Brand colors.
$menu-bg: #1d2b3a;
$menu-text: #e6edf3;
$accent: #ff6b35;
#adminmenuback,
#adminmenuwrap,
#adminmenu,
#wpadminbar {
background: $menu-bg;
}
#adminmenu a,
#adminmenu div.wp-menu-image::before,
#wpadminbar .ab-item,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
color: $menu-text;
}
#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
background: darken($menu-bg, 5%);
}
#adminmenu li.menu-top:hover,
#adminmenu li > a.menu-top:focus,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
background: $accent;
color: #fff;
}
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
background: $accent;
}Notes
Works best with the Default admin color scheme selected in each user profile.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.