userstyles.org - Facebook - Sticky Top Nav Bar & More Prettiness

[Edit] [Delete]

This is a tweak that fixes basic usage problems and adds a little prettiness to the new Facebook layout introduced in Feb 2010.

This style has been tested with Firefox and Chrome.

It:
- sticks the position of the top nav bar so it stays on the screen when you scroll
- adds a log out button to the nav bar for easy access
- blinks the new notifications icon to make it more obvious you have new notifications
- also provides some visual tweaks, such as rounding some corners, adding drop shadows, and adding subtle animations (Chrome only).

I will update to fix if the basic functionality is broken by Facebook, and may also add other features.

Note that each feature is commented, so if you do not want a specific tweak, just comment it out or delete that section of the style!

Also, check out Facebook Plus - install it on top of this userstyle to round the corners of your Facebook!
Plastikmaniac has done a great job on it, and keeps it up-to-date.

(Assuming Firefox Chrome Opera Internet Explorer Other )

Latest release:
Update (9/16/11 10:18):
- FIX: Blank space on the top of content
- FIX: Clean up old code that no longer applies

Older releases:
Update (9/4/11 17:52):
- FIX: Blue bar overlapping content on login screen
Update (9/2/11 04:58):
- FIX: Center top nav bar
Update (8/26/11 15:50):
- FIX: Placement of shadow while logged out
Update (8/1/11 14:05):
- FIX: "Set Facebook as your homepage" bar is functional
Update (7/19/11 21:08):
- FIX: Blue bar overlapping chat sidebar
Update (7/16/11 11:45):
- FIX: Support for the new chat sidebar
Update (7/7/11 22:46):
- FIX: Placement of notification flyouts
- FIX: Styles on chat boxes have been redone
Update (6/22/11 21:43):
- FIX: Styles on notification flyouts work again, again
- FIX: Left column on news feed is fixed in place again
Update (6/3/11 21:07):
- FIX: Styles on notification jewels and flyouts work again
Update (4/27/11 13:25):
- FIX: Compatible with "Unfriend Finder" Greasemonkey script
- FIX: Misplaced shadow when logged out
- NEW: Add CSS3 animations for Firefox 5.0 (Should work in Aurora, but doesn't. Will keep testing)
Update (4/13/11 22:58):
- FIX: Reworked the logout button. Has a new position on the nav bar. This should fix most problems with overlapping text, especially on different languages.
- FIX: Slight photo theater transparency works on Firefox now
- NEW: Friends' "Hovercard" has a shadow
- CHG: Shortened all animation times slightly (Still Webkit browsers only)
Update (3/25/11 17:27):
- FIX: Facebook Questions popup now shows correctly
- NEW: Preliminary tweaks/animations for Questions
Update (3/16/11 15:30):
- NEW: Visual tweaks to the photo theater (slight transparency)
- NEW: Fade-in animations on the new photo theater (Webkit browsers only)
Update (2/24/11 16:45):
- FIX: Left column on main page is fixed in place again
Update (2/21/11 12:41):
- FIX: Removed animation code for Firefox as it caused problems (and Firefox isn't supporting CSS3 animations anytime soon)
Update (2/11/11 17:35):
- FIX: Fixed some shadows overlapping items they shouldn't be
Update (2/1/11 16:28):
- FIX: Fixed main login bar not being shown in some circumstances
Update (1/4/11 21:42):
- NEW: (ONLY Webkit browsers like Chrome support this right now) Slide-in animations on menus, chats, and popup dialogs
Update (12/30/10 14:59):
- FIX: Compatibility with the new Facebook Messages
Update (12/21/10 21:51):
- FIX: Search box results now has a shadow
Update (12/8/10 21:42):
- FIX: Better placement of the permanently visible logout button
Update (11/18/10 13:43):
- FIX: Placement of top light blue bar used for home page reminder
- DEL: Removed Facebook Lite code, as it no longer exists
Update (10/22/10 15:04):
- FIX: Fixed pages when logged out
Update (10/19/10 23:18):
- FIX: Updated nav bar code to reflect Facebook changes
Update (7/20/10 22:31):
- FIX: Updated Logout button to appear correctly again
Update (5/21/10 13:51):
- NEW: Support for shadows and rounded edges on Webkit-based browsers (tested on Chrome)
Update (5/16/10 19:24):
- FIX: Shadows under menus work again
- NEW: Facebook logo and notification "jewels" are now rounded
Update (5/10/10 23:54):
- FIX: Left column stays in place again
Update (5/5/10 08:24):
- FIX: Nav bar now shows content correctly again
- FIX: Shadows now work on chat again
Update (5/4/10 18:55):
- FIX: Facebook updated their HTML code; updated code to fix nav bar
Update (2/13/10 03:47):
- NEW: Added a log out button on the nav bar
Update (2/12/10 07:26):
- NEW: Notifications icon blinks when you have new notifications (friend req, messages, and notifications)
- NEW: Drop shadows on menus and the top nav bar
- NEW: Left column of main page is now fixed in place
- FIX: Login page is no longer shifted down

Show code