New to the community? Start here

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

Sat, 8 Apr 2017 17:55:58

Adam Czajczyk
- Support Gorilla
- 5,359 pts: Hero points 31,337 pts: Rep. points LEVEL 30
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
- Design Lord, Child of Thor
- 57 pts: Hero points 58 pts: Rep. points LEVEL 3
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
- Support
- 4,083 pts: Hero points 31,624 pts: Rep. points LEVEL 30
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