Title: Styling adminbar
Last modified: August 20, 2016

---

# Styling adminbar

 *  [kristian86](https://wordpress.org/support/users/kristian86/)
 * (@kristian86)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/)
 * Hey.
 * I’m struggeling with styling the adminbar. For me its seems like the bar has 
   2 different css. One for the front-end and another one for the back-end. I edited
   in wp-includes/css/admin-bar.css and my styles works perfect on the front-end
   but when I go to my dashboard the adminbar use wordpress standard style. How 
   can it make change it so it works with the same style? There must be a refferenc
   or sth

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Robin](https://wordpress.org/support/users/cinghaman/)
 * (@cinghaman)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969488)
 * 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’);
 * ?>
 *  Thread Starter [kristian86](https://wordpress.org/support/users/kristian86/)
 * (@kristian86)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969640)
 * Hi robin
 * Thank you for your replay. I would still like to know how to change it in the
   core code
 *  [Robin](https://wordpress.org/support/users/cinghaman/)
 * (@cinghaman)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969659)
 * 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
 *  Thread Starter [kristian86](https://wordpress.org/support/users/kristian86/)
 * (@kristian86)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969661)
 * 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
 *  [Robin](https://wordpress.org/support/users/cinghaman/)
 * (@cinghaman)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969669)
 * Sorry you might have to use buddypress forum/help for that –
 * i do use buddypress on my mulitsite but i havnt used those plugins
 *  Thread Starter [kristian86](https://wordpress.org/support/users/kristian86/)
 * (@kristian86)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969688)
 * 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: [http://klysner.com/pages/css/adminbar.png](http://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?
 *  [Robin](https://wordpress.org/support/users/cinghaman/)
 * (@cinghaman)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969689)
 * 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
 *  [Robin](https://wordpress.org/support/users/cinghaman/)
 * (@cinghaman)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969690)
 * 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

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Styling adminbar’ is closed to new replies.

## Tags

 * [admin](https://wordpress.org/support/topic-tag/admin/)
 * [bar](https://wordpress.org/support/topic-tag/bar/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 8 replies
 * 2 participants
 * Last reply from: [Robin](https://wordpress.org/support/users/cinghaman/)
 * Last activity: [13 years, 9 months ago](https://wordpress.org/support/topic/styling-adminbar/#post-2969690)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics