F.B. Purity Custom CSS - Customize Your Facebook How You Like It

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 colour across the site

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

* {color:red}

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 its available.

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

Stop the Timeline Cover Photo taking up soo much space at the top of the page

This snippet lets you reduce the height of the cover photo, so it doesnt hog so much of the screen real estate

/* Make the Timeline Cover Photo Shorter*/

.cover {height:100px !important}

.coverWrap {height:150px !important}

#pagelet_timeline_nav {margin-top:-10px}

#fbTimelineHeadline .name a, #fbTimelineHeadline .name .fsm {background:rgba(255,255,255,0.5)}

Hide the cover image completely

/*Hide the cover image */

.coverPhotoImg {display:none}

Hide the wide horizontal "Friends" Box at the top of Timeline pages

/* Hide the wide horizontal "Friends" Box at the top of Timeline pages */

#pagelet_escape_hatch_people {display:none}

Hide the wide horizontal "Interests" Box at the top of Timeline pages

/* Hide the wide horizontal "Interests" Box at the top of Timeline pages */

#pagelet_escape_hatch_interests {display:none}

If you dont like FB Purity's "TL" button in the nav bar, you can hide it with the following code

/* Hide the TL Button */

#TLJewel {display:none}

Hide the Lock icon in the top nav bar

/* Hide lock icon in top navigation bar */

#navPrivacy {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")

/* Hide lock icon in top navigation bar */

#navHome {display:none}

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)*/

#pageNav > li:nth-child(3) { display:none; }

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

/*Hide the "Welcome" link in the left column*/

#navItem_app_156203961126022 {display:none}

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

If you want to get rid of the "Apps + Games" link under the "Apps" heading in the left hand column, add the following code

/* hide Apps & Games link in left hand column */

#navItem_app_140332009231 {display:none}

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 the "Promote" link that pops up when you post to your Timeline / newsfeed

/* Hide the promote link from newsfeed posts*/

a[ajaxify^="/fbml/ajax/dialog?app_id=122214254528646"] {display:none}

Hide the Boost / Promote button on Facebook Fan Pages (for facebook page admins)

/* Hide  the Boost / Promote Button on Facebook Fan Pages */

.fbBoostedPostPopoverButton, .promotedPostButton  {display:none !important}

Hide the "Promote and Share" link on newsfeed stories dropdown menu

/* Hide the "Promote and Share" link on newsfeed stories dropdown menu */

a.itemAnchor[ajaxify^="/fbml/ajax/dialog?app_id=122214254528646&_path=pay"] {display:none !important}

Hide all Instagram posts from the newsfeed

/* Hide all Instagram photos / posts from the newsfeed */

li.aid_124024574287414 {display:none !important}

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 Game / App Requests links in the Right Hand Column

/* hide the "Game / App Requests" links in the right hand side column */

#birthday_reminders_link[data-gt^='{"appid":'] {display:none}

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 side column. #rightCol {visibility:hidden}

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 (Updated March 21st 2013)

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 Likes box on Timeline Pages */

div[data-gt*="LikesEgoReportUnit"] {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 Places / Recent Places Map box section on Timeline Pages


/* Hide the Recent Activity box on Timeline Pages */

div[data-gt*="PlacesEgoReportUnit"] {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*="TimelineOpenGraphReportUnit"] {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 Game and App posts on Timeline pages (new timeline design)


/* Hide app and game posts from new timeline pages */

div[data-gt*="PlatformAppUserActionSpikeUnit"] {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 questions in the "About" box on your own Timeline page (new timeline design) asking you to update your details

/* hide questions in the "About" box asking you to update your Timeline profile */

li.-cx-PRIVATE-fbTimelineAboutUnitQuestion__root {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 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.

Change the font size only for the News Feed

This ones changes the font size of just the newsfeed and the comments on the feed. First make sure you dont have the "Set" checkbox ticked next to font size in the FBP options. Then copy and paste the following code into the Custom CSS box. You can change the values for the font size to whatever you like.


div.actorName {display:inline; margin-right:3px !important}  a.subject, div.preview, .mall_post_body_text, textarea, input, td, h3, h4, h5, h6 {font-size:14px !important;}
div.commentContent {font-size:13px}

Set a background image for your Facebook page

This snippet lets you set a background image for your facebook page, so when you view Facebook, the image will show behind any page on Facebook


body { background-image:url('http://www.wishchristmas.com/backgrounds/christmas_backgrounds_06.gif'); }

You can replace the image with any image on the web you find

Hide the "List Suggestions" box on friends list pages

/* Hide list suggestions box on friends list pages*/

#pagelet_friend_list_suggestions {display:none}

Hide the "Poke Suggestions" box

/* Hide Poke Suggestions box */

#pagelet_pysp {display:none}

Hide the Promote button below status box on Fan Pages

/* Hide the Promote button below status box on Fan Pages */

#pagelet_boosting_widget {display:none}

Hide "Voice Bar" at top of Fan Pages

/* hide voice bar at top of fan pages */

.pagesVoiceBar {display:none !important}>

.voiceBarToggle {display:none !important}

body.hasVoiceBar .fbTimelineStickyHeader {padding-top: 0px}

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 {display:none} #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 Birthday reminders in the right hand column (N.B This also hides the pokes and events section)

/* Hide the birthday reminders in the right hand column */ 

#birthday_reminders_link {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.

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