Pippin's Pages

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).

Tags: CSS
Posted in Tutorials, Wordpress | No Comments »