Styling Upgrade ProSite button in adminbar impossible

I'm trying to change styles to the button in adminbar but plugin adds inline styles with !important so I can not change styles.
Our adminbar is customized so need to change this.
Is there a way around this?

#wpadminbar li#wp-admin-bar-pro-site a {
    padding-top: 3px !important;
    height: 25px !important;
    border-right: 1px solid #333 !important;
}

Thank you

  • Adam Czajczyk

    Hello Jason,

    I hope you're well today and thank you for your question!

    The inline "!important" rule in general can't be overridden as they take precedence over any other rules, so a "pure CSS" won't work here. It should however be possible to overcome that limitation using some JS code. For example:

    jQuery(function($) {
    	$('#wpadminbar li#wp-admin-bar-pro-site a').css('padding-top','30px');
    })

    If you could tell me what exact changes would you like to make to the button, I'd be happy to give it a go in search for a complete solution.

    Best regards,
    Adam

  • Jason Bishop

    Thanks for the suggestion.

    trying to make button look more modern and to match our styles.
    I'd like to add these:
    change padding on "a" element, remove border, if possible remove height of it or change it to min-height.
    #wpadminbar li#wp-admin-bar-pro-site a {
    padding-top: 7px;
    min- height: 25px ;
    border-right: none;
    }
    To span element: change padding, remove border, remove border radius, remove background-image and use background color instead, get rid of height being important.
    #wpadminbar li#wp-admin-bar-pro-site a span {
    padding: 5px 30px !important;
    border: 1px solid #409ed0 !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background-image: -moz-linear-gradient(bottom, #3b85ad, #419ece) !important;
    background-image: -ms-linear-gradient(bottom, #3b85ad, #419ece) !important;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#3b85ad), to(#419ece)) !important;
    background-image: -webkit-linear-gradient(bottom, #419ece, #3b85ad) !important;
    background-image: linear-gradient(bottom, #3b85ad, #419ece) !important;
    }

    Thank you.

  • Predrag Dubajic

    Hi Jason,

    Can you tell me where were you adding the styles?

    Can you try using mu-plugin and that should override the existing styles.

    You can download attached file below, unzip it and then place it inside you wp-content/mu-plugins/ folder, if you don't have that folder simply create one yourself.

    After that just edit the file and change the existing CSS code in it with the one you want to use and that should do the trick.

    Let us know if this works for you.

    Best regards,
    Predrag