Using custom CSS to remove the new Facebook News Scroller (Chrome & Firefox)

Posted by bbaker in Articles      Comments Off on Using custom CSS to remove the new Facebook News Scroller (Chrome & Firefox)

Sep
21

Early this morning Facebook changed it’s layout once again.  I don’t mind so much, but I really don’t like the news scroller on the upper right side of the page.  I use Facebook enough to know that I don’t want to see it every time that I visit, so I went looking for some ways around it …. I’ll share them with you, but only for Chrome & Firefox (I never use IE except to check my website design layouts).   You only have to make these changes once.  Each time you come back to Facebook, they will automatically take effect.

Chrome

1. Install the Stylebot extension
2. Launch  Stylebot by pressing ATL+M or or clicking on the CSS icon in the address bar 
3. Where is says “Select an element”, insert “#pagelet_rhc_ticker”
4. Scroll  down to “Layout & Visibility”
5. Click the “Hide” button
6. Enter “0” (zero) in the Height field

With Stylebot you can edit the display & layout other items as well, take a look at the extension page to learn more about this.

Firefox

took some directions from http://coreygilmore.com/blog/2008/10/23/per-site-custom-css-in-firefox/

1. Download & add this file userContent.css in your Firefox profile directory, inside of the chrome directory. On OS X this will be inside of <home>/Library/Application Support/Firefox/Profiles/>random characters>.default/chrome/ and %appdata%\Mozilla\Firefox\Profiles\<random characters>.default\chrome on Windows. If you’ve been upgrading since very old versions of Firefox the profile directory might be called default.xxx
2. Restart Firefox.

If you know CSS, you can edit this to your needs for any other site.

That’s it!