Make a <style> CSS Script into a Greasemonkey Script

Question

I have the following CSS code:

<style>
.crumbContTop > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > th:nth-child(1)     {
    position: fixed;
    bottom: 0px;
    width: 98%;
}

#navMenuContainer {
    position: fixed;
    top: 5px;
    z-index: 2;
}

#navBar > div:nth-child(1) {
    position: fixed;
    top: 5px;
    z-index: 1;
    right:0px;
}

#navBar {
    position: fixed;
    top: 0px;
    z-index: 1;
    width:4000px;
    height:15px;
}

td.cell1 {
    position:fixed;
    bottom:0px;
    z-index:1;
    padding:20px;
    right:0px;
    opacity:0.7;
    visibility:visible !important;
}

#main-header {
    position:fixed;
    top:0px !important;
    z-index:1 !important;
    width:100%;
}
</style>

I just want to convert it into a Greasemonkey script, basically this Fixes the position of the Nav Bars which are on top and on the bottom of the screen. The problem is that greasemonkey is telling me that it is expecting an identifier instead of " < ".

any help?

thanks.

(One more question, how do I make the position static, but when the object is out of screen it becomes fixed?)

Answer 1

Edit:

As Hellion pointed out, this is covered by Greasemonkey with GM_addStyle. From the wiki:

GM_addStyle("body { color: white; } /* CSS etc, etc */");

Greasemonkey is just JS, so you can't directly use CSS in a Greasemonkey script; you need to inject it into the page somehow.

Original Answer:

Demonstrated on http://www.techradar.com/us/news/internet/the-beginner-s-guide-to-greasemonkey-scripting-598247/2, you could add a function to add a stylesheet to the page, then store your CSS in a string:

function addCss(cssString) {
    var head = document.getElementsByTagName('head')[0];
    var newCss = document.createElement('style');
    newCss.type = "text/css";
    newCss.innerHTML = cssString;
    head.appendChild(newCss);
}

And at some point in your script call addCss on your current CSS:

addCss("#mainHeader { position:fixed;} /* more CSS here */");