Override Inline Styles

February 26th, 2010

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

About Me

Pippin Williamson is a freelance web designer / developer that has a sometimes unhealthy addiction to coffee and Wordpress.

He builds custom wordpress themes that are specialized for Content Management.

Read more about Pippin.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">