Live preview on elements with !important

I have a custom module that is loading custom content, but a few of those elements !important within the css properties. example:

color: red !important;

I am trying to create BB settings that will style those elements. I have it working once the module is saved and I push the settings to css, but live preview is not working. I need a way to include my own !important override for live preview. I tried using ‘unit’ => ’ !important’, but no luck. Any idea on how to tackle this?

Hey David,

I don’t think !important works with the JavaScript StyleSheet object we are using to do live previews, at least not cross-browser. Can you maybe rethink your selectors so you don’t need to use !important? That’s typically what I would recommend here.


I don’t have control of !important and the what it is used on. The content is brought in from a third party source. I dug into the BB source code and saw that ‘unit’ is not used on the color preview. I manually added the !important within the addRule() function within fl-stylsheet.js just to see if it would work and it does for the first color choice then it stops.

I think I will try to remove the class with jQuery that !important targets and then add a new class to that element that I will target with live preview. I will do this on init() and see what happens. I will keep you posted.