Is there a way to remove the light blue color that appears in the WP Admin bar?

I’m using the Ultimate Branding plugin and have been changing the colors of the Admin. I have it almost nailed down but am having one issue. In the Admin bar across the top, I changed the background to a light gray and the icons and text to a darker gray. When you hover over the icons and text, they turn black, but before they do, a light blue color flashes first, then turns black. When you hover over the Comments icon, the count displays light blue, and when you hover over the +New button, the work New displays in light blue (those never turn black).

I’ve been using Firebug but haven’t been able to get the code to change the blue that flashes briefly to black.

Any help would be appreciated.

Thanks,

Trevor

  • Milan
    • WordPress Wizard

    Hello @trevor,

    I hope you are having a good day and thanks for the asking. :slight_smile:

    I am sorry but I am not able to get behaviour you mentioned on my sandbox site. Have you specified all color options correctly dear @trevor ? As you can see in attached screenshot there are plenty of color options provided by ultimate branding. Our most of user prefer to leave default color scheme as it is, so I suggest you once again check is there any default color option causing this issue or not ?

    If you are unsure about where to look, would you mind if I take a look at your site ? Would you please grant me support staff access so that I can check in depth regarding your issue ?. You can grant me support access via WPMU DEV > Support > Support Access > Grant Access.

    Best Regards,

    Milan Savaliya.

  • Trevor
    • Site Builder, Child of Zeus

    Hi Milan,

    I have set all of those colors the way I would like them. The hover color DOES work when you hover over the icon, but before it changes to the specified hover color, if flashes the default light blue color that is used in the base WordPress configuration. If you turn off your custom colors, or just "clear" the colors out of Ultimate Branding, you'll see the light blue color at the top.

    In the attached screen shots, you see the hover over the WP icon. The icon appears black, and the submenu items are black. Before the WP icon turned black, it flashed the default blue color.

    In the screen shot with "New" hovered, you'll see that didn't change to the black color, it stays the default blue.

    I'm sure this is fixable with CSS, but I just haven't been able to find it in Firebug.

  • Milan
    • WordPress Wizard

    Hello @trevor,

    I hope you are having a good day. And thanks for clarifying your issue so clearly. I must say you are very good explainer. :slight_smile:

    Again I am sorry but I am not able to reproduce behaviour you mentioned on my sandbox site. Seems like I need support staff access so that I can check what’s going on. Would you please grant me support staff access so that I can check in depth regarding your issue ?. You can grant me support access via WPMU DEV > Support > Support Access > Grant Access.

    Let me know once you enable support staff access.. :slight_smile:

    Kindest Regards,

    Milan Savaliya.

  • Milan
    • WordPress Wizard

    Hello @trevor,

    I hope you are having a good day. :slight_smile:

    I can say sometimes it is working and sometimes it is not, This must be noted as bug. I’ve notified developer about this bug, hope they will fix this soon. Please stay tuned with updates.

    Please let me know if there is anything else I can help you with.

    Best Regards,

    Milan Savaliya.

  • Milan
    • WordPress Wizard

    Hello @trevor,

    Hope you are doing good. :slight_smile:

    I haven’t added any css nor I’ve removed any existed ones. :slight_smile: We take extra care to ensure that unintentionally we don’t change existing customization of any of our member. :slight_smile:

    Kindest Regards,

    Milan Savaliya.

  • Ali
    • Flash Drive

    Old topic but I thought I post the solution that works for me.

    Go to your Custom Admin CSS (makes sure its turned on in Ultimate Branding).

    Add the following. Change the color to what you wish that split second blue to go away.

    #wpadminbar .ab-top-menu>li.hover>.ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu>li:hover>.ab-item, #wpadminbar:not(.mobile) .ab-top-menu>li>.ab-item:focus {
    color: #000;
    }
    #wpadminbar:not(.mobile)>#wp-toolbar a:focus span.ab-label, #wpadminbar:not(.mobile)>#wp-toolbar li:hover span.ab-label, #wpadminbar>#wp-toolbar li.hover span.ab-label {
    color: #000;
    }

    I am still trying to figure out how to remove the in focus blue border on buttons. i.e. save changes, hold the mouse click.

    Ultimate branding needs an option for ‘focus’ css or have it same as active/hover selected colour.

    Cheers!

  • Trevor
    • Site Builder, Child of Zeus

    Hi Predrag,

    Thanks for sending that code. I applied it to the Admin CSS field but I didn’t notice a difference. The white lettering on the buttons still have a blue outline around them. Maybe this code isn’t for the outline around the lettering?

    Thanks,

    Trevor

  • Trevor
    • Site Builder, Child of Zeus

    Hi Predrag,

    I had added your CSS but I didn't see a difference and removed it. I added it back in, saved, but still don't see a difference. I created a few screenshots so you can see what I'm talking about, maybe we're looking at different things.

    In the screenshot named Custom-Admin-CSS.jpg, you'll see your code that I added. I changed the color to black and the shadows to black.

    In the screenshot named Button-After-CSS-Added.jpg, you'll see there is an outline around the white letters on the orange button.

    In the screenshot named Button-After-CSS-Added-Enlarged.jpg, you'll see that the outline is blue and not black as I had changed in the code you sent.

    That blue outline is on all the orange buttons throughout the admin area that Ultimate Branding allows you to change.

    Now there is one more button type where the button color doesn't change and stays gray, and the hover color is still blue. Please see the screenshot named Button-Hover-Color.jpg. This particular button is the "Add New" on the Plugins page.

    Hopefully this will clarify what I'm looking for and provide better information for a solution.

    Thanks again for your help,

    Trevor

  • Predrag Dubajic
    • Support

    Hi Trevor,

    Thanks for the screenshots, I think I finally got it :slight_smile:

    Try with this CSS code please:

    .wp-core-ui .button-primary {
    text-shadow: 0 -1px 1px #000000,1px 0 1px #000000,0 1px 1px #000000,-1px 0 1px #0e0e0e;
    }

    .wrap .add-new-h2,
    .wrap .page-title-action {
    background: #d54e21;
    color: #fff;
    }

    .wrap .add-new-h2:hover,
    .wrap .page-title-action:hover {
    background: #d54e21;
    color: #fff;
    }

    First part is for shadow on text in Publish button, second part is for Add New button and text color, and third part is for Add New button as well but hover colors.

    Let me know if this is what you wanted :slight_smile:

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.