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

Custom CSS Box

You can access the Custom CSS box by clicking the "Custom CSS" heading on the FB 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 Custom CSS box.

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

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}

Fix 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.

Show Full URLs for shared External Links in the Newsfeed

/* Show Full URLs for shared External Links in the new Newsfeed design */
div._6m6 a:after { content: attr(href); font-size: 12px; display: block; color: grey; }

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

*Update* FB Purity now has a built in option for doing this.

Get rid of Facebooks new smiley emoticons graphics

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

*Update* The latest version of the FB 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.

Change Bubble Chat back to the normal old style chat interface

The latest version of FB 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

*Update* 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 {display:none}

Hide the cover image completely

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

Remove the dark gradient from the bottom of the cover image

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

Hide The Facebook 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 do this, its under the Beta Options heading of the FBP options screen. N.B this also hides Friends list and Interest list feeds

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"

If you dont like FB 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.

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.

Hide "Tag Suggestions" prompts under photos

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

Hide the Lock icon in the top nav bar

/* Hide lock icon in top navigation bar */
#privacyFlyoutLabel {display:none}

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 FB 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 FB 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 nav 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 "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

/* Hide the "invite to like page" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='notif_type":"fbpage_fan_invite"'] { 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

/* Hide the "invite to play a game or use an app" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"app_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".

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 the "Birthday" notifications from the notifications flyout box

/* 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 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." notifications

/* Hide the "Page Post is performing better than x%" notification lines in the notifications flyout box */
#fbNotificationsFlyout li[data-gt*='"notif_type":"aymt_tip"'] { 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 "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 "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 whole of the right hand column

This code will hide the whole of the right hand column, ads and all the other boxes etc that appear in the right hand column. #rightCol {visibility:hidden}

Hide the activity counters in the left hand column

The latest version of FB Purity has a built in option to do this, its under the "Hide Left Column Links" option

Hide the "Viewing Most Recent Stories - Back To Top Stories" box in the new newsfeed design

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

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 FB 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

FB 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 "Facebook Messenger for iPhone" link in Facebook's left hand side column bar, under the "Apps" heading

/* hide "Facebook Messenger for iPhone" link in Facebook's left hand column */
#navItem_app_237759909591655 {display:none}

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

/*Hide "Facebook Messenger for Android" link in left hand column */
#navItem_app_256002347743983 {display:none}

Hide "FB 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 */
.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_with_id'] {display:none !important}

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 "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 "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 Specific Information Blocks / Boxes / Sections on Timeline Pages

Hide the Friends box on Timeline Pages /* Hide the Friends box on Timeline Pages */
div[data-gt*="FriendsEgoReportUnit"] {display:none !important}
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"

In the latest version of FB Purity (v8.7.0), if you have the "Hide Sponsored Box" option ticked, it will also hide the "Similar To" popup box.

Hide game and app messages from the ticker (including book/film/tv ratings etc)

/* hide game and app messages from the news ticker*/
div.fbFeedTickerStory[data-gt*='"appid":'] {display:none}

Hide hashtags from posts

/* Hide hashtags from posts */
a._58cn {display:none}

Hide the "Trending" topics / hashtags box

The latest version of FB Purity has a new built in option for hiding the "Trending" Box

Set a background image for Facebook

The latest version of FB 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.

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

FB 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 "List Suggestions" box on friends list pages

/* Hide list suggestions box on friend list pages*/
#pagelet_friend_list_suggestions {display:none}

Hide the "Poke Suggestions" box

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

Hide "Voice Bar" at top of Fan Pages

/* hide voice bar at top of fan pages */
.pagesVoiceBar, .voiceBarToggle {display:none !important}>
body.hasVoiceBar .fbTimelineStickyHeader {padding-top: 0px}

Hide the attach image to comment camera icon

/* Hide the attach image to comment camera icon */
div.UFIPhotoAttachLinkWrapper {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}

Change the height of the ticker bar, if you have chat turned off

If you have chat turned off, its not possible to drag to resize the ticker bar, but you can do it with the following code, change the size to whatever you like

/* Change the height of the ticker bar */
div.ticker_container {height:725px !important}

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.

Change the background colour of the FB 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 FB Purity Information Bar (i.e F.B. Purity hid x apps hid x extras)

If you want to hide the FB 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}

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

Hide the lists / groups / apps / pages / interests 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 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 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}

Completely Hide Pinned Posts in a Group

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

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

/* Hides group's pinned posts until mouse over */
#pagelet_pinned_posts div:nth-child(2) {height:40px;overflow:hidden;opacity:.5;} #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 public posts for privacy reasons

/* Display clear warning on public posts to remind you not to comment on them for privacy reasons */
a[aria-label="Public"]:after, a[aria-label="Shared with: Public"]:after { content: "** PUBLIC POST **"; color: red; font-weight: bold; font-size: 20px; }

Hide / Remove the stickers packs from chat that you have added, but dont want to use any more

*Update 14th October*: Facebook have finally added built in remove buttons for hiding sticker packs in the sticker store. However if you actually want to hide stickers completely from Chat, you can now use FBP's built in "hide emoticons / smileys" option to hide them too.

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.


 

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 FB 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!

P.S. Want to disable / delete / remove Facebook Timeline?
Click here for instructions on how to disable / delete Facebook Timeline

How to Get Rid of / Remove Trending Topics on Facebook
Click here for instructions on how to get rid of / remove Trending Topics

How to Disable Autoplay Videos on Facebook
Click here for instructions on how to turn off Autoplay

How to Get Rid of / Remove Trending Topics on Facebook

How to Disable Autoplay Videos on Facebook



 


blog comments powered by Disqus

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