WordPress.org

Ready to get started?Download WordPress

Forums

Styling adminbar (9 posts)

  1. kristian86
    Member
    Posted 2 years ago #

    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

  2. cinghaman
    Member
    Posted 2 years ago #

    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');

    ?>

  3. kristian86
    Member
    Posted 2 years ago #

    Hi robin

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

  4. cinghaman
    Member
    Posted 2 years ago #

    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

  5. kristian86
    Member
    Posted 2 years ago #

    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

  6. cinghaman
    Member
    Posted 2 years ago #

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

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

  7. kristian86
    Member
    Posted 2 years ago #

    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.

    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?

  8. cinghaman
    Member
    Posted 2 years ago #

    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

  9. cinghaman
    Member
    Posted 2 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic