Remove Web Ads, Social Media Guff with Stylish

The Web is littered with both ads and injected content.  Neither do I care to view but I understand the need for ad-driven revenue when you have an otherwise free product.  I have used AdBlock Plus regularly in order to block ads and I like it’s ability to use custom filters to block other stuff.  For example, if you use the Twitter Web interface, you’re used to seeing things like Who to Follow and trending topics.  These are 100% irrelevant to my use of the service and it’s easy to remove them using ABP.

But I am sensitive to the overhead ad blocking creates in Firefox and it can be frustrating to see the browser slow to a crawl.  I’m not quite ready to dump ABP but I was curious to see if I could filter out other components without it.  In particular, I wanted to get rid of Google News’ Suggested for You, LinkedIn’s Probe Pulse, and Twitter guff.

There is an old walkthrough (2010) on how to use the Stylish add-on to Firefox to just this.  It’s incredibly simple.  Identify the relevant CSS section and then apply the style display:none.  Once you have designated a namespace for the Stylish file, you can create new domain sections for each URL you want to impact.

It’s so simple I won’t retread the steps.  It is worth noting that, where you once could View Source (right click on the Web page to see this option), viewing the source is often not very helpful.  Right-click and choose Inspect Element instead.  It’s tedious but you only need to do it once per site.

One other thing to mention – you can impact microdata elements as well.  I’m not how common this is yet but it’s how you can block an individual Twitter user.  I know you can block/mute someone who follows you but this will apply to promoted tweets as well.  John Culpepper documented how to apply CSS to microdata, which was new to me.  But it means you can do the same to block the data element.

My Stylish file is below so feel free to re-use it if it’s any use to you.  You can see the microdata block on Twitter Small Biz under the twitter.com domain.  Everything else is probably self-explanatory.  I’m going to play around some more with blocking based on microdata, which is richer and more descriptive than normal style labels.

[updated 2/6/2015, with multi-domain, additional Twitter/Linkedin tweaks]

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain(“google.com”), domain(“google.ca”)
{
      div#taw { display:none; }  /* Block Google ads after search */
      div.section-en_us-sfy { display: none; }  /* Block Google News Suggested for You */
      div#bottomads { display: none; }
      div#mbEnd { display: none; }
      li.ads-ad { display: none; }
}
@-moz-document domain(“twitter.com”)
{
       div.dashboard-left div.trends div.trends-inner { display: none; }  /* Block Trends Module */
       div.dashboard-left div.wtf-module, div.dashboard-right div.wtf-module { display: none; }  /* Block Who to Follow Module */
       div.Footer { display: none;}  /*  Block Twitter Links Footer */
      [data-disclosure-type=”promoted”] { display: none; } /* Block promoted tweets */}
       div.PromptbirdPrompt { display: none; }

@-moz-document domain(“linkedin.com”)
{
       ul.lego-modules { display: none; }    /*  Block LinkedIn Inserted Call to Action */
       li.linkedin-recommend-pulse { display: none; }  /* Block Pulse recommended stories */
       li.linkedin-sponsor { display: none; }  /* Block sponsored nonsense */
       /* li.linkedin-recommend-pymk { display: none; }  /* Block recommended people */
       div#recommended-actions { display: none; } /* Block recommended actions */
       div#text-ad-container { display: none; } /* Block ads on Viewer Page */
       div.ad-hdr { display: none; }
       div.ad-slot-3 { display: none; }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *