Override Inline Styles
A few weeks ago I ran into a problem while styling some elements in a wordpress plugin. The source of problem was that the plugin author had used inline styles to control the elements. This prevented my user-defined styles from applying. Rather than manually going into the plugin source and removing the styles (any modifications would be over ridden if I ever updated the plugin), I found a solution posted by Natale Jost.
It’s really simple.
Your original style looks something like:
div { color: #666; border: 1px solid red; }
But, thanks to the inline styles, the above don’t actually appear. By adding [style] to the end of div, the nasty inline styles will be over written.
div[style] { color: #666; border: 1px solid red; }
This trick works in all browsers except IE 6 (no surprise).
-
Advertisements
9 Comments
Hey Pippin, really digging all these resources you provide.
I tried this on a deep style — like: #a .bunch #of .levels[style] — and it didn’t work. Is there a different way in which to implement the override in this case or does it not work if there are multiple classes, ids, etc.?
Thanks.
Hmmm, it should work regardless of whether it’s a deep style or not. Have you tried adding the !important tag at the end of the style (before the
?
No, I hadn’t. I just now read Natale’s post and saw that she included that. I didn’t see it in your code above, so hadn’t thought about the !important tag.
Actually, I’ve found in working with a WordPress theme that for some reason keeps calling its own CSS even though my CSS is further down the cascade, that simply using !important by itself works. But I’m only working on a few specific items rather than trying to return the whole body of span tags to an inherited attribute.
So, I’m actually confused now. Based on my example above, I could simply put #a .bunch #of .levels {style changes !important} and not have to include the [style] selector at all, right? So when is it better to use [style] alone vs. !important alone … and when should they be used together?
And thanks for the super-fast response!
You may or may not have to include the [style] selector. I use it very rarely, and do not know for sure. But my guess is that without the [style] selector, the inline styles will not be overridden, even with the !important. Using the two together kicks the inline styles out, but only one of either, won’t.
Try it and let me know, I’m curious.
Cool Pippin, makes sense.
And will do regarding testing. I’ve already worked out what I was working on using !important as I mentioned, but if (when!) that doesn’t work, I’ll experiment and let you know.
Thanks again, and Happy Holidays!
Hey Pippin,
I’m actually trying to do this for your Sugar Slider plugin. Love it btw!
For the accordion style, I’m trying to change the width of the tabs (it’s actually “height: 41px” in the code below) and it looks like it’s set in the style but I can’t seem to call it correctly.
For Teens1
Oh, well, it stripped my code. Here it is:
dt class=”active spine spine_1″ style=”position: absolute; z-index: 3; display: block; left: 0px; width: 247px; height: 41px; -moz-transform: rotate(270deg); -moz-transform-origin: 21px 0px; text-align: right; top: 256px; margin-left: -21px;”
You should edit the css file included with the plugin because you will have a hard time over writing inline styles set by jQuery. The inline styles you see are actually put there by the accordion slider after being detected from the main CSS file. So if you change the css file, it should change everything fine.
Ok cool, I got it. I was calling the wrong selector. Thanks Pippin!