I posted something previously on blocking social ads in facebook with greasemonkey, where I came to the conclusion incorrectly it could not be done with css. I apparently remembered what “! important” did in userContent.css and userChrome.css; I read “! important” as “not important,” but it aparently means the opposite, and overrides any webpages css. I corrected my post on userContent.css and userChrome.css customization as well. Stupid logic. Anyway, if you add the following block into your userContent.css file, you should be able to block most annoying stuff on both the new facebook design and old.

@-moz-document url-prefix(http://www.new.facebook.com/) {
.sponsor, .invitefriends, .findfriends, .gifts_received, .pymk, .social_ad, .adcolumn{
display: none ! important;
}
}

@-moz-document url-prefix(http://www.facebook.com/) {
.sponsor, .invitefriends, .findfriends, .gifts_received, .pymk, .social_ad, .adcolumn{
display: none ! important;
}
}

There may be a way to combine these two, but I don’t know the more mozilla-internal css well enough to know. If you use facebook, most of these should be clear. I blocked gifts, as I find them annoying, and I am glad to just not be aware of them. I also blocked the person finding features like “people you may know” (’.pmyk’) or the email search things. I also blocked ads of course. Facebook seems to have to idea that everyone will love ads if they are more specifically targeted at you, based on data they have on file. I can’t stop them from doing that (other than by closing and deleting my account), but I shouldn’t have to see ads if I don’t want to IMHO. Also notice that the new facebook design and the old one use the same css classes for everything; the redesign isn’t that extensive apparently.

Update: see my post “Fixing Facebook with userContent.css” for a corrected and more extensive way to go about this. There are some stupid errors in this post that lead me to use a bad approach, but the greasemonkey script should still work.

I am not a huge fan of ads. I say that somewhat hypocritically as adSense proudly barfs somewhat random ads out on this page, none of which I really expect will ever click on, but that is besides the point ;). Anyway, I can normally block ads with adBlock, but social ads are trickier. Every social ad div has for a class:
feed_item clearfix social_ad
Each one is a seperate class. They do some trick so it is hard to override with a page wide css that doesn’t take out everything, so userContent.css and similar tricks are out. I ended up brute forcing it and writing a greasemonkey that does the job.

Download it here: hidefacebookfeedadsuser.js

Update: There is another class used as well. If I remember correctly, instead of social_ads, its ad_capsule with everything else the same.

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: