Customize Firefox with CSS

Oct 23, 2009

One of the best things about Firefox is all the add-ons available for it that allow you to get it working in a way that is perfect for you. You can also customize the appearance of the browser without the use of add-ons, by simply using regular CSS to edit the userChrome.css style sheet.

By default there is no userChrome.css file. To make it you first have to find userChrome-example.css at one of these locations:

Windows XP/Vista
C:Documents and Settings[user]Application DataMozillaFirefoxProfilesxxxxxxxx.defaultchrome

Mac OS X
~/Library/Application Support/Firefox/Profiles/[profile-name]/chrome/

Once you find userChrome-example.css in the /chrome directory, make a copy of it to keep the original as a backup, rename the copy userChrome.css and place the copy in the same directory. Firefox looks for userChrome.css here and if it exists will respect the style rules you put in it. Then you simply add your styles, restart Firefox and voila! Here are some examples of common styles:

/* Make the Location (URL) Bar use a bigger font */
#urlbar {font-size: 14pt !important;}

/* Add more space to the Personal Toolbar */
toolbarbutton.bookmark-item {margin: 3px !important;}

/* Force bigger display of folder tree within “bookmark this page” popup */
#editBMPanel_folderTree {min-width:600px !important;min-height:500px !important;}

/* Force wider display of “bookmark this page” popup */
#editBookmarkPanelContent {min-width:600px !important;}

More information on CSS selectors that can be utilized in userChrome.css can be found at: http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs