Fixing Facebook With Stylish

Facebook is a great website, and after Google, my main destination on the web. But there are some annoyances. People You May Know, as well as Sponsored Ads, for example. I've been looking for a way to fix that, and the only working method I'd found uses Greasemonkey to kill the entire right column. This removes Upcoming events as well, and leaves a large white space, which is almost as annoying as the Ads. What I wanted to do was remove just the People You May Know box, and the Ads box, and using the power of Stylish, I have done it.

Stylish is a Firefox addon that allows me to run custom CSS on top of a website's own. This lets me make any changes I desire to the look of the site. Hiding an element in CSS is simple. You set it's "display" to "none". The problem lies in finding what an element on a page is called, so that you can call it out in your code.

Fear not though, for we have the Page Source view on Firefox. And since the title rows of the sections we want to remove are plain text, I can search for that text in the source page, which gets me close. Facebook unfortunately uses minimized code, meaning that instead of single lines, spaced nicely for ease of reading, it's compressed. This allows for a faster page load, but a slower read. Which is also a benefit to them, since a site like Facebook doesn't WANT us messing around with their code. Understandable, but I'm out to please myself, not them.

So, looking around, I finally found what I'm looking for. The class of the container holding the unwanted items is "ego_column". So I pop up Stylish, and set up my document. First I place in a beginning line, which just tells Firefox what type of document this is.

@namespace url(http://www.w3.org/1999/xhtml);

I then place in my container, which specifies that the code only affects Facebook.com.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {

}

Inside that then, I write my code.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {

   .ego_column {display:none !important;}

}

The result is immediate. Here is a screenshot from before:



So, yay for Stylish!