Playing with userChrome.css and userContent.css in Firefox
Posted by knorby on January 25, 2008 under XUL, css, design, firefox, google, internet, mozilla, web design | 
Read the First Comment
A little while ago, I started playing around with the userChrome.css and userContent.css files in Firefox, and I have been rather pleased with the results. As far as I can tell, few people know about these files (perhaps I am mistaken, but most people I know have never seen them before). The files are located in the chrome folder in a given profile. On Linux at least, the path to that is
~/.mozilla/firefox/{weird alphanumerical sequence}.your_profile_name/chrome
On Macs, the profile directory is in
~/Library/Application Support/Firefox/Profiles
I don’t care about windows…
The arrangements of profiles is what I consider to be one of the prime examples of why Firefox isn’t a great piece of software. If I ever want to edit my profile, I have to remember the my profile begins with an r, or at least view all the other profiles, when I tab complete on the folder. For some reason, using unique profile names wasn’t enough for Firefox; it attaches an 8 letter alphanumeric sequence before the name of the profile. I really see no reason for this extra bit of crap. Perhaps it allows for profile name changes more easily, but it is not like people really futz around with different profiles too often. Given that there are things that a user might want to edit in the directory, this crap seems unnecessary. The directory structure inside the .mozilla folder doesn’t make too much sense either, but I won’t go into that now. In general, I use Firefox, because I believe it to be the best browser out of a series of really awful software packages. Maybe I am horribly naive, but the browser doesn’t seem like such an achievement in software to warrant the amount of attention Mozilla gets (or the money). That aside, one can do some nice things with Firefox.
The userChrome.css and userContent.css files allow a user to change the default css for the XUL in browser.xul (I think it applies to all XUL, but I haven’t tested that or bothered to look it up) and the default css used in the browser for sites. These files must go into the chrome/ directory of a user’s profile. There are example files already in there, which just need to renamed to get you started. There is a page on these files on the Mozilla website as well as some additional examples. I haven’t done much to userChrome.css; I got rid of the throbber (thing in the top right corner, which likes to spin) and I set my url bar to have a fixed width font. Those mods are both in the example file. The userContent.css file is a little more fun… As outlined in the example file, you can get rid of annoying tags, like marquee and blink. I added a rule to remove text decoration from links except for hover:
a { text-decoration: none ! important }
a:hover { text-decoration: underline ! important }
The ! important part lets a page’s css override my own (update: whoops, opposite is true; the programmer in me must have remembered it that way since I read “! important” as “not important”). It sometimes tricky to spot out the links, but I appreciate the overall aesthetic it produces. There is also a way to set it to only apply to individual pages. I choose to modify my google search results:
@-moz-document url-prefix(http://www.google.com/) {
.g {
border-bottom: 1px solid grey ! important;
padding-bottom: 1em;
}
}
As of now, I forgot why I made the url prefix just google.com as opposed to google.com/search, but I must have had a reason. Either way, my experience has shown me that the g class is not used elsewhere on google. Anyway, this snippet adds a line between each search result. Here is a screen shot of the end result:
