February 26, 2013

Fixing the Facebook and Twitter layout problems in Cocoon

All of my comrades who use Cocoon to evade campus firewalls are pretty content with the service except one thing: the ads. They usually block all the ads to get a web experience similar to the free open web. Let me be clear about ads…I’m not against them as they are part of the Cocoon’s business model and other free web services, but  their current implementation for the top-banner ads are too intrusive and have a major side-effect. They push the content far down so that the Facebook’s chat sidebar’s command palette is not visible at all. And if you’re blocking ads the top bar may be stuck floating in the middle  So here is a tiny CSS stylesheet to fix this. (I assume that you are using an advanced adblocker, preferably Firefox’s AdBlock Plus)

Step 1: First of all, you need to install Stylish. It’s an extension available for Firefox (and Pale Moon) which can modify a webpage’s look by altering its CSS (Cascading Style Sheet).

Step 2: Go to Cocoon Fixer for Facebook and Twitter – Userstyles.org and click “Install with Stylish”. Don’t worry about the link, it’s just a tiny CSS snippet written by me.

Step 3: Now add these custom filters to your Ad-blocker.

###cocoon_ad_container
||ad-server.vworldc.com^
||api.vworldc.com/fp/*
||api.vworldc.com/video-ad.html?*

To add custom filters in AdBlock Plus, open its preferences either through status bar or Add-ons tab and go to ‘Custom filters’ tab and add all these filters there in any of the groups.

Tada! You’re done. Cheers!!!