overriding !important with Greensock

[pauljohnknight]

Hi

 

I’m trying to Tween the background color of an element on a WordPress site which has the !important rule assigned to it.

 

How can I override this?  I’ve tried both of the following and neither work.

var colorChange = TweenMax.to ('#box1', 1, {backgroundColor: 'black !important'});

var colorChange = TweenMax.to ('#box1', 1, {backgroundColor: 'black’ });

I tried and tested changing the background color in my child theme CSS and this works as expected, but not when used with Greensock.

 

 All other elements on the page animate fine with Greensock that don’t have the !important tag?

 

Any help would great.

 

Paul

[OSUblake]

Dealing with CSS is so much fun!

 

You could write a more specific selector, or use the CSSRulePlugin.

See the Pen d3b524e7827fb0071de38b2581dab8fd by osublake (@osublake) on CodePen

[OSUblake]

You can also use the plugin to set the rule, and get rid of the important directive.

See the Pen cb047505d15d683ea539ce90d45fefb7?editors=0010 by osublake (@osublake) on CodePen

[Jonathan]

The CSS !important declaration should only be used in your external style-sheet or within in a style tag, never inline on a style attribute!

 

Just as Blake advised either be more specific with your CSS selector rule inside your external style-sheet along with the !important declaration to override the existing rule. Or override the inline style with another CSS property value using the CSSRulePlugin.

 

[pauljohnknight]

Hi Guys,

 

Thanks for the suggestions, they are really useful to know - it was a problem with the theme adding the !important rule dynamically but I've sorted it. The CSS rule plugin suggestion was good to learn though.

 

Many thanks

 

Paul.