How to change the color of admin bar?

OK, the ultimate branding plugin is really nice and works good. One thing though, I would sure love to be able to change the color of the admin bar. Wondering why this is not an option? And since it is not an option, how can I manually do this?
Thanks!

    timstrifler

    Hi @Steveo

    Give this a try:

    /*
     * Change the Admin Bar Color Scheme
     */
    function change_adminbar_colors() {
    	$change_adminbar_colors = '<style type="text/css">
    		#wpadminbar *, #wpadminbar{ color:#ffffff;text-shadow:#444444 0 -1px 0; }
    		#wpadminbar{
    			background-color:#003399;
    			background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-o-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));
    			background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:linear-gradient(bottom,#000033,#003399 5px);
    		}
    		/* menu separators */
    		#wpadminbar .quicklinks>ul>li{border-right:1px solid #003399;}
    		#wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-empty-item{border-right:1px solid #000033;}
    		#wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid #000033;}
    		#wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-empty-item{border-left:1px solid #003399;}
    		/* menu hover color and hover link color */
    		#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item{background:#333333;color:#ffffff;}
    		#wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{color:#ffffff;}
    		#wpadminbar .menupop.hover .ab-label{color:#ffffff;}
    		/* menu, on mouse over hover colors */
    		#wpadminbar .ab-top-menu>li:hover>.ab-item,#wpadminbar .ab-top-menu>li.hover>.ab-item,#wpadminbar .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus{
    			color:#fafafa;
    			background-color:#000033;
    			background-image:-ms-linear-gradient(bottom,#003399,#000033);
    			background-image:-moz-linear-gradient(bottom,#003399,#000033);
    			background-image:-o-linear-gradient(bottom,#003399,#000033);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#003399),to(#003399));
    			background-image:-webkit-linear-gradient(bottom,#003399,#000033);
    			background-image:linear-gradient(bottom,#003399,#000033);
    		}
    		/* menu item links hover color */
    		#wpadminbar .menupop li:hover,#wpadminbar .menupop li.hover,#wpadminbar .quicklinks .menupop .ab-item:focus,#wpadminbar .quicklinks .ab-top-menu .menupop .ab-item:focus{background-color:#ccffcc;}
    		/* menu item non-link colors */
    		#wpadminbar .ab-submenu .ab-item{color:#333333;}
    		/* menu item link colors */
    		#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#0099cc;}
    		/* my sites hover color */
    		#wpadminbar .quicklinks .menupop .ab-sub-secondary>li:hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li.hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li .ab-item:focus{background-color:#dfdfdf;}
    		/* update menu colors */
    		#wpadminbar .quicklinks a span#ab-updates{background:#eeeeee;color:#333333;}
    		#wpadminbar .quicklinks a:hover span#ab-updates{background:#ffffff;color:#000000;}
    		/* howdy menu */
    		#wpadminbar .ab-top-secondary{
    			background-color:#003399;
    			background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-o-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));
    			background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);
    			background-image:linear-gradient(bottom,#000033,#003399 5px);
    		}
    		/* Howdy menu, username text color in dropdown */
    		#wpadminbar #wp-admin-bar-user-info .display-name{color:#333333;}
    		#wpadminbar #wp-admin-bar-user-info .username{color:#999999;}
    		/* search */
    		#wpadminbar #adminbarsearch .adminbar-input{color:#ccc;text-shadow:#444 0 -1px 0;background-color:rgba(255,255,255,0);}
    		#wpadminbar #adminbarsearch .adminbar-input:focus{color:#555;text-shadow:0 1px 0 #fff;background-color:rgba(255,255,255,0.9);}
    		#wpadminbar.ie8 #adminbarsearch .adminbar-input{background-color:#003399;}
    		#wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{background-color:#fff;}
    		#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder{color:#ddd;}
    		#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder{color:#ddd;}
    	</style>';
    	echo $change_adminbar_colors;
    }
    /* wp-admin area */
    if ( is_admin() ) {
    	add_action( 'admin_head', 'change_adminbar_colors' );
    }
    /* websites */
    if ( !is_admin() ) {
    	add_action( 'wp_head', 'change_adminbar_colors' );
    }

    Just paste this into your functions.php for your theme. If you paste this code exactly it will change your admin bar to blue. Play around with the color codes to get it just right. This tool can be helpful for finding colors.

    Steveo

    Hi guys,
    thanks for the help on this. I will give that code a try.

    One more question that is somewhat related:
    The main thing I use the admin bar is because on the right side - the "howdy" are, there is a link to your own profile page and if you are using buddypress there are additional links, like activity, messages, etc. My question is, is there any way to add that type of a widget to the main menu? I am using a theme that allows for sidebar widgets to the right side of the menu, and it would be awesome if there was a widget or some simple shortcodes or something that I can drop in there that would take that "howdy" section and place it in the main menu. If I was able to do that, I would be able to remove the admin bar since that is practically the only thing I would be using the admin bar for.

    Thanks!

    Steveo

    Thanks Brian,

    I couldn't find any good plugins to do that. It's kind of funny, it almost seems like a pretty basic thing to have on a social networking type of site.

    I'm using a theme that will allow me to use some php in a static block of content and then add that static block to either my header or even my menu. Would you happen to know what php code would be necessary to basically replicate that little "howdy" section from the admin bar?

    Thanks!