CODEWITHSUNDEEP
css
Gideon
Gideon

Reputation: 2014

Overrule !important inline CSS

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.

Upvotes: 0

Views: 316

Answers (4)

Bill Avery
Bill Avery

Reputation: 11

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%;
}

Upvotes: 1

Salvatorelab
Salvatorelab

Reputation: 11873

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?

  1. inline styles are more important (e.g. <div class="someclass" style="inline style"></div>) than normal styles
  2. more specific rules > less specific (#one .example tag .yeah > .yeah)
  3. 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>

Upvotes: 0

Mr_Green
Mr_Green

Reputation: 41832

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.

Upvotes: 1

Andy
Andy

Reputation: 14575

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

Upvotes: 2

Related Questions