Unable to customize Stackoverflow by CSS in Firefox

Question

I would like to control which parts in Stackoverflow are visible to me by a css file. There are about ten css -files in Firefox installation folder. I am not sure whether I should edit them or not.

How can I customize Stackoverflow by CSS in Firefox?

Answer 1

Try using firebug from http://getfirebug.com

You can also use greasemonkey to do further customization.

Answer 2

You can get a very handy addon in Firefox, called GreaseMonkey. It executes a custom javascript after a page loads, and is able to modify the html on the client side. For example people use it to strip out various elements, change color, fonts, rearrange elements etc

There is also a book about it available online for free

You can get the Greasemonkey add-in here.

Answer 3

You can create a file called "userContent.css" in your profile folder and it will be loaded on each page. Here's more information: http://www.mozilla.org/unix/customizing.html

If you need to make changes which only affect one particular site instead of every site, then you can use this syntax:

@-moz-document domain(stackoverflow.com) {
    body {
        background-color:#f0f;
    }
}

Answer 4

The CSS equivalent of GreaseMonkey is the Stylish extension which allows you to overwrite site CSS without modifying your userChrome.css file.

With Stylish installed, you can simply create a custom user style for stackoverflow containing your css overwrites without risking messing up userChrome.css. You can also disable or enable that particular stylesheet at any time. Also, make sure to use !important in your style declaration as CSS specificity comes into play.