Just as extensions add functionality and about:config tweaks change behaviour, you can style Firefox's "chrome" using the userchrome.css file. The chrome includes menus, toolbars, tabs, and the address bar—all the outer control area in Firefox—and web developers know that CSS sets colors, sizes, visibility and more. We've already covered how to consolidate Firefox's chrome with style tweaks, but there are still lots of possible ways to change the fox's appearance with userchrome.css. Here's a compilation of my favourite userchrome.css tweaks—add yours in the comments.

 

/* * Do not remove the @namespace line -- it's required for correct functioning */ /* set default namespace to XUL */ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Remove Edit menu (if you already use all the keyboard shortcuts) */
#helpMenu, #edit-menu { display: none !important; }

/* Remove Back button when there's nothing to go Back to */
#back-button[disabled="true"] { display: none; }

/* Remove Forward button when there's nothing to go Forward to */
#forward-button[disabled="true"] { display: none; }

/* Remove Stop button when there's nothing to Stop */
#stop-button[disabled="true"] { display: none; }

/* Remove Home button (never use it) */
#home-button { display: none; }

/* Remove Go button from address bar */
#go-button-stack, .search-go-button-stack { display: none !important; }

/*Remove magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }

/* Eliminate the throbber and its annoying movement: */
#throbber-box { display: none !important; }

/* Show keyword input box when adding a bookmark */
#keywordRow { display: -moz-grid-line !important; }

/* Make the active tab wider */
tab[selected="true"] { min-width: 200px !important; }

Thanks to TheQwerty for my latest addition, the last few lines, which makes the active tab wider than background tabs.

For more on how to edit userchrome.css, see our previous post on consolidating Firefox's chrome. What else have you hand-added to your chrome style? Let us know in the comments.

Tags: