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.

Answer 1

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