Check Your Technoledge: Functional Firefox User Styles [Firefox]

Tuesday, June 24, 2008

Functional Firefox User Styles [Firefox]

Sent to you by Vihang Shah via Google Reader:

Functional Firefox User Styles [Firefox]

via Lifehacker by Gina Trapani on 6/23/08

Now that you've been running Firefox 3 for almost a week, it's time customize its interface to your liking with a few great user styles. Just like you can add user scripts (JavaScript) to web pages with the Greasemonkey extension, you can also add user styles (CSS) to Firefox's interface with the Stylish extension. While lots of user styles just skin specific web sites with a new look, many can actually improve the browser itself by changing the look and behavior of menus, tabs, dialogs, and buttons—Firefox's "chrome." Let's take a look at some of the best user styles which tweak, customize, enhance, and streamline Firefox's chrome.

How to Install a Stylish User Style

While you can add style code to Firefox's userChrome.css file by hand, it's way easier if you install the Stylish extension for Firefox. Stylish helps you manage your user styles in an easy-to-use interface, where you can create, edit, search, enable, and disable user styles from the add-on's Options dialog, as shown.

First, install the Stylish extension and restart Firefox. Then, to install a user style below, visit its homepage and click the "Load in Stylish" button on its homepage as shown.

Let's take a look at a few Firefox-enhancing user styles.

Enhance Firefox's Interface

These user styles add smart colors and features to Firefox's chrome to make it easier to use.

Italicize unread tab names [Install]—If you open web pages in background tabs often (like by mousewheel clicking on them) when you're browsing lists of links like Google search results or a blog, you'll wind up with several tabs you haven't viewed yet. This user style italicizes the titles of tabs you haven't yet looked at for easy visual identification.

Combine Stop and Reload buttons [Install]—Either Firefox is loading a page (and should show a Stop button), or it's fully rendered a page (and should show a Reload button). This user script combines the Stop and Reload buttons into one that changes functionality depending on the context. Update: Replaced the Smartly show Stop and Reload with this script, which is better implemented. Thanks, _Jonny!

Yellow the location bar for https:// sites [Install]—Firefox 2's noticeable visual cue that you are browsing a site over an encrypted connection—a totally yellow address bar—got pulled from Firefox 3. Re-yellow the location bar on https:// web sites with this user style.

Add a keyword when you bookmark a page [Install]—If you use Firefox's location bar as a command line with keyword bookmarks, this tweak's a must-have for you. This user style displays the keyword field in the Add a Bookmark and Edit Bookmark dialog so you don't have to navigate all the way into the Bookmark organizer to set up your keywords.

Enable multiple tab rows [Install]—While this user style makes your tabs' borders look a little wonky, it's super-handy if you often keep more than 15 or 20 tabs open at once. With this user style installed and several tabs open, instead of scrolling tabs off to the side, this user style stacks them in two rows.

Mac bookmark toolbar favicons [Install]—Add web site icons to your bookmarks toolbar on the Mac with this user style.

Hide Unneeded Buttons, Menus, and Menu Items

If consolidating Firefox's chrome to maximize browsing area is your thing and you're a master of Firefox's mouse and keyboard shortcuts, there's a whole lot of unnecessary bells and whistles that the right user styles can cut out.

Hide the search box magnifying glass and location bar Go button [Install]—You already know you can hit Enter to go to a web site address or run a search from the upper right hand box, so give your text more room to breathe by removing the location bar Go button and search box magnifying glass.

Hide the Edit and Help menus [Install]—If you already know all the keyboard combinations for features in the Edit menu—like Ctrl+C to copy, Ctrl+V to paste, etc—you can remove that menu, as well as the Help menu from the pulldown menu bar. This comes in handy if you want to relocate your location bar to the pulldown menu area to save vertical space, as shown.

Hide the "Open all in tabs" item in bookmark folders [Install]—If you keep bookmarks in folders on your toolbar, each one will have a "Open all in tabs" option on the list. Since you can always mousewheel click the folder to open all links in tabs, this user style removes this item.

Auto-Hide the Bookmarks Toolbar [Install]—Get more vertical space but still have access to your bookmarks toolbar with this user style, which only shows your bookmark toolbar when you hover over it—the rest of the time it's hidden. While this user style can get a bit annoying to folks who move their mouse up to the location bar, if you Ctrl+L often, it's a nice space-saver.

Bonus about:config tweaks

If you've read this far, you get a prize. Have a couple of other useful Firefox configuration tweaks:

What are your favorite user styles for Firefox? Post 'em (preferably with links to userstyles.org) in the comments.

Gina Trapani, the editor of Lifehacker, likes styling Firefox for function instead of looks. Her weekly feature, Geek to Live, appears every Monday on Lifehacker. Subscribe to the Geek to Live feed to get new installments in your newsreader.