Home/ Questions/Q 6854801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:40:44+00:00

I’m writing a Chrome Extension to modify the user interface of Squarespace, which overlays

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0