F.B. Purity Custom CSS - Customise Facebook's Layout

Custom CSS Box

To access FBP's CSS box you need to click the "CSS" heading at the top right of F.B. Purity options screen.

What is CSS?

CSS stands for "Cascading Style Sheets". CSS code is basically instructions telling your browser how to display (style) the elements on a web page, with it you can change things like positioning, visibility, colours, appearance, background, borders, size etc.

Here are some example CSS "recipes". If you would like to change the font Facebook uses, copy and paste one of the following lines of code (including the *) into F.B Purity's CSS box.

Please note: The majority of the CSS code on this page was written to work on the old Facebook page design, so may not work on the new Facebook design. To get the code working you may need to switch to the old Facebook design.

Changing the Font

* {font-family:verdana} * {font-family:arial}

The fonts you can use depend on what fonts your computer has installed and that your browser supports. The "*" at the start of the line, means the instructions following it should apply to all elements on the site. If you only want specific elements or "classes" of elements to be styled, you can specify those instead of using "*". You can specify specific HTML elements (Tags), Elements with a specific ID (Identifier) or "Classes" of elements.

*Update* the latest version of F.B. Purity, has a built in option to set the fonts, and includes a list of 650 web fonts that you can use, without having to install any extra fonts.

Change the font (text) colour across the site

You can replace the text "red" with any valid CSS colour name, or CSS hex code value

* {color:red}

Change the font colour just for the Top Nav Bar

The latest version of F.B. Purity has a built in option to change the font colour of the top nav bar, under the "Top Nav Bar Options" heading

Hide the status update box (whats on your mind)

/* Hide status update box on Newsfeed */
#pagelet_composer {display:none} /* Hide status update box on Timeline*/
#timeline_composer_container, #pagelet_timeline_composer {display:none}

Hide the "More information about this website/article/link" (i) button that shows below posts in the feed

/* Hide the "more information about this article" (i) button that shows below posts in the feed (Updated Oct 2023)*/
div[aria-label="More"]>div>span>i {display:none} /* OLD CODE for hiding (i) a[data-tooltip-content="Show more information about this article"],div[data-tooltip-content="Show more information about this article"],a[data-tooltip-content="Show more information about this link"],div[data-tooltip-content="Show more information about this link"] {display:none !important} div[role="article"][aria-labelledby] div[aria-label="More"] div, div[aria-label="More"] i[style*="background-position: 0px -142px"] {display:none !important} */

Hide the seasonal/promotional image / daily greeting etc in the status update box

FBP has an option to hide this. Its called "Hide Nagging Questions" and its located under the "Timeline Options" heading on the FBP options screen.

Hide the profile picture in the status update box

/* Stop Profile Icon showing in the status update box */
#pagelet_composer div._mp3 { display:none}

