Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Several things:</p> <ol> <li><p>For style overrides, don't reinvent the wheel. <strong>Use <a href="https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe" rel="nofollow noreferrer">the <em>Stylish</em> extension</a>.</strong> It allows for quick, easy changes, and sharing/reuse of styles. There are zillions of styles already developed at <a href="http://userstyles.org/" rel="nofollow noreferrer">userstyles.org</a>.</p></li> <li><p>If you want it in a script anyway, avoid all that stylesheet and <code>addRule()</code> rigamarole. Just <strong>add the CSS using your script's manifest.</strong> :</p> <ol> <li>Create a CSS file with your changes, EG:<br> <code>* {background-color:lime!important;}</code><br> and place it in the same folder as your script's JS.</li> <li>Add a line to the manifest file that includes the CSS file. EG:<br> <code>"css": [ "myCSS.css" ],</code></li> <li>See <a href="https://stackoverflow.com/a/5259212/331508">this answer</a> for more information on script locations and the manifest file.<br> <br></li> </ol></li> <li><p><strong>Your current script works</strong>, but apparently doesn't give the results you want because the rule that the script sets (<code>background-color:black</code>) is being overruled by later CSS.</p> <ol> <li><p>Use the <code>!important</code> keyword to stop most (but not all) later CSS rules from taking precedence. EG: </p> <pre><code>if (ss.addRule) ss.addRule ('*', 'background-color:black!important;', 0); else ss.insertRule ('*{background-color:black!important;}', 0); </code></pre> <p>This may be all you need, in your case, but refer to points 1 and 2. ;)</p></li> <li>The rule is being set against the universal selector (<code>*</code>). That means that <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow noreferrer">more-specific rules may override it</a>. So, you may need to be more specific, EG: <code>body {background-color:lime!important;}</code> to get the changes to stick.</li> </ol></li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload