How can I "disable" an inline style that is overwriting my CSS?

css class squarespace inline-styles
jasonbarone picture jasonbarone · Nov 21, 2011 · Viewed 9k times · Source

I'm writing a Chrome Extension to modify the user interface of Squarespace, which "overlays" CSS on top of your website in order to display the browser-based website builder.

Let's say this is my body CSS:

body {
 background-color: #000000;
 background-image: url("/storage/body.jpg");
 background-repeat: no-repeat;
 background-position: top center;
}

When you open up Squarespace's user interface, it adds a few classes to the CSS with inline styling. So this is added to my code automatically:

{
padding-top: 56px;
background-position: 50px 56px;
}

So since I'm modifying the user interface with a CSS Chrome Extension I want to essentially "skip" or "disable" those inline styles from being added. I could just use !important on my extension CSS, but some websites might use a different background-position, I don't want to just put "background-position: top center !important;" in my extension. I also don't want to just strip the classes using a script because they're also used for other styling.

Thanks!

Answer

Kyle picture Kyle · Nov 21, 2011

If you absolutely have to keep your inline styles (as in, not moving your styles to an external stylsheet, or at least a <style> element in your <head>) then use

myElement
{
    background-position: center !important;
}

This is literally the only CSS way to do it.

You could use Javascript to find the attribute of the element and change it if you wanted, but !important is the only thing in CSS that can override inline styles.

:)

http://jsfiddle.net/Kyle_Sevenoaks/TXmC7/

Related questions

Using two CSS classes on one element

What am I doing wrong here? I have a .social div, but on the first one I want zero padding on the top, and on the second one I want no bottom border. I have attempted to create classes for …

Read More
How to override the properties of a CSS class using another CSS class

I am fairly new to CSS3 and I want to be able to do the following: When I add a class into a an element, it overrides the properties of another class used in this specific element. Let's say that …

Read More
Add and remove a class on click using jQuery?

Please see this fiddle. I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all …

Read More