Custom CSS in Firefox

[Joe Siegler]

How do you override the CSS on a specific site and replce it with your own? I seem to recall you can do this, and I can't remember how to do that.

[TerminX]

Joe3DR said:
How do you override the CSS on a specific site and replce it with your own? I seem to recall you can do this, and I can't remember how to do that.


It goes in <your Firefox profile directory>/chrome/userContent.css.

In your case, that would most likely be C:\Documents and Settings\<your username>\Application Data\Mozilla\Firefox\Profiles\<usually random>\chrome\userContent.css. Note that Application Data is a hidden directory by default.

[Joe Siegler]

Well, I want said css file to work with just one site, not all of them. That's the point I'm going after here.

[Gryph]

Post deleted by me.

[ADM]

Joe3DR said:
Well, I want said css file to work with just one site, not all of them. That's the point I'm going after here.



Theres a plugin for that... lemme see if I can find it.

https://addons.mozilla.org/extensions/moreinfo.php?id=179

I think that's it.. although I'm not too sure if it actually saves the CSS sheet per site though or it just lets you preview what the site would look like with that CSS file in realtime.

[the pineapplehead]

It's not Editcss; that just lets you preview what it would look like with your CSS changes.

This is what you want:

http://extensionroom.mozdev.org/more-info/uriid


pply User Stylesheet (CSS) rules on a site-by-site basis.

The URIid extension makes it possible to create CSS rules based on the site you are visiting. This is useful when specific sites do not render correctly or are simply not visually appealing.

The extension adds an id to the body of each page allowing the id selector to be used in your User Stylesheet (userContent.css) file. For example, when visiting the site "http://www.google.com", the id "www-google-com" will be added to the body. The stylesheet can then use the #www-google-com selector to apply styles only to that site. The following would change the background color of pages at www.google.com (http://www.google.com) to a light blue:

body#www-google-com {
background-color: #ddf !important;
}

To avoid problems when an id exists on the body element, the class is adjusted instead. A class attribute of the form uriid-extensionroom-mozdev-org is either created or appended.

[NetNessie]

The GreaseMonkey extension for FireFox (http://greasemonkey.mozdev.org/) can do that, but you'll have to known the proper JavaScript to do so, and have some patience.