0

I'm styling my adminbar from frontend, I followed some tutorials to do this. The only thing I didn't get it done it was change the default blue text hover color and gray background hover color of the admin bar from Wordpress to my custom color.

When I put a mouse cursor in some item from admin bar it continues showing the default blue and gray text and backgroun color.

This is my code in functions.php of my theme

add_action('wp_head', 'change_bar_color1');

function change_bar_color1() {

?>

<style>
#wpadminbar .ab-empty-item, 
#wpadminbar a.ab-item, 
#wpadminbar > #wp-toolbar span.ab-label, 
#wpadminbar > #wp-toolbar span.noticon {
    color: #FFFFFF;
}
#wpadminbar{
    background:#ff6000;
    border-top:2px solid #000000;
    border-bottom:2px solid #000000;
    border-left:2px solid #ff6000;
    border-right:2px solid #ff6000
}
#wpadminbar .quicklinks ul li a:hover {background:#ffffff}
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item,
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li >.ab-item:focus,
#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus { 
    color:#fff;background:#ffa948
}
#wpadminbar .menupop .ab-sub-wrapper {
    background:#fc8805;
    border-bottom:2px solid #ff6000;
    border-left:2px solid #000000;
    border-right:2px solid #000000
}
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop.hover ul li a,
#wpadminbar-nojs .quicklinks .menupop:hover ul li a {
    color:#000000
}
#wpadminbar .menupop .menupop > .ab-item:hover:before,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop ul li a:focus strong,
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:hover strong,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li a:hover,
#wpadminbar .quicklinks li a:hover .blavatar,
#wpadminbar li .ab-item:focus:before,
#wpadminbar li a:focus .ab-icon:before,
#wpadminbar li.hover .ab-icon:before,
#wpadminbar li.hover .ab-item:after,
#wpadminbar li.hover .ab-item:before,
#wpadminbar li:hover #adminbarsearch:before,
#wpadminbar li:hover .ab-icon:before,
#wpadminbar li:hover .ab-item:after,
#wpadminbar li:hover .ab-item:before,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
    color:#ff0000
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
     background:#ffb45f
}

</style>
<?php

 }
1

switch your hook to ['admin_bar_menu'] and make things !important.


add_action( 'admin_bar_menu', 'change_bar_color1' );

function change_bar_color1() {

    ?>

    <style>
        #wpadminbar .ab-empty-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon {
            color: #FFFFFF !important;
        }

        #wpadminbar {
            background: #ff6000 !important;
            border-top: 2px solid #000000;
            border-bottom: 2px solid #000000;
            border-left: 2px solid #ff6000;
            border-right: 2px solid #ff6000
        }

        #wpadminbar .quicklinks ul li a:hover {
            background: #ffffff
        }

        #wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar .ab-top-menu > li.menupop.hover > .ab-item, #wpadminbar .ab-top-menu > li:hover > .ab-item, #wpadminbar .ab-top-menu > li > .ab-item:focus, #wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
            color: #fff !important;
            background: #ffa948 !important;
        }

        #wpadminbar .menupop .ab-sub-wrapper {
            background: #fc8805;
            border-bottom: 2px solid #ff6000;
            border-left: 2px solid #000000;
            border-right: 2px solid #000000
        }

        #wpadminbar .ab-submenu .ab-item, #wpadminbar .quicklinks .menupop ul li a, #wpadminbar .quicklinks .menupop.hover ul li a, #wpadminbar-nojs .quicklinks .menupop:hover ul li a {
            color: #000000 !important;
        }

        #wpadminbar .menupop .menupop > .ab-item:hover:before, #wpadminbar .quicklinks .menupop ul li a:focus, #wpadminbar .quicklinks .menupop ul li a:focus strong, #wpadminbar .quicklinks .menupop ul li a:hover, #wpadminbar .quicklinks .menupop ul li a:hover strong, #wpadminbar .quicklinks .menupop.hover ul li a:focus, #wpadminbar .quicklinks .menupop.hover ul li a:hover, #wpadminbar .quicklinks li a:hover .blavatar, #wpadminbar li .ab-item:focus:before, #wpadminbar li a:focus .ab-icon:before, #wpadminbar li.hover .ab-icon:before, #wpadminbar li.hover .ab-item:after, #wpadminbar li.hover .ab-item:before, #wpadminbar li:hover #adminbarsearch:before, #wpadminbar li:hover .ab-icon:before, #wpadminbar li:hover .ab-item:after, #wpadminbar li:hover .ab-item:before, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus, #wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
            color: #ff0000 !important;
        }

        #wpadminbar .quicklinks .menupop ul.ab-sub-secondary, #wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu {
            background: #ffb45f !important;
        }

    </style>

    <?php
}
2
  • Wow! It worked! What was it missing in my code? "Make things important?" When I put "wp_head" it was my goal, because I'd like to show for all users the admin bar on my main page... :) Nov 17 '16 at 14:18
  • 1
    You might be able to put in your footer and skip the !important tag. Generally !important overrides cascading styles but this is really an issue with order and priority -- CSS 101. There may be an admin-styles.css that is getting enqueue that if you replace with a cleaned up version without overrides you wouldn't need to use dirty tricks like that.
    – jgraup
    Nov 17 '16 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.