Previous to WP 3.8 the branding admin bar could be used

Hi
Previous to WP 3.8 the branding admin bar could be used with other hacks to get an exact look that you wanted, since WP 3.8 however the hacks for making the admin bar look however you want do longer work.
This would not be so much of an issue if the admin bar supported admin color schemes, but it only supports those when you are in teh admin area, if you have the admin always visible it always just uses the default color scheme.
Any ideas how to work round this issue ?

  • Jack Kitterhing

    Hi there @flexi_mcnoodle,

    Hope you're well today, You could maybe use Ultimate Branding's custom admin css part, along with the following css

    #wpadminbar {
        background: none repeat scroll 0 0 #222222;
        color: #CCCCCC;
        direction: ltr;
        font: 400 13px/32px "Open Sans",sans-serif;
        height: 32px;
        left: 0;
        min-width: 600px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 99999;
    }

    And change that as needed?

    Here's the codex on creating custom admin themes http://codex.wordpress.org/Creating_Admin_Themes :slight_smile:

    Would any of that work for you?

    Thanks!

    Kind Regards
    Jack.

  • Flexinoodle
    /*
     * Change the Admin Bar Color Scheme
     */
    function change_adminbar_colors() {
    	$change_adminbar_colors = '<style type="text/css">
    		#wpadminbar *, #wpadminbar{ color:#928197;text-shadow:#444444 0 -1px 0; }
    		#wpadminbar{
    			background-color:#928197;
    			background-image:-ms-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-moz-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-o-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#56465D),to(#56465D));
    			background-image:-webkit-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:linear-gradient(bottom,#56465D,#56465D 5px);
    		}
    	        /* menu separators */
    		#wpadminbar .quicklinks>ul>li{border-right:1px solid #100118;}
    		#wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-empty-item{border-right:1px solid #100118;}
    		#wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid #100118;}
    		#wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-empty-item{border-left:1px solid #100118;}
    
    		/* 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:#000000;color:#FFFFFF;}
    		#wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{color:#000000;}
    		#wpadminbar .menupop.hover .ab-label{color:#000000;}
    		/* 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:#000000;
    			background-color:##56465D;
    			background-image:-ms-linear-gradient(bottom,#56465D,#56465D);
    			background-image:-moz-linear-gradient(bottom,#56465D,#56465D);
    			background-image:-o-linear-gradient(bottom,#56465D,#56465D);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#56465D),to(#56465D));
    			background-image:-webkit-linear-gradient(bottom,#56465D,#56465D);
    			background-image:linear-gradient(bottom,#56465D,#56465D);
    		}
    		/* hover bar 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:#56465D;}
    		/* menu item non-link colors */
    		#wpadminbar .ab-submenu .ab-item{color:#56465D;}
    		/* Text color */
    		#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:#FFFFFF;} //menu text
    		/* 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:#000000;}
    		/* update menu colors */
    		#wpadminbar .quicklinks a span#ab-updates{background:#56465D;color:#56465D;}
    		#wpadminbar .quicklinks a:hover span#ab-updates{background:#56465D;color:#56465D;}
    		/* howdy menu */
    		#wpadminbar .ab-top-secondary{
    			background-color:#000000;
    			background-image:-ms-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-moz-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-o-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:-webkit-gradient(linear,left bottom,left top,from(#56465D),to(#56465D));
    			background-image:-webkit-linear-gradient(bottom,#56465D,#56465D 5px);
    			background-image:linear-gradient(bottom,#56465D,#56465D 5px);
    		}
    		/* Howdy menu, username text color in dropdown */
    		#wpadminbar #wp-admin-bar-user-info .display-name{color:#56465D;}
    		#wpadminbar #wp-admin-bar-user-info .username{color:#56465D;}
    		/* search */
    		#wpadminbar #adminbarsearch .adminbar-input{color:#56465D;text-shadow:#56465D 0 -1px 0;background-color:rgba(86,70,93,255);}
    		#wpadminbar #adminbarsearch .adminbar-input:focus{color:#56465D;text-shadow:0 1px 0 #fff;background-color:rgba(130,123,130,255);}
    		#wpadminbar.ie8 #adminbarsearch .adminbar-input{background-color:#56465D;}
    		#wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{background-color:#56465D;}
    		#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder{color:#56465D;}
    		#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder{color:#56465D;}
    	</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' );
    }

    I created a plugin and used this old hack i used on a previous site, but unfortunately the 3.8 admin bar no longer works with these hacks, the background can be changed yes, but not the menus or text

    I am guessing the class names have changed, but i am unsure where to look in the 3.8 install to rectify this.

  • Flexinoodle
    /*admin bar text*/
    #wpadminbar .quicklinks a,#wpadminbar .shortlink-input {
    color:#939393!important;
    text-shadow:#939393 0 0px 0!important;
    }
    
    #wpadminbar .quicklinks a:hover,#wpadminbar .shortlink-input:hover {
    color:#79697E!important;
    text-shadow:false 0 0px 0!important;
    }

    I have managed to color the text as needed with that, now i just need to work out how to do the drop down menus and i can then use the background coloring :wink:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.