styling the admin bar

Hi, how can I style the admin bar? basically, change the colours and fonts?

  • HARALAMBOS

    Hi,

    I thought of using as template the css that edublogs.org is using, so I copied the following into my theme's style.css

    There was no change at all ! Am I missing something in the process?

    #wpadminbar *{height:auto;width:auto;margin:0;padding:0;position:static;text-transform:none;letter-spacing:normal;line-height:1;font:normal 13px/28px Arial,Helvetica,sans-serif;color:#ddd;text-shadow:#555 0 -1px 0;}#wpadminbar :before,#wpadminbar :after{content:normal;}#wpadminbar a,#wpadminbar a:hover,#wpadminbar a img,#wpadminbar a img:hover{outline:none;border:none;text-decoration:none;background:none;}#wpadminbar{direction:ltr;background-color:#777;background-image:-moz-linear-gradient(bottom,#666,#7f7f7f);background-image:-webkit-gradient(linear,left bottom,left top,from(#666),to(#7f7f7f));color:#ddd;font:normal 12px/28px Arial,Helvetica,sans-serif;height:28px;position:fixed;top:0;left:0;width:100%;z-index:99999;min-width:960px;}#wpadminbar ul,#wpadminbar ul li{background:none;list-style:none;margin:0;padding:0;position:relative;z-index:99999;}#wpadminbar .quicklinks ul{text-align:left;}#wpadminbar .quicklinks ul li{float:left;}#wpadminbar .quicklinks>ul>li>a{border-right:1px solid #686868;border-left:1px solid #808080;}#wpadminbar .quicklinks>ul>li:last-child>a{border-right:none;}#wpadminbar .quicklinks>ul>li:hover>a{border-left-color:#707070;}#wpadminbar .quicklinks a,#wpadminbar .shortlink-input{height:28px;display:block;padding:0 .85em;margin:0;}#wpadminbar .quicklinks a>span{line-height:28px;}#wpadminbar .quicklinks .menupop ul,#wpadminbar .shortlink-input{-moz-box-shadow:0 4px 8px rgba(0,0,0,0.1);-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.1);box-shadow:0 4px 8px rgba(0,0,0,0.1);background:#fff;background:rgba(255,255,255,0.97);display:none;position:absolute;border:1px solid #dfdfdf;border-top:none;float:none;}#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 a,#wpadminbar .quicklinks .menupop ul li a span,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .shortlink-input{color:#555;text-shadow:none;white-space:nowrap;min-width:140px;}#wpadminbar .shortlink-input{width:200px;}#wpadminbar .quicklinks .menupop ul li:hover>a,#wpadminbar .quicklinks .menupop ul li:hover>a span,#wpadminbar .quicklinks .menupop ul li:hover>a strong{color:#fff;text-shadow:#666 0 -1px 0;}#wpadminbar .quicklinks li:hover>ul,#wpadminbar .quicklinks li.hover>ul{display:block;}#wpadminbar .quicklinks .menupop li:hover>ul,#wpadminbar .quicklinks .menupop li.hover>ul{margin-left:100%;margin-top:-28px;}#wpadminbar .quicklinks li:hover,#wpadminbar .quicklinks .selected{background:#555;background:-moz-linear-gradient(bottom,#555,#3e3e3e);background:-webkit-gradient(linear,left bottom,left top,from(#555),to(#3e3e3e));}#wpadminbar .quicklinks .menupop li:hover{background:#888;background:-moz-linear-gradient(bottom,#888,#9d9d9d);background:-webkit-gradient(linear,left bottom,left top,from(#888),to(#9d9d9d));}#wpadminbar .quicklinks .menupop a>span{display:inline;background:url(../images/admin-bar-sprite.png?d=11122010) right -58px no-repeat;padding-right:.8em;}#wpadminbar .quicklinks .menupop ul li a>span{display:block;background:url(../images/admin-bar-sprite.png?d=11122010) right -29px no-repeat;padding-right:1.5em;}#wpadminbar .quicklinks a span#ab-awaiting-mod,#wpadminbar .quicklinks a span#ab-updates{background:#eee;color:#333;text-shadow:none;display:inline;padding:2px 5px;font-size:10px;font-weight:bold;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}#wpadminbar .quicklinks a:hover span#ab-awaiting-mod,#wpadminbar .quicklinks a:hover span#ab-updates{background:#fff;color:#000;}#wpadminbar .quicklinks li#wp-admin-bar-my-account>a{border-left:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a{border-left:none;background:url(../images/admin-bar-sprite.png?d=11122010) top left no-repeat;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a img{width:16px;height:16px;display:inline;border:1px solid #999;vertical-align:middle;margin:-2px 23px 0 -5px;padding:0;background:#eee;float:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul{left:30px;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul ul{left:0;}#wpadminbar .quicklinks .menupop li a img.blavatar{vertical-align:middle;margin:0 8px 0 0;padding:0;}#wpadminbar #adminbarsearch{float:right;height:18px;padding:3px;margin:0;}#wpadminbar #adminbarsearch .adminbar-input{width:140px;height:auto;float:left;font:12px Arial,Helvetica,sans-serif;color:#555;text-shadow:0 1px 0 #fff;border:1px solid #626262;padding:2px 3px;margin:0 3px 0 0;background:#ddd;-moz-box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-box-shadow:inset 2px 2px 1px #cdcdcd;box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-border-radius:0;-khtml-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;outline:none;}#wpadminbar #adminbarsearch .adminbar-button{font:bold 12px Arial,Helvetica,sans-serif;color:#444;text-shadow:0 1px 0 #eee;cursor:pointer;float:left;background:#aaa;background:-moz-linear-gradient(bottom,#aaa,#cecece);background:-webkit-gradient(linear,left bottom,left top,from(#aaa),to(#cecece));-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #626262;padding:2px 13px;margin:0;width:auto;height:auto;}#wpadminbar #adminbarsearch .adminbar-button:active{background:#a0a0a0;background:-moz-linear-gradient(bottom,#a0a0a0,#c1c1c1);background:-webkit-gradient(linear,left bottom,left top,from(#a0a0a0),to(#c1c1c1));-moz-box-shadow:inset 1px 1px 1px #9b9b9b;-webkit-box-shadow:inset 1px 1px 1px #9b9b9b;box-shadow:inset 1px 1px 1px #9b9b9b;}#wpadminbar #adminbarsearch .adminbar-button:hover{color:#000;}#wpadminbar #adminbarsearch .adminbar-button::-moz-focus-inner{border:none;}* html #wpadminbar{overflow:hidden;position:absolute;}* html #wpadminbar .quicklinks ul li a{float:left;}* html #wpadminbar .menupop a span{background-image:none;}

  • Timothy Bowers

    It depends on how the CSS is called, basically the last instance of the CSS called will take precedence. You can over write that by using !Important but that should be last resort.

    You could also use add_action to get your CSS included, do this from your themes function file.

    function extra_admincss() {
    echo '<style type="text/css">
      #wpadminbar {
        background-color: #000;
      }
    </style>';
    }
    
    add_action('admin_head', 'extra_admincss');
    add_action('wp_head', 'extra_admincss');

    Something like that should work although I haven't tested it.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.