Styling adminbar

Firstly i would not recommend changing the core css files, as the moment u hit update for wordpress your file changes would be lost
use your themes function file

function link_to_stylesheet() {
?>
<style type=”text/css”>
#wpadminbar {background-color:#FFF;}
</style>
<?php
}
add_action(‘wp_head’, ‘link_to_stylesheet’);

?>

Hi robin

Thank you for your replay. I would still like to know how to change it in the core code

Why i am saying to use functions way is if u see i have used a add_action wp_head (that is for your front (user side)

and for your admin side add one more line
add_action( ‘admin_head’, ”link_to_stylesheet’ );
this is for admin side

as both use different hook to produce the top masthead

Thank you. I’ll take a copy of the css changes i made in wp-include/css/adminbar.scc and add them to your code. Thank you for your great answer.

I have another issue you maybe can help me with. I use buddyboss and there is a wall in it. To be able to comment a user needs to be friend to the user he/she want to comment to. Instead of using friends I want to use the buddypress-follow plugin. Is there anywhere I can replace the friends call with the follow call

Sorry you might have to use buddypress forum/help for that –

i do use buddypress on my mulitsite but i havnt used those plugins

Hey.

I use buddyboss child theme and I added the code you gave me to the function.php. But i still have a little issue with the backend style as it’s not showen propper. I made a screenshot of the different: https://klysner.com/pages/css/adminbar.png.

This is what i added:
function link_to_stylesheet() {
?>
<style type=”text/css”>#wpadminbar *{
height:auto;width:auto;margin:0;padding:0;position:static;text-transform:none;letter-spacing:normal;line-height:1;color:#000000;
font:normal 11px/37px Verdana, Geneva, sans-serif;}

#wpadminbar ul li:before,#wpadminbar ul li:after{
content:normal;}

#wpadminbar a,#wpadminbar a:hover,#wpadminbar a img,#wpadminbar a img:hover{
outline:0;:0;text-decoration:none;background:0}

#wpadminbar{
direction:ltr;height:40px;position:fixed;top:0;left:0;width:100%;min-width:600px;z-index:99999;background-image:url(../../wp-content/themes/buddyboss-child/gfx/nav_bg.png)}

#wpadminbar .ab-sub-wrapper,#wpadminbar ul,#wpadminbar ul li{
background:0;clear:none;list-style:none;margin:0;padding:0;position:relative;z-index:99999}

#wpadminbar .quicklinks{
height:37px;
border-left:1px solid transparent}

#wpadminbar .quicklinks ul{
text-align:left}

#wpadminbar li{
float:left}

#wpadminbar .ab-empty-item{
outline:0}

#wpadminbar .quicklinks>ul>li{
height:37px;
border-right:1px solid #E7E7E7}

#wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-empty-item{
height:37px;
border-right:1px solid #E7E7E}

#wpadminbar .quicklinks .ab-top-secondary>li{
height:37px;
border-left:1px solid #E7E7E7;border-right:0;float:right}
<!– Border right site–>
#wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-empty-item{
height:37px;
border-left:1px solid #E7E7E;border-right:0}

#wpadminbar .quicklinks a,#wpadminbar .quicklinks .ab-empty-item,#wpadminbar .shortlink-input{
height:37px;display:block;padding:0 12px;margin:0}

#wpadminbar .menupop .ab-sub-wrapper,#wpadminbar .shortlink-input{
margin:0 0 0 -1px;padding:0;-moz-box-shadow:0 4px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 4px 4px rgba(0,0,0,0.2);box-shadow:0 4px 4px rgba(0,0,0,0.2);background:#fff;display:none;position:absolute;float:none;border-width:0 1px 1px 1px;border-style:solid;border-color:#dfdfdf}

#wpadminbar.ie7 .menupop .ab-sub-wrapper,#wpadminbar.ie7 .shortlink-input{
top:40px;left:0}

#wpadminbar .ab-top-menu>.menupop>.ab-sub-wrapper{
min-width:100%}

#wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper{
right:0;left:auto;margin:0 -1px 0 0}

#wpadminbar .ab-sub-wrapper>.ab-submenu:first-child{
border-top:0}

#wpadminbar .ab-submenu{
padding:6px 0;border-top:1px solid #dfdfdf}

#wpadminbar .selected .shortlink-input{
display:block}

#wpadminbar .quicklinks .menupop ul li{
float:none}

