New to the community? Start here

[Branda Pro] Admin Bar doesnt change color on front end

Hi there,
I’m using the color scheme module to change and personalize the colors of a multisite installation of wordpress. And although I changed the color of the admin bar on the admin panel, when I go to visit the site on the front end, the bar appears to not have changed colors.

Is it possible to change the admin bar on the front end of the site?

So as to not appear like the usual wordpress color whilst the back end has a different look/color?

Fri, 20 Nov 2020 3:23:52
More Branda Pro discussions
Branda Pro
  • Jovan
    • Ex Staff

    Hi Tribo

    Hope this message finds you well!

    Branda’s “Admin Area” section refers to back-end only, as the name suggests. Everything inside is related to Dashboard section of your site.

    To change background color for admin bar on front-end, you need to include this CSS inside Appearance > Customize > Additional CSS and change ‘red’ to your color value, it could be HEX as well.

    [attachments are only viewable by logged-in members]

    .logged-in #wpadminbar {
    background: red !important;
}

    To change color of labels on admin bar, use this one

    [attachments are only viewable by logged-in members]

    .logged-in #wpadminbar a.ab-item{
	color: blue !important;
}

    to change hover background color use this one

    [attachments are only viewable by logged-in members]

    .logged-in #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus, .logged-in #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, .logged-in #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, .logged-in #wpadminbar .ab-top-menu > li.hover > .ab-item {
    background: yellow !important;
}

    And this CSS will change dropdown background color

    [attachments are only viewable by logged-in members]

    .logged-in #wpadminbar .menupop .ab-sub-wrapper, .logged-in #wpadminbar .shortlink-input {
    background: purple !important;
}

    Hope this was helpful, let me know.

    Kind regards,
    Jovan

  • Rupok
    • Ex Staff

    Hi Sian,

    The custom CSS method should work for multisite too. But, in multisite, you can use different themes on each subsite, so each subsite has its own customizer settings. So you might need to add this custom CSS code on the customizer of all the subsites where you want to change the admin bar color in the front-end.

    I believe this will help. Please let me know if any further assistance is required.

    Regards,
    Rupok

  • Sian
    • WPMU DEV Initiate

    That seems to work fine, except I don’t know the code to:

    change the colour of the icons (including hover, hover they go default blue)
    change the hover colour of menu items

    also, under the icon (default WordPress icon, it thankfully changes to what you set it in Branda) the WordPress menu (WordPress.org, documentation, etc) stays default colours

    and that same icon disappears when hovering (on front end only, back end works fine)

  • Rupok
    • Ex Staff

    Hi Sian,

    I could give you the appropriate CSS code for the subsite WordPress menu if I could see it live and make some tests on your site. Would you mind allowing Support Access so we can have a closer look at this?

    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#enabling-support-access

    Please confirm here when you are done granting Support Access and also please share screenshots of the sections where the colors aren’t working for you.

    Regards,
    Rupok