Surgical web page editing with “stylish”

Oct 22, 2009 • alan


Have you noticed that some web sites have ads that are somewhat… unpredictable? Facebook is a good example of this. The ads that appear on the right can sometimes contain trashy-looking content. I’d like to hide them, if I could.

I found a Firefox plugin that does a good job of slicing out selected bits of content. It’s called “stylish“.

Just install the plugin, and then set up a script that intercepts the stylesheet for a particular site and does a little on-the-fly modification. The script I use for Facebook looks like this:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {
   .emu_ad, .UIStandardFrame_SidebarAds, #home_sponsor {
      display: none !important;
   }
}

I don’t claim to fully understand the script, but I do know that it looks for a specific block in the Facebook HTML and style sheet, and it sets the style for the sidebar ad box to “display: none”. That makes it disappear.