Abhinav Kumar's Website<!-- --> | <!-- -->Fixing the Facebook and Twitter layout problems in Cocoon

Fixing the Facebook and Twitter layout problems in Cocoon

Posted on February 26, 2013 by Abhinav Kumar in blog

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 adsIm not against them as they are part of the Cocoons 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 Facebooks chat sidebars command palette is not visible at all. And if youre 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 Firefoxs AdBlock Plus)

Step 1: First of all, you need to install Stylish. Its an extension available for Firefox (and Pale Moon) which can modify a webpages 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. Dont worry about the link, its 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! Youre done. Cheers!!!