Unset CSS with !important


I have a wordpress theme that has this declaration:

figure {
  background-image: none !important;

I am using a service that will embed a shoppable Instagram feed into my site. That service uses a element for each image and sets the image with an inline style declaration for “background-image”. But, because of the !important declaration in the CSS for the theme, the images do not appear. If I remove the declaration from the style sheet in the theme, it will be overwritten if the theme is ever updated. How do I let the inline style be applied over the theme style?


[disclaimer] I'm not a WP expert[/]

The usual way to get around the updates is to use a “child theme” which you create to customize the existing theme, so updates to the parent theme don’t affect that.
Not sure how that works in the context of CSS where you are removing a css rule, as removing is not the same as overriding. As in omitting that rule from the child theme css won’t take it out of the parent.
Maybe someone who knows WP can say.


1 Like

Yes you could fork a child theme; the style sheets are not getting merged, WP will just look for files in the parent theme that are not present in the child theme. The downside would of course be that you won’t get any future updates for the theme.

As an alternative, you might try a (somewhat hacky) JS workaround, where you parse the style attributes of those figure elements and add another !important to each rule:

// Maybe use a more specific selector here to not
// conflict with the theme's own dubious figure
// elements
var figures = document.querySelectorAll('figure')

;[].forEach.call(figures, function (figure) {
  var style = figure
    .replace(/;|$/, ' !important;')
  figure.setAttribute('style', style)

Not very nice, but neither is an !important rule by itself… ^^

OK, thank you both. This was helpful in one sense that I am now certain there isn’t something simple I was forgetting or didn’t know. For what it’s worth, I tried this:

figure {
    background-image: 'Hi CSS, please ignore that yucky !important from earlier.  XOXO Swani';

Didn’t work. :disappointed:

So I guess I will move on to the forked theme. I have heard of this, and I understand it from a technical standpoint, but never used it. The only thing I’ve never totally understood is how a forked theme is functionally different than simply not updating your theme. I mean, if I get hit by a bus, having the forked theme will tell the new dev that there is a reason to not update the theme. But beyond that anything?


Also, m3g4p0p, thanks for the JS workaround. Very clever. If I had more control over the environment I would give it a shot. But with a third party embed I don’t want to rely on the DOM not changing for such an important piece of the site.

I’m going push my luck and ask one more question here. It relates to this:

Not very nice, but neither is an !important rule by itself… ^^

I intentionally didn’t mention the name of the theme or the author because I’m not about shaming other developers for their work. But, if this were you (you being m3g4p0, SamA74 or anyone reading this) would you go to the author and explain why this is causing a problem? Is that a fool’s errand? I’m sure the answer is that it depends on the author but have people had largely positive or negative experiences with asking for custom tweaks to a purchased theme?

A purchased theme? Seems that should entitle you to at least asking for a fix.
Fools errand? It might be there because of ignorance about using !important. Or it might be there because attempts without using it ended in frustration so the “last resort” was used.
It wouldn’t hurt to politely ask.

Personally, the only time I use inline !important is in my userscripts that modify page content of pages I have no control of. Because this is your site you should be able to use a child theme that overrides whatever template or function that is adding the !important.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.