You can customize WordPress admin bar. You can change its color, size and other style by adding some custom CSS. Generally this is done by adding a function to your theme’s function.php file. Second method includes editing siteroot-> wp-includes->css-> admin-bar.css file but I would not recommend you changing the core css files. As far I know there are no plugins available that allows you add custom color to wp admin bar. Here I am discussing another method which easily customizes your wp admin bar without disturbing anything on your site.
How I Did It ? I use Jetpack By WordPress.com. It allows you to add custom CSS to theme you are using. After activation you can add custom CSS from your Dashboard-> Appearance-> Edit CSS.
OR if you don’t use JetPack then, You may try using My Custom CSS which allows you to add custom CSS to your site’s themes and plugins. After activation it displays a new tab My Custom CSS on your dashboard’s sidebar.
So add your own custom CSS or try following CSS shared by Brightonmike on Styling WordPress Admin Bar. I have added some more code in the following CSS as it was not showing new background color on top-secondary section which is there before Howdy and Notification tab.
#wpadminbar {
background:rgb(226,226,226)!important;
background:-moz-linear-gradient(top,rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(226,226,226,1)),color-stop(50%,rgba(219,219,219,1)),color-stop(51%,rgba(209,209,209,1)),color-stop(100%,rgba(254,254,254,1)))!important;
background:-webkit-linear-gradient(top,rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
background:-o-linear-gradient(top,rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
background:-ms-linear-gradient(top,rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#e2e2e2′,endColorstr=’#fefefe’,GradientType=0)!important;
background:linear-gradient(top,rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%)!important;
-webkit-box-shadow:0 12px 40px #000000;
-moz-box-shadow:0 12px 40px #000000;
box-shadow:0 12px 40px #000000;
}#wpadminbar .quicklinks a,#wpadminbar .shortlink-input {
color:#111!important;
text-shadow:#c2c2c2 0 -1px 0!important;
}#wpadminbar .quicklinks a:hover,#wpadminbar .shortlink-input:hover {
color:#f0f0f0!important;
text-shadow:#222 0 -1px 0!important;
}#wpadminbar .ab-top-secondary {
background:rgb(226,226,226)!important;
}
Other Method:
If you like using theme hack then open your theme’s function.php file and add the following function with your custom CSS (CSS used in following function changes the background color of admin bar):
function link_to_stylesheet() {
?>
<style type=”text/css”>#wpadminbar
{
height:45px;
padding-top:5px;
background: #D4DCEA;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);}
#wpadminbar .ab-top-secondary
{
background: #D4DCEA;
}</style>
<?php
}
add_action(‘wp_head’, ‘link_to_stylesheet’);?>
You can add more CSS, it depends on what you want to change. You can take references from your main wp admin bar css file which is present in your site root directory’s wp-includes-> css-> admin-bar.css.