#wpadminbar .quicklinks .menupop ul li a strong{
font-weight:bold}

#wpadminbar .quicklinks .menupop ul li .ab-item,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li .ab-item,#wpadminbar.nojs .quicklinks .menupop:hover ul li .ab-item,#wpadminbar .shortlink-input{
line-height:26px;height:26px;text-shadow:none;white-space:nowrap;min-width:140px}

#wpadminbar .shortlink-input{
width:200px}

#wpadminbar.nojs li:hover>.ab-sub-wrapper,#wpadminbar li.hover>.ab-sub-wrapper{
display:block}

#wpadminbar .menupop li:hover>.ab-sub-wrapper,#wpadminbar .menupop li.hover>.ab-sub-wrapper{
margin-left:100%;margin-top:-33px;border-width:1px}

#wpadminbar .ab-top-secondary .menupop li:hover>.ab-sub-wrapper,#wpadminbar .ab-top-secondary .menupop li.hover>.ab-sub-wrapper{
margin-left:0;left:inherit;right:100%}

<!– Change the hover effect here –>
#wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item{
background:#FCFCFC;text-shadow:none;border-right:#00C;border-left:#990}

<!–Text color in right side –>
#wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{
color:#fafafa}

#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:#eaf2fa}

#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:#21759b}

#wpadminbar .quicklinks .menupop ul.ab-sub-secondary{
display:block;position:relative;right:auto;margin:0;background:#eee;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}

#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}
#wpadminbar .quicklinks a span#ab-updates{background:#eee;color:#333;text-shadow:none;display:inline;padding:2px 5px;font-size:10px;font-weight:bold;-webkit-border-radius:10px;border-radius:10px}
#wpadminbar .quicklinks a:hover span#ab-updates{background:#fff;color:#000}

#wpadminbar .ab-top-secondary{
float:right;text-shadow:none;}

#wpadminbar ul li:last-child,#wpadminbar ul li:last-child .ab-item{border-right:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
#wp-admin-bar-my-account>ul{min-width:198px}#wp-admin-bar-my-account.with-avatar>ul{min-width:270px}
#wpadminbar #wp-admin-bar-user-actions>li{margin-left:16px;margin-right:16px}
#wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions>li{margin-left:88px}
#wp-admin-bar-user-actions>li>.ab-item{padding-left:8px}
#wpadminbar #wp-admin-bar-user-info{margin-top:6px;margin-bottom:15px;height:auto;background:0}
#wp-admin-bar-user-info .avatar{position:absolute;left:-72px;top:4px;width:64px;height:64px}
#wpadminbar #wp-admin-bar-user-info a{background:0;height:auto}#wpadminbar #wp-admin-bar-user-info span{background:0;padding:0;height:18px}
#wpadminbar #wp-admin-bar-user-info .display-name,#wpadminbar #wp-admin-bar-user-info .username{text-shadow:none;display:block}
#wpadminbar #wp-admin-bar-user-info .display-name{color:#333}#wpadminbar #wp-admin-bar-user-info .username{color:#999;font-size:11px}
#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar>a img
{width:30px;height:30px;padding:0;vertical-align:middle;margin:-7px 0 0 6px;float:none;display:inline; padding-top: 5px;}

</style>
<?php
}
add_action(‘wp_head’, ‘link_to_stylesheet’);
add_action( ‘admin_head’, ‘link_to_stylesheet’ );

I know its looks messy but Its from the main core and its working on the front. Why cant i change the back with it?

the only difference i can see is just the adminbar background color ?
and since you are using buddypress what i did with buddypress for my adminbar styling was i totally removed it and replaced it with wp admin bar

so it could be in ur case as well what happened for me was wp admin bar was overlapping in dashboard area so i used this code

<?php
/*
** The following removes BP admin bar and replaces it with the WP admin bar
*/

function remove_bp_adminbar(){
     remove_action( 'wp_footer', 'bp_core_admin_bar', 8 );
     remove_action( 'admin_footer', 'bp_core_admin_bar');
     show_admin_bar(true);
}
add_action('after_setup_theme','remove_bp_adminbar');
?>

i still cant see why u changed so many classes there were only 7 or 8 of them which would have done the trick.

These are the only two classes which i needed to change for the background color

#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;
}

But i have added it in both style and functions file (i have child theme for my buddypress

on the second look i think u extensively r using buddypress and u might not actually want to remove it, what u can try doing is giving your adminbar class a z-index