How to filter Facebook ads and annoyance using CSS

To apply a user stylesheet on a website, you will need a browser plugin like Stylish, which exists for Chrome and Firefox. The website for this plugin is userstyles.org and contains tons of user made stylesheets for websites.

  • Install the plugin
  • Open Stylish extension options
  • Click ‘Add New Style’
  • Enter ‘Facebook’ in the name field and check ‘Enabled’
  • Copy & paste the following stylesheet into ‘Code’
  • Click the ‘Specify’ button and switch the drop down to ‘URLs on the domain’ and enter ‘facebook.com’
  • Click ‘Save’ and open Facebook to see the difference
/* Custom user styles for facebook.com by www.codejuggle.dj */

/* Apps */
#appsNav,

/* Suggested Page */
.uiStreamStoryAttachmentOnly,

/* Sponsored */
#pagelet_ego_pane_w, .ego_section, .ego_unit_container,

/* List Suggestions */
#pagelet_friend_list_suggestions,

/* Like pages */
#pagesNav > ul > li:nth-child(3),

/* Like your favourite Pages in feeds */
.megaphone_story_wrapper,

/* Like Similar Stories */
._5j5v,

/* Suggested Post - profile picture can't be filtered yet */
.uiStreamHeadlineWithLikeButton, .uiStreamHeadlineWithLikeButton~h5, .uiStreamHeadlineWithLikeButton~div, .uiStreamHeadlineWithLikeButton~form {
  display: none !important;
}

.fbx #globalContainer {
  width:1200px
}

.hasLeftCol .homeWiderContent div#contentArea {
  padding-left:18px;
  padding-right:25px;
  width:725px
}

The complete filtering of suggested posts is not possible with current CSS standard due to a missing parent selector. The W3C Working Draft for Selectors Level 4 provide a syntax to define a subject of a selector, which would help filtering this. Some other styles that I am using:

You may also like