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}

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 annoying "Coming Soon: Timeline, a new kind of profile.Learn more." section at the top of Timeline pages

/* Hide the 'Coming Soon: Timeline' section at the top of Timeline pages */
#pagelet_above_header_timeline {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" link in the nav bar, you can hide it with the following code

/* Hide the TL Link */
#TLJewel {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(2) { display:none; }

Hide the "Find friends" link in Facebooks left hand side column bar, under the "Favourites" heading

If you want to get rid of the "find friends" link under the "favorites" heading in the left hand column, add the following code

/* hide find friends link in left hand column */
#navItem_app_2356318349 {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 "Connect" section in the left hand column, including the "Find Friends" and "Invite Friends" links

/* Hide the "Connect" section in the left hand column*/
#connectNav {display:none}

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

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

/* hide Music link in left hand column */
#navItem_app_119960514742544 {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 the "Games Feed" link in Facebooks left hand side column bar, under the "Apps" heading

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

/* hide Games Feed link in left hand column */
#navItem_app_261369767293002 {display:none}

Hide the "Interests" section in the left hand side column

/* Hide the "Interests" section in the left hand side column */
#interestsNav { display:none; }

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

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

/* hide Questions link in left hand column */
#navItem_app_10150110253435258 {display:none}

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

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

/* hide Notes link in left hand column */
#navItem_app_2347471856 {display:none}

hide "Pokes" link in Facebook's left hand side columnbar, under the "Apps" heading

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

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 */
#pagelet_reminders [href="/events/create/"] * { display: none !important;}

Hide the "App Requests" Outstanding link

/* hide the "App Requests" outstanding link in the right hand side column */
#pagelet_reminders [href="/games?ref=reminders"] * {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 side column. #rightCol {visibility:hidden}

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

To make the Lists section of the left hand column go away.

/*Hide the "Lists" Section in the left hand column*/
#listsNav {display:none}

To make the Groups section of the left hand column go away.

/*Hide the "Groups" Section in the left hand column*/
#groupsNav {display:none}

To make the Apps section of the left hand column go away.

/*Hide the "Apps" Section in the left hand column*/
#appsNav {display:none}

To make the Pages section of the left hand column go away.

/*Hide the "Pages" Section in the left hand column*/
#pagesNav {display:none}

Hide the "Trending Articles" box

/* Hide the Trending Articles box */
.ogAggregation {display:none}

N.B the latest version of F.B. Purity has a built in option for hiding this, as well as fixing the new article links so they dont redirect via an application first

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

/* Hide the rectangular notification popup boxes that appear in the bottom right corner of the screen */
#BeeperBox {display:none}

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 Strip of Photos at the top of Profile pages

This code hides the strip of photos at the top of user profile pages and the new style Fan Pages too.

/* hide top strip of photos */
#pagelet_photo_bar {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 {display:none} #SetAsHomepage_Callout {display:none}

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.

 

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



 

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.