Annoyed with the new Facebook? Here’s a fix

I think most or all modern browsers allow the use of custom spreadsheets. I use Firefox, so I realised that I can get rid of those elements in the new Facebook homepage that I find annoying. All you need to do is create a stylesheet, place it in the chrome subdirectory of your user profile, and create some rules to customise whatever site you want. Firefox allows you to do it on a per-site basis.

Your user profile is found under ~/.mozilla/firefox/ on Linux, and I gather it is usually located in the "application data" folder on Windows, or the "application support" folder on Macintosh. Alternatively, just search for a file named userContent-example.css; it should sit in the directory you want.

Here’s a rough draft of what your custom stylesheet could look like. (I may want to play around with the widths more.) It ends up looking very minimalist; you can see a screenshot here. I wish I could get more content in there (I still somehow feel like I used to see a lot more at once), but it’s an improvement. With a very little knowledge of CSS (and the help of Firebug) you can improve on this and customise it to your liking. Note that you may need to declare some rules !important as it seems the site’s stylesheet gets applied after mine.

/* Apply these rules only to Facebook */
@-moz-document url-prefix(http://www.facebook.com/)
{
    /* I don’t need filters on the left. */
    #home_filter_list
    {
        display: none; /* Saves 126px */
    }

    /* I also don’t need the stupid sidebar on the right. */
    #home_sidebar
    {
        display: none; /* Saves 250px */
    }

    /* I saved space above, so I can make the main part wider */
    #home_left_column, #home_stream
    {
    	width: auto !important;
        max-width: 1000px !important; /* 530 + 126 + 250 = 1006 */
    }

    /* To me, “X likes this” sentences are just noise. Get rid of them. */
    .like_sentence
    {
        display: none;
    }


    /*
     * Tweak widths of stream elements to fit the expansion
     */

    .home .UIIntentionalStream .UIIntentionalStory_Message
    {
        width: auto !important;
        max-width: 700px !important;
    }

    .commentable_item .show_all_link, .commentable_item .wallpost
    {
        width: auto !important;
        max-width: 500px !important; /* Up 150px from 350px */
    }

    .commentable_item .comment_box .wallcontent
    {
        width: auto !important;
        max-width: 461px !important; /* Up 150px from 311px */
    }
}