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!

  • Brian Purkiss
    • Smushie Pies

    It is not an option as the Ultimate Branding plugin is intended to brand the WordPress backend, not change the look and feel. There's other plugins and method for doing that.

    Manually doing this would require some CSS an PHP knowledge. You would need to add a hook to your theme's functions.php file and write the proper CSS to change the Admin Bar color.

  • timstrifler
    • The Incredible Code Injector

    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
    • Flash Drive

    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
    • Flash Drive

    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!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.