Neal Grosskopf Dot Com A NG Designs Site

Neal Grosskopf Dot Com Return To Neal Grosskopf's Home Page a NG Designs Site

Toolbar

  • Skip To
    • Menu
    • Content
  • Validate
    • HTML
    • CSS
    • WAI
  • Font Size
    • Small
    • Medium
    • Large
    • Extra Large
  • Account
    • Create Account
    • Login

Interact

Navigation

  • Home
  • Interact
    • Blog
    • Message Board
    • Open Links
    • Open Videos
    • Photo Gallery
    • Polls
    • Reviews
    • Geek Speak
  • Designs
    • View All Designs
    • Professional
    • Corporate
    • Templates
    • Personal
    • Club
    • NG Designs
    • Web Guides
  • Files
    • Artwork
    • Wallpapers
    • My File Downloads
  • Extras
    • Bookmarklets
    • The Magic 8-Ball
    • Halo Statistics
    • My Web Footprint
    • Career Builder RSS Feed Generator
    • Monster.com RSS Feed Generator

Geek Speak

  • Actions
    • View All
    • View Article Statistics
    • View User Statistics
    • Search
    • Subscribe to RSS Feed

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,  

Subscribe To Feed
loading Subscribers

I'm On Twitter loading

Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Screenshot of the New Facebook home page

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:

Screenshot of 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:

Attribute Value Table
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

Tags: facebook ( Add Tag )


Archived Posts:

  • Find Unused CSS Selectors With CSS Usage, A Firebug Extension
    Posted: 1/27/2010
    Views: 4,935
    Replies: 6
    Tags: css, firefox ( Add Tag )
  • A List of New CSS Features In Firefox 3.6, Set to be Released Tomorrow
    Posted: 1/20/2010
    Views: 7,880
    Replies: 10
    Tags: No Tags ( Add Tag )
  • Create An Icon Bouncing Effect With jQuery & CSS
    Posted: 1/19/2010
    Views: 938
    Replies: 0
    Tags: css, jquery ( Add Tag )
  • A jQuery Tool That Generates External Stylesheets From Your HTML Structure
    Posted: 1/17/2010
    Views: 7,063
    Replies: 9
    Tags: css, html, jquery ( Add Tag )
  • Creating Facebook Styled Photo Tagging With CSS & jQuery
    Posted: 1/3/2010
    Views: 2,734
    Replies: 5
    Tags: css, jquery ( Add Tag )
  • A jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer
    Posted: 12/7/2009
    Views: 2,384
    Replies: 2
    Tags: css, jquery ( Add Tag )
  • Fix The Internet: Write You Own Custom Website CSS Rules With Stylish
    Posted: 10/8/2009
    Views: 1,961
    Replies: 5
    Tags: css, firefox ( Add Tag )
  • Everything You Need To Know About CSS Selector Specificity
    Posted: 9/17/2009
    Views: 7,204
    Replies: 6
    Tags: css ( Add Tag )
  • Identify The Age Of Your Word & PDF Files Using CSS & jQuery
    Posted: 9/8/2009
    Views: 1,268
    Replies: 0
    Tags: css, jquery ( Add Tag )
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • Next >

Font Size:

  • A
  • A
  • A
  • A

Search:

Places:

  • Blog
  • Message Board
  • Chat Room
  • Geek Speak
  • Open Videos
  • Reviews
  • Tag Cloud
 

Site Links

Site

  • About
  • Contact Me
  • Site Map
  • Site Search

Interact

  • Blog
  • Geek Speak
  • Message Board
  • Open Links
  • Open Videos
  • Photo Gallery
  • Polls
  • Reviews

Random Stuff

  • Hosting by FatCow
  • © Copyright 2005 - 2010
  • Modified: Friday, January 22, 2010
  • Load Time: 0.35 Seconds

Site Coded And Designed By Neal Grosskopf Using No Crappy CMS Or Themes