Hide comments section beneath all posts (also includes like and share buttons and like/reaction counts etc

/* Hide comments section beneath posts (also includes like and share buttons and like/reaction counts etc */
form.commentable_item { display: none}

Hide facebook's pre-written suggested comments / responses

If you do have them and wish to hide them, just add the following CSS code to the CSS box on the FBP options screen (with the fbp options screen open, first click the CSS link at the to right to display the CSS box) /* Hide Facebook's comment suggestions */
div[aria-label$="Click to add comment suggestion to comment composer."], div[aria-label$="Click to attach sticker to comment composer."]{display:none}

Hide prompts to "Add Frame to Profile picture"

/* Hide prompts to "Add Frame to Profile picture" */
div._2qsi._3-91:nth-of-type(2), div._5uaq._3es7._3es8._4p2a:nth-of-type(2) { display: none }

Hide the green dot that appears on peoples profile images when they are online

Please note this code only hides the dot that you see on people's profile picture icons, it won't hide your online status from other people. To do that, you need to change your chat/messenger settings so that you appear offline to everyone. To do that click the cogwheel button at the bottom right of the screen in the chat sidebar.

/* Hide the green dot that appears on peoples profile images when they are online */
div._354z { display: none}

Hide the Facebook "Wave" (hand) button that appears when you hover over a friends name in the chat sidebar

/* Hide the Facebook wave button that appears when you hover over a friends name in the chat sidebar */
div[data-testid="chat_sidebar"] div._5bon>i, #pagelet_sidebar div._5bon>i { display: none }

Please note: A side effect of this code, is it will also hide the little birthday cake icon that shows next to their name in the chat sidebar if its your friends birthday

Fix / Freeze the top blue navbar in position

The latest version of FBP has a built in option to do this, its under the Top Nav Bar Options heading of the FBP options screen.

Hide the "Create" button/link in the blue top navigation bar

FBP now has a built in option to hide this button, its located under the "Top Nav Bar Options" section of the FBP options screen

Hide the "Account Switcher" button in the top navigation bar

FBP now has a built in option to hide this button, located under the "Top Nav Bar Options" section of the FBP options screen.

Hide the Pages (flag) button in the top navigation bar on the new Facebook design

/* Hide Pages button (flag icon) in top navigation bar on new Facebook design */
div[role="banner"] a[href*="/pages/"] {display:none}

Hide the "Cookies Policy" banner that shows every time you login

F.B. Purity now has a built in option to hide "Cookies Policy" banner. It is located under the "Top Nav Bar Options" heading on the FBP options screen.

Hide Popular / Trending / Previous Searches Suggestions in the popup under the search box

The latest version of FBP (v14) has an option to hide this. Its located under the "Top Nav Bar Options" heading on the FBP options screen.

Hide the "To use the newest experience of Facebook, switch to a supported browser." banner at the top of the page

/* Hide the "To use the newest experience of Facebook, switch to a supported browser." banner at the top of the page */
div.fbPageBanner {display:none}

Set a background image for the top nav bar

/* Set a background image for the top nav bar */
#blueBarDOMInspector>div { background-image:url('https://www.myfreetextures.com/wp-content/uploads/2015/01/lots-of-grass-background.jpg') !important }

Hide the "Set as Background" link beneath photos

The latest version of FBP has an option that lets you show or hide the "Set as Background" button, the option is located under the "Font Colour & Design" heading on the FBP options screen.

Show Full URLs for shared External Links in the Newsfeed

F.B. Purity now has a built in option to show the full URLs

Change the edit comment button to be easier to see

Please note, you can change the button to any 12x12 icon image you like, just replace the https image URL with one of your choosing

/* Make the Edit Comment Button easier to see */
._xw0._xw9, ._xw0._xw9:hover { background-image: url(https://i.imgur.com/q95aajc.png) !important; background-position:0px 0px !important;background-size:12px 12px !important }

Hide the attach image to comment camera icon

/* Hide the attach image to comment camera icon */
div.UFIPhotoAttachLinkWrapper {display:none}

Hide images added to comments (N.B. This doesn't affect emoticons or stickers, FBP has a separate option to hide those))

/* Hide images that have been added to comments */
div.UFICommentContent a[href*="photo.php"][rel="theater"] {display:none}

Hide the "A friend is typing a comment / Someone is typing a comment" box

F.B. Purity now has a built in option to hide this, under the "More Options" heading on the FBP options screen

Hide all comments on posts. (If you are Fed up with seeing negativity and getting drawn into long drawn out arguments in the comments, hide all the comments sections completely with this code)

/* Hide all comments on posts */
.commentable_item {display:none}

Hide the box at the top left of a video showing the number of viewers currently watching

/* Hide the box at the top left of a video showing the number of viewers currently watching */
div[data-tooltip-content="Number of people watching now"],div[data-testid="live-cvc"] {display: none}

Display Full Date and Time under posts rather than just "x hours ago"

F.B. Purity now has a built in option for doing this.

Get rid of Facebook's new smiley emoticons graphics

Facebook have started replacing text smileys with graphical smileys in Facebook comments.

The latest version of the F.B. Purity browser extension has a built in option that lets you turn off or hide Facebook's graphical smileys / emoticons, and replaces them with their text equivalent, if/when its available.

Hide the live reactions that fly across the Live Video screen as they happen

Tick FBP's hide Graphical Emoticons/Smileys option, and it will also hide the live reaction icons that fly across the live video.
Facebook has now added a button to live videos that lets you turn off the live display of reactions.

Hide Stickers in comments on posts

/* Hide Stickers in comments*/
div.UFICommentContent div[data-testid="ufi_comment_sticker"] {display:none}

Hide Animated Gif reactions in comments on posts

The latest version of F.B. Purity has an option to hide Animated Gifs in Comments, the option is located under the "Font, Colour & Design" heading on the FBP options screen.

Hide animated gifs and images in Polls

/* Hide animated gifs and images in Polls */
div[role="button"] ._4s7t img { display: none }

Please note: As far as i can tell theres no way to differentiate between animated gifs and normal images in the poll buttons, so this code hides both, it leaves the buttons behind with just the text in the buttons, unfortunately a side effect of hiding the image means the instant display of the poll results percentage also get hidden, you can check the results by clicking on the text that shows the number of vote below the poll, you should also still be able to vote though.

Hide emoticons / emoji popup that shows above comment boxes

/* Hide emoticons / emoji popup that shows above comment boxes */
div._6n_0 {display: none}

Hide animations that show when the word "congrats" is typed in a comment or status

F.B. Purity now has a built in option to hide the Text animations when the following words or phrases: congrats / xoxo / lmao / rad / you got this! are typed in statuses or comments. The option is located under the "Font, Color & Design" heading of the FBP options screen.

Hide the "Products Shown:" box below posts from a Page

/* Hide the "Products Shown:" box below posts from a Page */
div._5r6 {display:none}

Please note you can hide the whole post that features "Products shown:" at the bottom of it, by using F.B. Purity's Text Filter function which filters post from the newsfeed, just put the text Products Shown: into the Text Filter box, if you want that.

Get the square profile icons and rectangular comment boxes back

The latest version of F.B. Purity has an option under the "Font, Color & Design" heading to return the Rounded profile icons back to squares and also return the rounded comment boxes back to rectangles.

Show more of your online friends in the chat box

The latest version of F.B. Purity has a built in option called "Show More Friends" under the "Chat Options" heading, that fits more of your online friends in the Chat List in the right hand column by making each entry narrower

Change Bubble Chat back to the normal old style chat interface

The latest version of F.B. Purity has a built in option for changing the bubble chat back to the older more straight forward chat interface. The hide "bubble chat" options is under the "More Options" heading.

Hide the offline users from the chat box available users list

The latest version of F.B. Purity, has a built in option to hide the offline users in chat

Hide all "Like" Buttons/Links

/* Hide all "Like" Buttons/Links */
a.UFILikeLink, .PageLikeButton, a[data-testid="UFI2ReactionLink"] {display:none}

Hide the row of users profile pics showing people who have liked a post

/* Hide the row of users profile pics showing people who have liked a post*/
li._44l9 {display:none}

Make comment "Liked" links easier to see for Color Blind People by adding a border around the "Like" button

/* Highlight the comment "Like" button with blue border for colour blind people */
div[aria-label="Remove Like"] *, div[aria-label="Remove Love"] *, div[aria-label="Remove Care"] *, div[aria-label="Remove Haha"] *, div[aria-label="Remove Wow"] *, div[aria-label="Remove Sad"] *, div[aria-label="Remove Angry"] * {border-bottom: 3px solid blue !important}

Hide the cover image completely

/*Hide the cover image */
.coverPhotoImg {display:none}

Hide Videos in Profile Headers aka Timeline Cover Videos

/* Hide Videos in Profile Headers aka Timeline Cover Videos */
#pagelet_page_cover video, #fbProfileCover video, #PagesCoverElementContainerPagelet video {display:none}

Remove the dark gradient from the bottom of the cover image on Timelines

/* Remove the dark gradient from the bottom of the cover image on Timeline pages */
#fbProfileCover .coverBorder, #fbProfileCover div {background:none !important}

Hide The Newsfeed Completely

Find the constant updates on the news feed a distraction and Want the whole newsfeed gone?

The latest version of FBP has a built in option to Hide the Newsfeed.

Change the background colour of the header bar at the top of the page

*Update* The latest version of F.B. Purity, has a built in option to let you change the colour of the header bar, its under the heading "Top Nav Bar Options"

Hide the "Create Photo Album" link in the Composer box on the newsfeed

/* Hide Create Photo Album link in composer box */
#pagelet_composer div.flashUploaderOverlayButton, #pagelet_composer a[ajaxify^="/album/uploader/?"] { display: none }

Hide the "Write Note" button on the newsfeed page

/* Hide the "Write Note" button*/
#pagelet_composer a[ajaxify='/notes/composer/']{display:none}

Hide the button bar below the status update box

/* Hide the button bar below the status update box */
#feedx_sprouts_container div._16ve {display:none}

Hide the "Partly False Information / Checked by independent Fact checkers" opaque barrier screen so you can see the underlying images without having to click the "See Photo" button

/* Hide the "Partly False Information / Checked by independent Fact checkers" opaque barrier screen so you can see the underlying images without having to click the "See Photo" button */
._cgv ._8s8y ._f_c { background-image: none !important } a[role="button"][ajaxify^="/feed/misinfo"], ._cgv i , ._cgv ._f_6 {display: none}

Hide the "This photo may show violent or graphic content" opaque barrier screen so you can see the underlying images without having to click the "See Photo" button

/* Hide the "This photo may show violent or graphic content" opaque barrier screen so you can see the underlying images without having to click the "See Photo" button */
._cgv ._f_e {-webkit-filter: blur(0px) !important;} ._cgv ._f_6 {display: none} ._cgv ._f_c {background:transparent !important}

Change the colour of the icons in the top nav bar (works on webkit browsers only: chrome,safari,opera,maxthon etc)

You can't easily choose the colour you want, but you can experiment at changing the colour by replacing the value 70 in the code, with a value between 1 and 360.

/* Change the colour of the top nav bar icons */
#pagelet_bluebar a.jewelButton, #navPrivacy, #userNavigationLabel { -webkit-filter: hue-rotate(70deg)}

You can no longer change the colour of the notification icons in the top nav bar, but...

You can't change the colour of the notification icons since Facebook made them black. You can however change the background colour for the notification icons, this will make them stand out if you have changed the background colour for the page or the top navbar to black, or you have set a background image and the area behind the icons is black. /* Change the background colour of the notification icons in the top nav bar */
#pagelet_bluebar a.jewelButton>div {background-color: #232323 !important}

Hide the Notifications bell icon, that shows you how many notifications you have, in the top navigation bar

/* Hide the Notifications bell in the top navigation bar */
#fbNotificationsJewel, div[role="banner"] div[aria-label^="Notifications"] {display:none !important}

Change the Facebook "F" logo in the top left corner

FBP now has a built in setting to let you change the "f" logo at the top right, the setting is located under the "Fonts, Colors and Design" section of the FBP options screen

If you dont like F.B. Purity's "FBP" button in the top nav bar, you can hide it with the following code

/* Hide the FBP Button in the top navbar*/
#FBPBUTT {display:none !important}

Please note if you hide this link, you will not be able to open the FBP options screen, so you wont be able to change your FBP settings.

How to hide the "X" (hide post) button that F.B. Purity adds at the top right of posts in the newsfeed

/* hide the "X" (hide post) button FBP adds to posts in the newsfeed */
a.hidepostlink {display:none}

If you dont like the colour of the "FBP" button in the top nav bar, you can change it with the following code

/* Change the colour of the FBP Button in the top navbar*/
#FBPBUTT {color:blue !important}

Or for an alternative colour, that blends in with Facebook's colour scheme a bit more, try replacing "blue" with #D8DFEA (which is a light grey) or you can use any CSS or HTML colour code you prefer.

Change the background colour of the F.B. Purity Information Bar

If for some reason you would like to change the colour of the FBP info bar, you can use the following code:

#fbpurityinfobar {background-color:lightyellow !important} You can of course replace "lightyellow" with any valid HTML/CSS colour code.

Hide the F.B. Purity Information Bar (i.e F.B. Purity hid x apps hid x extras)

If you want to hide the F.B. Purity info bar at the top of the newsfeed that shows how many apps and extras were hidden, use the following code

#fbpurityinfowrapper {display:none}

Hide the "F.B. Purity Settings" link that is shown in the Facebook triangle menu

/* Hide the "F.B. Purity Settings" link that is shown in the Facebook triangle menu */
#FBPOptionsMenuLinkContainer {display:none}

Hide the "Block App" button that gets added to game/app dialog boxes

/* hide the block app button */
#blockapplab {display:none}

Hide "Tag Suggestions" prompts under photos

/* Hide photo "Tag Suggestions" prompts */
div[data-tag-suggest-photo], div._5cne {display:none}

Hide the Donate buttons that appear below some posts in the Newsfeed

/* Hide the Donate buttons that appear below some posts in the Newsfeed */
div._3bvn > div._4ury > div._2ph_ {display: none}

Alternatively if you want to completely hide the posts that feature the donate button, you can put the following text into the Text Filter box: "is raising money for" (Without the quote marks)

Make it easier to see if you have liked a comment or not (the 2 shades of blue Facebook uses to indicate whether you have liked a comment or not are nearly indistuinguishable for some people

/* Make it easier to see if you have liked a comment */ a[aria-label="Remove Like"] { border: 2px red solid;}

The above code draws a red box around a "like" link below a comment if you have liked it

Center align images in the newsfeed (useful in conjunction with the expand newsfeed option)

/* Center align images in the newsfeed */
._5v3q ._4-eo { margin-left: auto; margin-right: auto;} ._6m5 { margin-left: auto; margin-right: auto;} ._6n_ { margin-left: auto; margin-right: auto;} ._5vb_ ._5aqh { margin-left: auto; margin-right: auto;} ._2a2q { margin-left: auto; margin-right: auto;} div._5mly._45oh { margin-left:auto ;margin-right:auto} uiScaledImageContainer _5ind {margin-left:auto;margin-right:auto}

Hide or Minimise the Invite Members section in Groups

Here are a couple of snippets to choose from:
This snippet hides the whole right column in groups
/* Hide entire right hand column in groups */
#pagelet_group_rhc {display:none} This snippet minimises the Invite Members box by hiding the list of potential invitees, but still lets you search and invite people
/* Minimise the "invite members" section in the right hand column of groups */
#pagelet_group_rhc div.uiScrollableArea {display:none}

Hide the recent group photos in the right hand column on group pages

/* Hide recent group photos in right hand column of group pages */
.groups_rhc a[rel="theater"], ._38my, ._4t39 {display:none}

Hide the "Recommended by the Admins" section on group pages

/* Hide the "Recommended by the Admins" section on group pages */
._z9n {display:none}

Hide the "Active this week" and "Discover Members" boxes on group pages

/* Hide the "Active this week" and "Discover Members" boxes on group pages */
div[id*="EntGroupsMYSKFeedObject:a"] {display: none}
**Update** I have added hiding the "Discover Members" section to FBP's hide "People You May Know" option, located under the "More Options" heading on the FBP options screen.

Hide the "Suggest Tags" box at the top of Group pages

/* Hide the "Suggest Tags" box at the top of Group pages */
div[id="contentCol"][class*=" group"] form[action*="&nux_type=member_suggesting_tags"] {display: none}

Hide the Facebook "News" button in the top navigation bar

/* Hide the Facebook News button in the top navigation bar */
a[aria-label^="News"] {display:none}

Hide the Facebook "Events" button in the top navigation bar

/* Hide the Facebook Events button in the top navigation bar */
a[aria-label^="Events"] {display:none}

Hide the Lock icon/quick help button in the top nav bar

The latest version of F.B. Purity has a built in option to hide this. Its under the Top Nav Bar Options heading.

Hide the "Home" link in the top nav bar (its not required because, clicking the facebook logo in the top left of the page also takes you to your newsfeed aka "home")

The latest version of F.B. Purity has a built in option for hiding this, its under the "Top Nav Bar Options" section

Hide the counter next to the "Home" link in the top nav bar (the counter is just designed to make you keep checking your feed)

The latest version of F.B. Purity has a built in option for hiding this, its under the "Top Nav Bar Options" section

Hide the "Find friends" link in Facebooks top navigation bar between the link to your "Profile" page and the link to "Home"

Hide the "Find Friends" link at the top right hand side of the page in the navigation bar

/* Hide find friends link / (top right nav bar)*/
#findFriendsNav { display:none; }

Hide the notifications counter (the red box showing the number of notifications above the bell icon in the top navigation bar)

/* Hide the notifications counter (the red box showing the number of notifications above the bell icon in the top navigation bar) */
#notificationsCountValue { display: none!important}

Hide the "People You May Know" section in the Friend Requests notifications dropdown box and also on timeline pages

/* Hide the "People You May Know" section in various places */
#fbRequestsPYMKContainer, #pagelet_pymk_timeline, #pagelet_timeline_main_column div[title="Other People You May Know"] {display:none}

Hide the "invite to like page" notifications from the notifications flyout box in the top nav bar

/* Hide the "invited you to like a page" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='notif_type":"fbpage_fan_invite"'],#fbNotificationsFlyout li[data-gt*='notif_type":"pages_you_may_like"'],#fbNotificationsFlyout li[data-gt*='notif_type":"page_invite"'],#fbNotificationsFlyout li[data-gt*='notif_type":"p2p_friend_migration"'] { display: none }

Please note the above code wont stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

That should work to hide the "invited to like page" notifications (though not the red indicator or counter, just the actual invitation line in the notifications flyout box)

Hide the "invite to play a game or use an app" notifications from the notifications flyout box in the top nav bar

/* Hide the "invite to play a game or use an app" and "app request" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"app_invite"'],#fbNotificationsFlyout li[data-gt*='"notif_type":"app_request"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

That should work to hide the "invited to play a game" notifications (though not the red indicator or counter, just the actual invitation line in the notifications flyout box)

Hide there's a popular post you may have missed from "Page X" notifications

/* Hide there's a popular post you may have missed from "Page X" notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"page_highlights"'] { display: none }

Hide the "You can follow Person/Page/Celebrity" etc type notifications

/* Hide the "You can follow Person/Page/Celebrity" etc type notifications */
a[href^="https://www.facebook.com/discover_public_figures/?entry_point=notification"][role="link"], a[href*='notif_t=public_figures_to_follow_for_public_entity'] { display: none }

Hide the "This group is popular with people like you" type notifications

/* Hide the "This group is popular with people like you" type notifications */
a[href*='notif_t=recommend_group_to_pe'] { display: none }

Hide the "You've been recognized as one of _____'s top fans" notifications

/* Hide "You've been recognized as one of _____'s top fans"*/
#fbNotificationsFlyout li[data-gt*='"notif_type":"top_fans_fan"'] { display: none }

Hide the "Birthday" notifications from the notifications flyout box in the top nav bar

/* Hide the "Birthday" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"birthday_reminder"'] { display: none }

Please note the above code won't stop the red indicator from showing up nor the notifications counter from counting it, so you may get "ghost notifications".

Hide the "Like/Liked" and "Reaction/Reacted" notifications from the notifications flyout box in the top nav bar

/* Hide the "Like" and "Reaction" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"like"'], #fbNotificationsFlyout li[data-gt*='"notif_type":"open_graph_action_like"'], #fbNotificationsFlyout li[data-gt*='"notif_type":"feedback_reaction_generic"'], /* new for 2023 */ a[href*="notif_t=feedback_reaction_generic"]{ display: none }

Please note the above code won't stop the red indicator from showing up nor the notifications counter from counting it, so you may get "ghost notifications".

Hide "Accepted invite to like Page" notifications

/* Hide "Accepted invite to like Page" notifications */
a[href*="&notif_t=page_invite_accept_admin"],a[href*="notif_t=follower_invite_accept"] {display:none}

Hide "Reacted to a Page post" notifications

/* Hide "Reacted to a Page post" notifications */
a[href*="&notif_t=page_post_reaction"] {display:none}

Hide "Liked your page" type notifications

/* Hide "Liked your page" type notifications */
a[href*="&notif_t=page_fan"], a[href*="notif_t=fan_profile_v2"] {display:none}

Hide "Followed your Page" notifications

/* Hide "Followed your Page" notifications */
a[href*="&notif_t=page_follow"],a[href*="notif_t=follow_profile"] {display:none}

Hide the "shared your post" type notifications

/* Hide the "shared your post" type notifications */
a[href*="notif_t=story_reshare"] {display:none}

Hide the "is live Now" / "was live" Live Video notifications

/* Hide "is live Now" / "was live" Live Video notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"live_video'] { display: none }

Please note the above code won't stop the red indicator from showing up nor the notifications counter from counting it, so you may get "ghost notifications".
**UPDATE** Facebook have added a setting on Facebook's options screen that lets you turn off "Live" notifications.

Hide the "added to her story / added to his story / added to their story" type notifications

/* Hide the "added to her story / added to his story / added to their story" notifications */
#fbNotificationsFlyout li[data-gt*='notif_type":"direct_message_story"'] {display:none}

Please note you can also hide these types of notifications using Facebook's own controls, by hovering over the notification, then clicking the 3 dots menu button that appears in the right hand corner, then selecting "Turn off these notifications"

Hide the "Posted a life event" type notifications

/* Hide the "Posted a life event" type notifications */
#fbNotificationsFlyout li[data-gt*='notif_type":"profile_recent_life_events"'] {display:none}

Please note you can also hide these types of notifications using Facebook's own controls, by hovering over the notification, then clicking the 3 dots menu button that appears in the right hand corner, then selecting "Turn off these notifications"

Hide "Watch Party" type notifications

/* Hide Watch Party type notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"watch_party'] { display: none }

Please note the above code won't stop the red indicator from showing up nor the notifications counter from counting it, so you may get "ghost notifications".

Hide the "Poke" notifications

/* Hide the "Poke" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"poke"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "let person x know if you can make it to their event" event reminder notifications

/* Hide the "let person x know if you can make it to their event" event reminder notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"event_invite_reminder'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Friend/s are interested in going to an event near you today/tomorrow notifications

/* Hide the "Friend/s are interested in going to an event near you today/tomorrow" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"event_joined_nearby'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "A Page you Liked" added an event near you notifications

/* Hide the "A Page you Liked" added an event near you notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"event_calendar_create'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Invited you to chat with him/her on Messenger" notifications

/* Hide the "Invited you to chat with him/her on Messenger" notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"messenger_invitation"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Page Post is performing better than x% of other posts on that page. Promote it to get even better results." / "Boost your posts" / "People who like (Your Page) haven't heard from you in a while" notifications

/* Hide the "Page Post is performing better than x%" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"aymt'], div[data-gt="{\"ref\":\"notif_page\"}"] li[data-gt*='"notif_type":"aymt'],a[href*="aymt_tip=1"] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "(Your Page) got more new likes this week, keep up the good work!" notifications

/* Hide the "(Your Page) got more new likes this week, keep up the good work!" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"page_fan_growth'], div[data-gt="{\"ref\":\"notif_page\"}"] li[data-gt*='"notif_type":"page_fan_growth']{ display: none}

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Do you know Person X" / "Friend Suggestion" notifications

/* Hide the "Do you know Person X" / "Friend Suggestion" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"pymk_email'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the popular / top post in groups notifications

/* Hide the popular / top post in group notification */
#fbNotificationsFlyout li[data-gt*='"notif_type":"group_highlights"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the 'You have unopened "Saved" items' notification

/* Hide the you have unopened Saves (saved items) notification */
#fbNotificationsFlyout li[data-gt*='"notif_type":"heavy_save_reminder"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the Page 'Just posted for the first time in a while' notification

/* Hide the 'Just posted for the first time in a while' notification */
#fbNotificationsFlyout li[data-gt*='"notif_type":"page_reengaged"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Friend" 'Just posted for the first time in a while' notification

/* Hide the "Friend" 'Just posted for the first time in a while' notification */
#fbNotificationsFlyout li[data-gt*='"notif_type":"reengaged_producer_post"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "There's a safety check for (Crisis Name), Learn more, check on friends or mark yourself safe" notifications

/* Hide the "There's a safety check for (Crisis Name), Learn more, check on friends or mark yourself safe" notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"crisis_lite_invite"'] { display: none }

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Marked themselves as safe" / "Marked himself as safe" / "Marked herself as safe" has been marked safe from crisis type notifications

/* Hide the "Marked themselves safe" / "Marked himself safe" / "Marked herself safe" from crisis type notifications */
#fbNotificationsFlyout li[data-gt*='notif_type":"crisis_status"'] {display:none}

Please note you can also hide these types of notifications using Facebook's own controls, by hovering over the notification, then clicking the 3 dots menu button that appears in the right hand corner, then selecting "Turn off these notifications"

Hide the Person x "is raising money for" / "invited you to contribute to a good cause" "Fundraiser" notifications

/* Hide the "Fundraiser" / "Is raising money for" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"fundraiser_for_story_creation_top_friends"'],#fbNotificationsFlyout li[data-gt*='"notif_type":"user_fundraiser_'] {display: none}

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "Friend Requests" in your "Bell" notifications

/* Hide the "Friend Requests" in your "Bell" notifications */
#fbNotificationsFlyout li[data-gt*='"notif_type":"friend_request_reminder'] {display: none} div[aria-label="Notifications"] a[href*="/friends/requests/"] {display:none}

Please note the above code won't stop the red indicator or notifications counter from counting it, so you may get "ghost notifications".

Hide the "invited you to join Instagram" notification

Facebook gives you an option to hide all notifications of this type, by clicking the chevron icon at the top right of the notification.

Hide the "your friend left a review" notification

Facebook gives you an option to hide all notifications of this type, by clicking the chevron icon at the top right of the notification.

Hide the "Friend X posted for the first time in a while" notification.

Facebook gives you an option to hide all notifications of this type, by clicking the chevron icon at the top right of the notification.

Hide the "You last updated your profile x weeks ago" notification Facebook gives you an option to hide all notifications of this type, by clicking the chevron icon at the top right of the notification.

Please note: If there is a particular notification type you want to hide that is not listed above, check Facebook's Notification Settings page as you can turn off various Facebook notification types there

Hide the "Recommended Pages", "Game / App Requests", "Pokes","Birthday" reminders,"Events" reminders, "Related Groups" box in the right hand column

The latest version of FBP has built in options to hide these (under the "hide links in right column" section)

Hide the "Create Event" link

If you would like to hide the "Create an event" link on the right hand side, use the following code

/* Hide the "Create Event" link on the right hand side */
#birthday_reminders_link[ajaxify="/ajax/plans/create/dialog.php"] {display: none !important}

Hide the "Chat with Page" bar under Page posts in the Newsfeed*/

/* hide chat with page bar on page posts */
div.clearfix._2cct {display:none}

Hide the whole of the right hand column

F.B. Purity now has a built in option to hide the whole of the right column, its under the "Hide Right Column Links" section of the FBP options screen.

Hide the "Stories" section in the right column of newsfeed

The latest version of FBP has an option to hide the "Stories" box in the right column, under the "Hide Right Column Links" heading on the FBP options screen

Hide the "Rooms" box located under the Status Composer box

FBP has an option to hide the "Rooms" box, it is located under the "More Options" heading on the FBP options screen. You can also hide it using the following Custom CSS code. /* Hide the "Rooms" box located under the Status Composer box */
#video_chats {display:none !important}

Hide the "Stories / Reels / Rooms" box that shows at the top of the Newsfeed above the Status composer box

Hide the "Stories / Reels / Rooms" box at the top of the Newsfeed /* Hide the "Stories / Reels / Rooms" box at the top of the Newsfeed */
div[data-pagelet="TopOfHome"] {display:none}

Hide "Add this photo to your story message below your uploaded photos

/* Hide "Add this photo to your story message below your uploaded photos */
div._1kyo {display:none}

Hide the "Watchlist" section in the right column of newsfeed

The latest version of FBP has an option to hide the "Watchlist" box in the right column, under the "Hide Right Column Links" heading on the FBP options screen

Hide the "Happening Now" box in the right hand column

The latest version of FBP 29.1.5 now has an option to hide the "Happening Now" box. It is located under the "Hide Right Column Links" section of the FBP options screen. Alternatively, you can use the following Custom CSS code to hide it:
/* Hide the "Happening Now" Box in right hand column */
#pagelet_live_destination_rhc {display:none !important}

Hide the "Suggested Members" section on group pages

/* Hide the "Suggested Members" section on group pages */
#groupsRHCMembersFacepile+div { display:none }

Please note: If the above code doesnt work for hiding "Suggested Members", try the following instead:

/* Hide the "Suggested Members" section on group pages */
#groupsRHCMembersFacepile+div+div { display:none }

Hide the "Wondering Who's Here", "See what members are recommending" and "Conversation Starter" boxes at the top of Group Pages

/* Hide the "Wondering Who's Here" / "See what members are recommending" box at the top of Group Pages */
#mall_card_xhp_id {display:none}

Hide group member badges on posts in groups (Please note this also hides moderator/admin badges)

/* Hide group member badges on posts in groups */
div[id*="feed_subtitle_"] a[ajaxify^="/groups/member_bio/"], a[ajaxify*="/groups/member_bio/"][href*="/badge_member_list/?badge_type="], img[alt="badge icon"] {display:none}

Hide "Top Fan" badges on Facebook Pages

/* Hide "Top Fan" badges on Facebook Pages */
a[href="#"] div._3x69, div[aria-label="Identity Badges"] {display:none}

Hide the "Blue tick"s for Verified Accounts

/* Hide the "Blue tick"s for Verified Accounts */
i[aria-label="Verified Account"]{display:none}

Hide the "Suggested" events boxes on the events/calendar/ page

/* Hide the "Suggested" events boxes on the events/calendar/ page */
div[class="_kql _4-u2 _4-u8"]{display:none}

Change the background colour of unread notifications

/* Change background colour of unread notifications */
li._33c._4af div.anchorContainer *, #notifications_stream div._bqf._2vp7._2pi8 *, li.jewelItemNew *, #content div[data-testid="NOTIF_LIST_TEST_ID"] li._4vba { background-color: pink !important} div[data-testid="chevron"]>a { background-color: transparent !important }

Hide the activity counters in the left hand column

F.B. Purity now has a built in option to do this, its under the "Hide Left Column Links" option

Hide the "metrics" (number of comments and likes) beneath posts in the newsfeed

/* Hide the "metrics" (number of comments and likes) beneath posts in the newsfeed */
div._1vaq, div._ipo {display:none}

Hide the "Instantly send this message to X and talk to them directly box

/* Hide the "Instantly send this messasge to X and talk to them directly box */
div._5aj7 {display:none !important}

Hide the "Newsfeed" Link in the Left Column

/* Hide the "Newsfeed" Link in the Left Column */
#navItem_4748854339 {display:none !important}

Hide the dating link in the left column

Hide the "Dating" link in the left column
/* hide the dating link in the left column*/ a[href*="/dating"] {display:none}

Hide the "Portal" link in the left column

/* Hide the "Portal" link in the left column*/
a[href^="https://portal.facebook.com"] {display:none}

Hide the "Campus" link in left column of Newsfeed

The Latest version of FBP has a built in hide left column link option to hide this link

Hide the Climate Science Information Center link in the left column

The Latest version of FBP has a built in hide left column link option to hide this link

Hide "Voting Information Center" link in Facebook's left hand column

The latest version of F.B. Purity has a built in option to hide this, its located under the "Left Column Links" heading on the FBP options screen

Hide the "See Election Results" section below election related posts in the Newsfeed

/* Hide the "See Election Results" section below election related posts in the Newsfeed */
a[href^="/votinginformationcenter"] {display: none}

Hide the "Send or Request Money" link in the Left Column of the Newsfeed

One way to hide it, is to tick the hide "Payments Section" option under the "Left Column Links" heading on the FBP options screen, or else you can use the following CSS code

/*Hide the "Send or Request Money" link in the Left Column of the Newsfeed*/
#navItem_1713727008865937 {display:none !important}

Hide the "Facebook Pay" link in Facebook's left hand column

The Latest version of FBP has a built in hide left column link option to hide this link

Hide the "Lift Black Voices" link in Facebook's left hand column

The latest version of F.B. Purity has a built in option to hide this link

Hide the "Quiet Mode" link in the Left Column of the Newsfeed

/* Hide the "Quiet Mode" link in the left column of the Newsfeed */
#navItem_1774424265950746 {display:none}

Hide the "Oculus" link in the left column

F.B. Purity now has a built in option to hide the "Oculus" link

Hide the "Creator Studio" link in Facebook's left column

F.B. Purity now has a built in option to hide the "Creator Studio" link

Hide the "Games Arcade" link in the left column

Tick the hide "Games" option (in the Left Column Links section of the FBP options screen)

Hide the "Shops" link in the left column

F.B. Purity now has a built in option to hide the "Shops" link, its located under the "Left Column Options" heading.

Hide the "Marketplace" link in the left column

The latest version of FBP has a built in option to hide this. This option also now hides the "Recently Viewed in Marketplace" box that appears on the right of the page. Just tick the hide "Marketplace" link option under the "Hide Right Column Links" heading on the FBP settings screen

Hide the "Rentals you may like on Marketplace", "Still available in Marketplace" and "Top Picks in Marketplace" box in the right hand column

Just tick the hide "Marketplace" link option under the "Hide Right Column Links" heading on the FBP settings screen

Hide the "Deals" in Marketplace (works on old facebook design)

/* Hide the "Deals" in Marketplace (works on old facebook design) */
a[href^="/marketplace/deals"] {display:none}

Hide the "Insights" link in the left column

The latest version of FBP has a built in option to hide this

Hide the "Manage Apps" link in the left column

Tick the hide "Developer Section" option under the "hide left column links" section of the FBP options screen to hide this

Hide the "New Stories" box that pops up when you have been idle on facebook for a while

The latest version of F.B. Purity has a built in option to hide this, its under the "More Options" heading, and titled "'New Stories' Popup Button"

Hide the "Create a Frame" link in the left column

The latest version of FBP has a built in option to hide this

Hide the "Viewing Most Recent Stories - Back To Top Stories" box

/* Hide the 'Viewing Most Recent Stories - Back to Top Stories' Box */
div._4-u2.mvm._495i {display:none}

Hide FBP's "Switching to Most Recent" message that flashes briefly when "Sort: Most Recent" option is switched on

Please note if you use this code, when fbp switches you to "Most Recent" you will see the page reload, but you won't know why.

/* Hide FBP's "Switching to Most Recent" message */
#switchsortmsg {display:none}

Hide the red "Watch vid (no ads)" links FBP adds above videos

/* Hide the red "Watch vid (no ads)" links FBP adds above videos */
a.noadvid {display:none !important}

Hide the "Auto Remove Recent Logins with FBP" option on the logout / login screen

/* Hide the "Auto Remove Recent Logins with FBP" option on the logout / login screen */
#rmrecentloginsdiv {display:none !important}

Hide the pop-up bar that appears saying "Get Updates From "Page" in Your Newsfeed" when visiting a Fan Page

In the latest version of FBP, if you tick the "hide Nagging Questions" option under the "Timeline Options" heading, it will also hide this popup

Hide the "sticky" navbar that appears on Timeline pages after you scroll down past the cover image

/* Hide the "sticky" navbar that appears on Timeline pages after you scroll down past the cover image */
div.fbTimelineStickyHeader {display:none}

Hide the "Welcome" link under the Favourites heading in the left column

The latest version of F.B. Purity has a built in option under the "Hide links in left column" section for hiding this.

Hide the "Browse" link under the Favourites heading in the left column

The latest version of FBP has a built in option for hiding this, see the "hide links in left column" section of the options screen.

Hide the "Apps & Games" link in Facebooks left hand side column bar, under the "Apps" heading

F.B. Purity now has a built in option to hide this link, just tick the "App Center / Games" link under the Hide links in left hand column section of the options screen.

Hide "Facebook Camera" link in Facebook's left hand side column bar, under the "Apps" heading

/* hide "Facebook Camera" link in Facebook's left hand column */
#navItem_app_248477021839123 {display:none}

Hide "Messenger Kids" link in Facebook's left hand side column bar

FBP now has a built in option to hide this under the "Left Column Links" section of the fbp options screen

Hide "COVID-19 Information Center" link in Facebook's left hand column

The latest version of F.B. Purity has a built in option to hide this link, under the "Hide links in left column" heading on the FBP options screen

Hide the Covid box that Facebook inserts at the bottom of Coronavirus/Covid-19 related posts in the Newsfeed

/* Hide the Covid box that Facebook inserts at the bottom of Coronavirus/Covid-19 related posts in the Newsfeed */
a[href^="https://www.facebook.com/coronavirus_info/?page_source"],a[href^="https://www.facebook.com/coronavirus_info/facts?page_source"] { display: none }

Hide "COVID-19" stuff on Facebook Page admin interface

/* Hide the Covid-19 tab at the top of Facebook Page admin interface */
a[href^="/coronavirus_business_info/"],a[href^="/business_resources/] {display:none !important}

/* Hide the Covid-19 button in Pages status update box */
div[data-sprout-tagger-id="COVID_BUSINESS_POST"], td.fbReactComposerAttachmentSelector_COVID_BUSINESS_POST,li.fbReactComposerAttachmentSelector_COVID_BUSINESS_POST {display:none !important}

Hide the "Climate Science Info" box that Facebook inserts at the bottom of Climate Change related posts in the Newsfeed

/* Hide the "Climate Science Info" box that Facebook inserts at the bottom of Climate Change related posts in the Newsfeed */
a[href*="/climatescienceinfo/"] { display: none }

Hide the "Tips for your Page" + Stories + Reels header section that Facebook shows at the top of your Newsfeed when you are logged in as a Page admin

/* Hide the Page Tips + Stories + Reels header that facebook shows at the top of your Newsfeed when you are logged in as a Page admin */
div[aria-label="profile plus top of feed cards"] {display:none}

Hide the "Live Videos" link in the left column

The latest version of F.B. Purity has a built in option to hide this link, under the "Hide links in left column" heading on the FBP options screen

Hide "Gaming Videos" link in Facebook's left hand side column bar

The latest version of FBP has a built in option for hiding this, see the "hide links in left column" section of the options screen.

Hide the "Recent Ad Activity" link in the Left Column

F.B. Purity now has a built in option to hide this link

Hide the "Buy & Sell Groups" link aka "Sale Groups" in the left column side bar

F.B. Purity now has a built in option to hide this link

Hide "F.B. Purity News" link in Facebook's left hand side column bar, under the "Pages" heading

The latest version of FBP has a built in option for hiding this link, see the "hide links in left column" section of the options screen.

Hide the "Promote" link that shows when you post to your Timeline / News feed

/* Hide the promote link from newsfeed posts*/
a[ajaxify^="/fbml/ajax/dialog?app_id=122214254528646"], a.itemAnchor[ajaxify^="/fbml/ajax/dialog?app_id=122214254528646&_path=pay"] {display:none !important}

Hide the Boost / Promote buttons on Facebook Fan Pages (for Facebook Page admins)

/* Hide the Boost / Promote Button on Facebook Fan Pages */
div[title="How Boosting a Post Works"],div[title^="Boost your popular post"],.fbBoostedPostPopoverButton, .promotedPostButton, #pagelet_boosting_widget, #boostedPagelikePanel, #admin_panel_likes, a.promoteButton, div.-cx-PRIVATE-HubblePostsTable__promote, #profile_page_insights_hubble button[type=submit], a[ajaxify^="/ajax/timeline/promote?story_fbid"], div.adminPanelContentFanAcq, div.fbBoostedPostTimelineFooter, button[data-testid='boosted_post_button'], button[data-testid='boosted_post_button_with_id'], #pagelet_advertiser_panel a[data-testid='boosted_post_button_with_id'],#boosted_ccta_springboard, ._4-u2._5l2a._5sun._4-u8, #megaphone_story_3012, div._sig, #pages_manager_boosted_website_card,#boosted_website_springboard, ._2pyx, #aymt_news_feed_post_footer_tip, div[title="Help Your Audience Take Action"],#aymt_page_post_footer_tip, #fbNotificationsFlyout li[data-gt*='"notif_type":"aymt'],#automated_ads_upsell_image, #automated_ads_upsell_headline, #automated_ads_upsell_description, body.hasPagesManagerNavbar table.uiGrid._51mz span button.selected._4jy4[value="1"], div[title="How Boosting a Post Works"],div[data-testid="NOTIF_LIST_TEST_ID"] a[href*="notif_t=aymt_"], #pagelet_timeline_main_column div._1td8>div._1td9,button[data-tooltip-content="Boost your post to reach more people"],form.commentable_item button[aria-disabled="true"][aria-haspopup="true"],div._4-u2._2l01._4-u8, div._1xnd div._1xnd > div._4-u2._3-96._4-u8,a[href*="/promotions/"],#pages_manager_boosted_automated_ads_card, button[data-tooltip-content="Promote your Page to get more Likes"], button[data-tooltip-content="Get people you care about to visit your website"],a[href*="/?boosted_auto_open=boosted"],a[href*="aymt_tip=1"] {display:none !important}

Hide the extra big boxes under the update Page status box, showing the different post types (for Facebook Page admins)

/* Hide the extra big boxes under the update Page status box, showing the different available post types */
body.pagesTimelineLayout table._20ia._2pie._2pio.uiGrid._51mz {display:none}

Hide the "Create" bar above the Page status update box, featuring Live, Event, Offer, Job (for Facebook Page admins)

/* Hide the "Create" bar above the Page status update box, featuring Live, Event, Offer, Job */
#PagesComposerConsolidatedEntry {display:none}

Hide the big buttons under the status box letting you choose your post type at bottom of status box

/* Hide the big buttons under the status box letting you choose your post type at bottom of status box (for normal users)*/
#feedx_sprouts_container table.uiGrid._51mz._5f0n[cols="2"] {display:none !important}

Hide the Ad Center tab on Fan Page Admin interface

/* Hide the Ad Center tab on Fan Page Admin interface */
a[href*="/ad_center/"] {display:none}

Hide the Appointments tab on Fan Page admin pages

/* Hide the Appointments tab on Fan Page admin pages */
a[href$="/appointments/"] {display: none !important}

Hide the Inbox tab on Fan Page admin interface

/* Hide the Inbox tab on Page admin interface */
#content ul[role="tablist"] li a[href*="/inbox"][aria-selected="false"] {display:none}

Hide the "Manage Jobs" tab on Fan Page admin interface

/* Hide the "Manage Jobs" tab on Fan Page admin interface */
ul[role="tablist"] li[itemcontentclass] a[href*="/manage_jobs/"] {display:none}

Hide the "Get Gift Cards" button on Page admin interface on Page status update box

/* Hide the "Get Gift Cards" button on Page admin interface on Page status update box */
div[data-tooltip-content="Get Gift Card Purchases"], td.fbReactComposerAttachmentSelector_GIFT_CARD_PURCHASE,li.fbReactComposerAttachmentSelector_GIFT_CARD_PURCHASE {display:none !important}

Hide the "Tag Products" button on Page admin interface on Page status update box

/* Hide the "Tag Prodcuts" button on Page admin interface on Page status update box */
div[data-tooltip-content="Tag Products"], td.fbReactComposerAttachmentSelector_TAG_PRODUCT,li.fbReactComposerAttachmentSelector_TAG_PRODUCT {display:none !important}

Hide the "Support Nonprofit" button on Page admin interface on Page status update box

/* Hide the "Support Nonprofit" button on Page admin interface on Page status update box */
div[data-tooltip-content="Support Nonprofit"], td.fbReactComposerAttachmentSelector_FUNDRAISER,li.fbReactComposerAttachmentSelector_FUNDRAISER {display:none !important}

Hide the coloured boxes/squares (for setting status background colour) in status update box

FBP now has a built in option to hide those boxes, its located under the "Font, Colour & Design" section of the FBP options screen.

Hide the "Turn on Selling Features" box that appears under your Status posts if it mentions anything to do with selling

/* Hide the "Turn on Selling Features" box that appears under your Status posts if it mentions anything to do with selling */
div._43wq {display:none}

Hide the "Page Tips" Box on Facebook Pages you admin

/* Hide the Page Tips Box on Facebook Pages you admin */
div._4-u2._3qan._4-u8, #page_goal_card_channel {display:none}

Hide the "Pages to Watch" box on "Like Page" admin dashboard

/* Hide the "Pages to Watch" box on "Like Page" admin dashboard */
#admin_panel_insights > div[data-gt*='PageAdminPanelCompetitiveInsightsPagelet'] {display:none}

Hide the "Save Post" menu item on posts in the Newsfeed

/* Hide the "Save Post" menu item on posts in the Newsfeed */
li.save_caret_menu_item {display: none;}

Hide the "Take a Survey to improve News Feed" Chevron Menu item

/* Hide the "Take a Survey to improve News Feed" Chevron Menu item */
a[href^="/survey/stars_dialog?entrance="] {display:none}

Hide Instagram photos / posts from Timeline pages

/* Hide all Instagram photos / posts from Timeline pages */
div.timelineUnitContainer[data-gt*='app_id":"124024574287414'] { display: none }

Hide the "Featured For You" section at the top of Fan Pages

/* Hide the "Featured For You" section at the top of Fan Pages */
body.pagesTimelineLayout div._1jyk._3xaf {display:none}

Hide the "Contact Pages" box at the top of the chat sidebar in the right hand column

/* Hide the "Contact Pages" box at the top of the chat bar */
div._4kqp {display:none !important}

Hide the "More Ways To Create" box in the right column of groups

/* Hide the "More Ways To Create" box in the right column of groups */
#rhc_gysc_hscroll {display:none}

Hide the Related Videos Box in the Right Hand Column of Video Pages

/* Hide the Related Videos Box in the Right Hand Column */
#video_permalink_related_pagelet {display:none !important}

Hide the "Up Next" Videos in the Right Hand Column of Video pages

/* Hide the "Up Next" Videos in the Right Hand Column of Video pages */
div._2e7p div._3dj7._1rgv {display: none}

Hide the "Top Videos from Watch" box that shows when a video ends

/* Hide the "Top Videos from Watch" box that shows when a video ends */
div._8g3g {display:none}

Hide the related discussions button below posts in the Newsfeed

/* Hide the related discussions button below posts in the Newsfeed */
div[style="align-items: center; display: flex; flex-shrink: 0;"] { display: none !important }

Hide the Related Events Box in the Right Hand Column of Event Pages

/* Hide the Related Videos Box in the Right Hand Column of Event Pages */
#event_related_events {display:none !important}

Hide the "Your Ads" section in the right hand column of the newsfeed

/* Hide the "Your Ads" section in the right hand column of the newsfeed */
#pagelet_advertiser_panel {display:none}

Hide the new toolbar at the top of Facebook Games and App pages

/* Hide games toolbar */
#toolbarContainer {display:none}

Hide the send money button in Chat

The latest version of F.B. Purity has an option to hide the Send Money ($) button in Facebook Chat. The option is under the "Chat Options" heading. If you don't see the option, re-install FBP for the latest version.

Hide the Thumbs Up button in Chat

/* Hide the thumbs up button in chat */
a[aria-label="Send a Like"] { display: none}

Hide the "go online to chat" etc header on the messages page

/* Hide the "Go online to chat" etc header on the messages page*/
.messaging_nux_header {display:none}

Hide the notification popup boxes that appear in the bottom left corner of the screen

The latest version of FBP has a built in option for hiding the notification box, the option is under the "More Options" heading on the FBP options screen

Hide the Facebook footer (the bit at the bottom of the page that says "Privacy· Terms · Advertising· Ad Choices· Cookies · Meta © 2022")

/* Hide the Facebook "Footer" (the bit at the bottom of the page that says "Privacy· Terms · Advertising· Ad Choices· Cookies · Meta © 2022") */
footer[aria-label="Facebook"][role="contentinfo"] {display:none} /* Hide the map section of Check-In posts in the newsfeed */ #stream_pagelet a[rel="dialog"][ajaxify^="/places/map/?id="] {display:none}

Hide Specific Information Blocks / Boxes / Sections on Timeline Pages

Hide Intro Box on Timeline Pages /* Hide Intro Box on Timeline Pages */
div.timelineReportContainer[data-gt*='"timeline_unit_type":"IntroCardUnit"'] {display:none} Hide the Friends box on Timeline / Profile Pages /* Hide the Friends box on Timeline / Profile Pages */
div[data-gt*="FriendsEgoReportUnit"],#profile_timeline_tiles_unit_pagelets_friends {display:none !important} Hide the "friend has x new posts" text in the Friends box on Timeline pages /* hide "has new posts" text on friends section of other peoples Timeline/Profile pages */
#profile_timeline_tiles_unit_pagelets_friends td._51m- div._34mw { display: none } Hide the Likes box on Timeline Pages /* Hide the Like boxes on Timeline Pages */
div[data-gt*="LikesEgoReportUnit"], /* General Likes */ div.timelineReportContainer[data-gt*='"app_id":"2409997254"'], /* Books */ div.timelineReportContainer[data-gt*='"app_id":"332953846789204"'], /* TV Shows*/ div.timelineReportContainer[data-gt*='"app_id":"309918815775486"'], /* Movies */ div.timelineReportContainer[data-gt*='"app_id":"177822289030932"'], /* Music */ div.timelineReportContainer[data-gt*='"app_id":"221226937919712"'], div.timelineUnitContainer[data-gt*="TimelinePagesLikedPagesUnit"] {display:none !important} Hide the Recent Activity box section on Timeline Pages /* Hide the Recent Activity box on Timeline Pages */
div[data-gt*="RecentActivityUnit"] {display:none !important} Hide the Facebook Games / Facebook Application boxes section on Timeline Pages /* Hide the Games / Applications box on Timeline Pages */
div[data-gt*="PlatformAppUserActionSpikeUnit"], div[data-gt*="249944898349166"],div[data-gt*="PlatformAppUserActionUnit"],#pagelet_timeline_medley_games {display:none !important} Hide the Facebook Places box sections on the left hand side of Timeline Pages /* Hide the Facebook Places box on left hand of Timeline Pages */
div[data-gt*="302324425790"] {display:none !important}

Hide most left hand boxes on new Timeline page (apart from Photos and Recent Activity)

/* Hide most boxes in Timeline's left hand column, apart from photos and recent activity */
div.timelineReportContainer[data-gt*="AppSectionEgoUnit"], li[data-side="r"] div.bottomBorder, li[data-side="r"] div.topBorder {display:none !important}

Hide Facebook Questions posts on Timeline pages (new timeline design)

/* Hide Facebook Questions posts from new timeline pages */
div[data-gt*="AnswerQuestionAggregateUnit"] {display:none !important}

Hide the nagging questions in the "About" box on your own Timeline page (new timeline design), and above your newsfeed asking you to update your details

/* hide questions in the "About" box asking you to update your Timeline profile */
li.-cx-PRIVATE-fbTimelineAboutUnitQuestion__root, #timeline_profile_questions_unit, #nf_megaphone_school_add_content, #nf_megaphone_school_add, #timeline_info_review_unit {display:none}

Hide the What Life Events would you like to share? box on your Timeline page

/* Hide the What Life Events would you like to share? box on your Timeline page */
#timeline_info_review_unit { display: none }

Hide the requests to "Add books, TV Shows, Films, Music etc" on your Timeline page (new timeline design)

/* Hide "suggested" Music / Books / TV Shows / Movies / likes on your own timeline (profile) pages */
div.-cx-PRIVATE-fbTimelineAppSection__addCuration {display:none}
N.B. You can actually hide the Music / Books / TV Shows / Movies / etc boxes on your own timeline page completely if you wish, by hovering over the boxes you want to hide, then clicking the pencil icon, then select the option to hide the box.

Hide the "Invite your friends to like this Page" box, at the top of Fan Pages

/* Hide the "Invite your friends to like this page" box */
#NonAdminInvite, div#fbpage_invite_audience_action_finch {display:none}

Hide "Like Page" buttons on shared items in the newsfeed

FBP now has a built in option to hide these, its under the heading "Links and Pages" under the Newsfeed Filter options.

Hide the "Similar to" popup, that gets displayed when you like a post from a "fan page"

N.B if you have the "Hide Sponsored Box" option ticked, it should also hide the "Similar To" popup box.

Hide the "Become a supporter" box beneath posts in the Newsfeed

/* Hide the "Become a supporter" box beneath posts in the Newsfeed */
div._7aon {display:none}

Completely Hide hashtags in posts in the newsfeed

/* Hide hash tags in newsfeed posts */
a[href^="https://www.facebook.com/hashtag/"][role="link"] {display:none}

Make hashtags look like normal words

/* make hashtags look like normal words */
div.userContent span[aria-label="hashtag"]{display:none} div.userContent a[href^="/hashtag/"] {color:initial} div.userContent a[href^="/hashtag/"] :hover {text-decoration: none !important}

Set a background image for Facebook

The latest version of F.B. Purity has a built in option for setting the Background image for Facebook, its under the "Font, Colour and Design" heading of the FBP options screen.

Make the background of posts in the newsfeed transparent (goes well with FBP's new background image option)

N.B The 0.8 value in the code is the transparency value which can be set from 0 for full transparency to 1 to completely opaque.

/* Transparent background for posts in newsfeed */
div.fbpnormal,div.fbpblocked,div.fbpblockedx { background-color: rgba(255,255,255,0.8) !important } #contentArea div[data-dedupekey]>div, div.UFIContainer,li.UFILikeSentence, li.UFIRow {background-color:transparent !important}

Hide the random image header at the top of friends / interest list pages

F.B. Purity now has a built in option to hide this, its under the "List Options" heading of the options screen, and is called "Hide Random Header Image".

Hide the "Poke Suggestions" box

/* Hide Poke Suggestions box */
#pagelet_pysp {display:none}

Hide the "Set Facebook as your Homepage" box that keeps popping up when you log off

To hide the dialog box that is displayed when you logout of facebook, asking you to set Facebook as your homepage

#ConfirmBannerOuterContainer, #SetAsHomepage_Callout {display:none}

Hide the Olympics link / button in the left column

/* Hide the Olympics link / button in the left column */
a[href^="https://www.facebook.com/hubs/olympics_hub/"] {display:none}

Hide the "Buy a Gift" link on Birthday Reminder flyout boxes, in the left column

The latest version of FBP has a built in option for hiding Facebook Gifts, its under the "More options" section of the options screen.

Hide the lists / groups / apps / pages in the left hand column of the homepage

The latest version of F.B. Purity has a built in option to hide this. (See the "hide links in left column" section of the FBP options screen)

Hide "Smart" Friend lists (i.e. the automatically created friend lists based on school / work / college / location) in the left column of the newsfeed

Watch the instruction video and read the video's description for more info on how to hide the so called "smart" lists.

Hide the following links : "Like Pages", "Pages Feed", "Create a Page", "Create an Ad / Adverts Manager", "Developer", "Friends", "App Center", "Games Feed", "Places Editor", "Questions", "Notes", "Pokes", "Connect", "Music", "Find friends" in the left hand column

The latest version of F.B. Purity has built in options to hide these, they are under the "Hide Links in Left Hand Column" section.

Hide the Shortcuts / Favorites section in the left column

FBP now has a built in option to hide this section, its located under the "Left Column Links" heading on the FBP options screen.

Hide page suggestions at the top of the Pages Feed

/* Hide page suggestions at the top of the Pages Feed */
div.megaphone_location_pages_feed {display:none}

Hide "Page Transparency" Section in Right hand column of "Page" Timelines

/* Hide Page Transparency Section in Right hand column of "Page" Timelines */
#PagesProfileHomeSecondaryColumnPagelet div._4-u2._3xaf._7jo_._4-u8 { display: none }

Completely Hide Pinned Posts/Announcement posts in a Group

/* Hide a group's pinned posts / announcement posts */
#pagelet_announcement_posts, #pagelet_pinned_posts {display:none}

Hide Pinned Posts / Announcement Posts in a Group, but display the posts when you hover over them

/* Hides group's pinned posts / announcement posts until mouse over */ #pagelet_announcement_posts div:nth-child(2),#pagelet_pinned_posts div:nth-child(2) {height:0px;overflow:hidden;opacity:.5;} #pagelet_announcement_posts:hover div:nth-child(2),#pagelet_pinned_posts:hover div:nth-child(2) {height:auto;opacity:1;}

Display a warning sign on public posts, in case you don't like commenting on or liking public posts for privacy reasons

FBP now has a built in option to do this, titled "Highlight Public Posts" and its located under the "Further Options" heading on the FBP options screen

Highlight any shared external links with a bright red border.

Sometimes Shared links look just like native Facebook photos, due to the big image that accompanies the link, this code will highlight any shared links in the newsfeed by putting a big red border around them. Please note this code will also highlight facebook videos, but thats just a side effect. If you can figure out how to stop the code doing this, let me know.

/* Highlight external shared links */
div.clearfix._2r3x {border:5px solid red}

CSS Tip: How to temporarily disable some CSS code, or leave comments in the code, so you can remember what the code does

You can label your code snippets with comments, so when you come back to the code at a later date you can remember what it does, you can also use CSS comments to disable CSS code, if you place the comment markers "/*" and "*/" around the code you wish to disable. You can write comments that wont get interpreted by the browsers CSS interpreter as follows

/* This is a CSS comment that wont get interpreted by the browser, and can be used to label CSS snippets */ /* #listsNav {display:none}
this code has been disabled as it has CSS comment markers surrounding it */

Be careful not to wrap comments within comments, as it most probably wont work.

CSS Tip: What to do if you make a mistake with Custom CSS and hide the whole page and can't open the FBP options screen to edit the CSS

Right click anywhere on the page and select "Inspect Element" then click the "Console" tab and enter the following line of code document.getElementById('fbpfreestyler').textContent='' that will temporarily reset FBP's style and Custom CSS data, allowing you to see the page again and open the FBP options screen again, so you can fix the CSS.

 

If you would like to learn more about CSS, the book: "CSS : The Missing Manual", is a good choice. You can purchase on Amazon USA or Amazon UK There are also lots of really good resources on the web on the subject of CSS. Heres a good one for example: W3Schools.com CSS Tutorials / Reference

There are also lots of example Facebook CSS themes at Userstyles.org

You can discuss using F.B. Purity's the Custom CSS Box below, in particular, if you have any interesting or useful CSS "recipes" or tweaks for Facebook, please share them, a little explanation of what the code does, would also be useful, thanks!

How to Disable Autoplay Videos on Facebook



 

N.B "Facebook" is a registered trademark of Facebook Inc. This site and script are neither endorsed by or affiliated with Facebook.