CODEWITHSUNDEEP
csscss-cascade
kalpaitch
kalpaitch

Reputation: 5271

Overriding !important property used in widget stylesheet in the footer

I have a twitter widget which is loaded into the footer of my page. The problem is that it uses !important properties all over the place. And because my stylesheets are all loaded into the head, the widget's style sheets automatically override any of mine.

Do I really have to put a couple of separate styles in the footer of my document, below the widget, to get force this. Or is there a more semantic method?

Upvotes: 3

Views: 1326

Answers (2)

My Head Hurts
My Head Hurts

Reputation: 37685

I would go through and see if there is a way to make your CSS more specific than the selectors used in twitter. The rules of specificity will ensure that your !important styles override the twitter !important styles.

Otherwise, as a last resort and if !important is only used on classes in the Twitter CSS then you could assign an id to anything that is overridden to ensure that your selectors are more specific.

/* your style */
#anti_twitter a.link {
    color: blue !important;
}

/* twitter style */
a.link {
    color: red !important;
}

So using the code above, the links would come out blue.

JSFiddle: http://jsfiddle.net/9T9uk/

Upvotes: 2

Rishabh
Rishabh

Reputation: 1215

<div id="myWrapper">
     <div id="theDefaultId">
       ....
     </div>
</div>

and you can use #myWrapper #theDefaultId { anything: value !important; }

theDefaultId is the id which the twitter widget uses and #myWrapper is an id defined by us.

This should work.

Upvotes: 1

Related Questions