Geek Speak
Geek Speak Tags:
analytics, asp, browser comparision, bug, css, css diagnostics, css hacks, css3, dual-boot, facebook, firefox, flash, font, function, google, howto, html, ie, internet explorer, javascript, jquery, json, microsoft, multi-boot, operating system, organization, os, page jump, pci.sys, php, quotes, rss, seo, setup, television, tri-boot, twitter, validation, web 2.0, xhtml, xml, xsl, youtube,
Subscribers
Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS
New Facebook Home Page
Above is a screenshot of the new Facebook home page. One change on the new page is showing all types of updates rather than just status updates.
Facebook has once again decided to redesign their home page. These types of changes usually result in millions of users joining groups titled "I hate the new design" or something similar. Being a web designer I sympathize with Facebook.
One thing they changed with the recent redesign was removing the "status updates only" option on their home page. I'm now forced to sift through every group, fan page, image and application post my friends have made. Facebook does give me the option to hide specific applications but with 1000's of apps out there, it isn't practical to hide each and every one. Enter Stylish.
Hacking Facebook's CSS
Using a Firefox addon called Stylish I was able to sift through Facebook's HTML & CSS and determine if they did a good job giving their home page elements proper class names and IDs. For whatever reason Facebook uses custom HTML attributes. One of these was called data-ft. The first value in that attribute is a number that represents various home page types. The example below uses "46" which is plan ol' vanilla status updates:
<div class="GenericStory UIStory clearfix aid_718391393" data-ft="{"sty":"46","actrs":"718391393","fbid":"328181226116","s_obj":"11","s_edge":"1","s_prnt":"11"}" id="div_story_1630882208_328181226116"></div>
Show Status Updates Only
By adding the code below into Stylish it will hide ALL types of updates on the Facebook home except for regular status updates:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("facebook.com") {
.GenericStory { display: none !important; }
#pagelet_intentional_stream div[data-ft*='sty":"46'] { display: block !important; }
}
Below is an example of this would be entered into Stylish:
Other Update Types
You could also substitute the number 46 above with one of the below to show only these types of updates by default:
| Update Type | Number Value |
|---|---|
| Fan Page Added | 161 |
| Application | 237 |
| Friend Added | 8 |
| Group Added | 21 |
| Photo Added | 65 |
| Photo Album Added | 247 |
| Video Added | 128 |
To Each His Own
Some people may love seeing everything their friends do on Facebook. I'm more interested in what they have to say and the rest just feels like noise. Feel free to take this code and make it your own.
....Read More >>Posted By: Neal Grosskopf @ 2/8/2010 10:45:00 PM
Replies: 0 | Views: 483
Archived Posts:
-
Posted: 1/27/2010
Views: 4,935
Replies: 6
Tags: css, firefox ( Add Tag ) -
Posted: 1/20/2010
Views: 7,880
Replies: 10
Tags: No Tags ( Add Tag ) -
Posted: 1/19/2010
Views: 938
Replies: 0
Tags: css, jquery ( Add Tag ) -
Posted: 1/17/2010
Views: 7,063
Replies: 9
Tags: css, html, jquery ( Add Tag ) -
Posted: 1/3/2010
Views: 2,734
Replies: 5
Tags: css, jquery ( Add Tag ) -
Posted: 12/7/2009
Views: 2,384
Replies: 2
Tags: css, jquery ( Add Tag ) -
Posted: 10/8/2009
Views: 1,961
Replies: 5
Tags: css, firefox ( Add Tag ) -
Posted: 9/17/2009
Views: 7,204
Replies: 6
Tags: css ( Add Tag ) -
Posted: 9/8/2009
Views: 1,268
Replies: 0
Tags: css, jquery ( Add Tag )