Overrule !important inline CSS

Question

I am using the Wordpress plugins 'NextGEN Gallery' and 'JJ NextGen JQuery Carousel' because I'm trying to make a carousel that looks alot like the default looks of the last named plugin. The problem is that the plugin uses a div with a background image as a button and it gets this CSS:

div#about-jcarousel_container .jcarousel-skin-custom .jcarousel-prev-horizontal {
    top: 188px !important;  
}

Because of that, this doesn't work (the top: 0px part):

.jcarousel-skin-custom .jcarousel-prev-horizontal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
    background-position-y: 50%;
    height: 100%;
}

Where it gets nasty is that the 188px is never called anywhere, so I cannot just edit it to make it 0px but client side in the browser. So I've looked around and it seems that the plugin puts the 188px code in inline < style > tags. Because it has !important I can't just use !imporant in my template.css to overwrite it.

Is the another way to overrule the !important tags that are used inline? I realy would like the keep the plugin updateable.

You said that it has inline stile, yet you posted CSS rule. Are you sure about the first? — Pavlo
– Pavlo, Commented Feb 19, 2013 at 10:52
@Mr_Green I tried, when I do that, it gets overruled by the style tags, because it is also !important. — Gideon
– Gideon, Commented Feb 19, 2013 at 10:52
Try adding "div#about-jcarousel_container" to the second rule and see if that helps. Also ensure that the second rule is being loaded after the first rule. Only use !important to try and get it to work as a last resort. — Billy Moat
– Billy Moat, Commented Feb 19, 2013 at 10:52
@ PavloMykhalov Inline as in, the plugin puts it in the HTML head in style tags. @ BillyMoat I have no control over the plugin's behavior without making it un-updateable. !important was my last resort, but it doesn't work. — Gideon
– Gideon, Commented Feb 19, 2013 at 10:56

Andy · Accepted Answer · 2013-02-19 10:52:06Z

2

The only way to override !important is to use !important again further in the cascade, so put it in a CSS file after the jcarousel one.

Alternatively, edit jcarousel

answered Feb 19, 2013 at 10:52

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gideon Over a year ago

This actually helped me alot, I tried to call the CSS file before the plugin because it would be first with !important, but apparently it is the other way around. I called my CSS file after the plugin and it worked! Mr_Green had the same answer, but this one was first so.. yeah.

Mr_Green · Accepted Answer · 2013-02-19 10:56:49Z

1

It seems that you are referring the jcarousel css file after your .css file in your html file. Keep the reference of the jcarousel .css file before your stylesheet(.css file). Then you can use !important again to override the default jcarousel .css file style property.

answered Feb 19, 2013 at 10:56

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

Comments

Bill Avery · Accepted Answer · 2018-11-18 14:09:04Z

1

You can change the specificity of your code. If possible look for an ID as maybe the parent. And add !important to your top element.

#ID .jcarousel-skin-custom .jcarousel-prev-horizontal {
position: absolute;
top: 0px!important;
left: 0px;
width: 32px;
height: 32px;
cursor: pointer;
background: rgba(24, 16, 16, 0.43) url(prev-horizontal.png) no-repeat 0 0;
background-position-y: 50%;
height: 100%;
}

answered Nov 18, 2018 at 14:09

Bill Avery

111 bronze badge

Comments

Salvatorelab · Accepted Answer · 2013-02-19 11:12:06Z

0

That's why the use of !important is discouraged. You can only override the !important with another !important and it's not always possible. When there are two rules with !important then the "most important" one is applied.

And the question now is, which one is more important?

inline styles are more important (e.g. <div class="someclass" style="inline style"></div>) than normal styles
more specific rules > less specific (#one .example tag .yeah > .yeah)
if two rules have the same priority, the last one applied wins

If you can't add a more important rule, then you can't override the !important. But you can use a script to add inline styles when the page is loaded. Example (with jQuery):

<script>
$(document).ready(function() {
    $("#test").css("color","blue");
});
</script>

Example without jQuery:

<script>
window.onload = function () {
    document.getElementById("test").style.color = "yellow";
}
</script>

edited Feb 19, 2013 at 11:12

answered Feb 19, 2013 at 10:55

Salvatorelab

11.9k7 gold badges55 silver badges81 bronze badges

9 Comments

Gideon Over a year ago

AFAIK in < style > tags is most important of all CSS, only thing overwriting it is with !important, but the bad thing is that the plugin uses both of those.

Salvatorelab Over a year ago

you can use a script to modify inline styles after all styles have been applied. It's not very elegant, but if you can't do anything better at least it is a solution.

Gideon Over a year ago

How would I do that? Seems handy for the future. After testing, !importent for inline or from included file are the same, just the last one is most important.

Salvatorelab Over a year ago

done, two example scripts added. you can override inline !important styles with that.

Andy Over a year ago

@TheBronx You shouldnt style inline, never mind !important inline. If that's the case, write better code instead of relying on jQuery to cover up your mess

|

Collectives™ on Stack Overflow

Overrule !important inline CSS

4 Answers 4

1 Comment

Comments

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related