Make Facebook (and other sites) Less Annoying Using CSS

I'm really late to the party on this one - so this blog post is mostly an aide-mémoire.

The web is built on three fundamental components:

1. HTML - the structure of the page.
2. CSS - how the page is styled.
3. JavaScript - the interactivity.

Typically, the website owner sets up the CSS to say links are blue, headlines are big, images have borders etc. etc.

Users, however, can over-ride these styles using their own CSS. For example, a person with poor vision may decided to pump up all the fonts, or make all the text high-contrast. Or, they could change the fonts to something like OpenDyslexic.

Or, they could hide the parts of websites that they just don't want to see!

Let's take Facebook. There are loads of parts of Facebook I just couldn't give a damn about. Take this weird little menu bar:

Who the hell is still poking in 2014?

Well, by right-clicking on the offending item, and selecting "inspect element", it's possible to find the ID and class which tell the browser how to display it.

So, how do we get rid of it permanently?

1. In Firefox, type into the URL bar about:support.
2. Where you see "Profile Directory", click the "Open Directory" button.
3. You're now in the folder where Firefox keeps its guts - be careful!
4. Open the folder called "chrome". If it doesn't exist, create it. (Note: all in lowercase.)
5. Open or create the file called "userContent.css" - again, this is case sensitive.
6. Add the following into the file and then save it.

   #appsNav{
      display: none;
   }
   

7. Restart Firefox.

Hey presto! The offending item is gone :-)

There are loads of CSS "hacks" like this that you can use. A good place to start if you want to re-draw the web is userstyles.org

My Personal Styles

I'm currently getting rid of "trending topics" and the constant adverts for games on Facebook. I've also disabled the annoying Google+ notification. Oh, and those silly "Outbrain" adverts which infect most news-sources.

/*
Facebook - remove trends and recommended pages
*/
#appsNav,#pagelet_trending_tags_and_topics,#pagelet_organic_ego_pane,#pagelet_ego_pane{
   display: none;
}

/*
Google - Remove G+ message counts
*/
div.gb_Ca{
   display: none !important;
}

/*
Outbrain - content from around the web nonsense
*/
#outbrain,#outbrain_widget,#outbrain_widget_0,#outbrain_widget_1,#outbrain_widget_2{
   display: none !important;
}