Customize Firefox with CSS

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

Comments are closed.

Recent Cycling

  • 31.90 miles on 09/15/17
  • 9.30 miles on 09/09/17
  • 8.70 miles on 09/08/17
  • 8.60 miles on 09/04/17
This Month:

0.00 miles

Last Month:

0.00 miles

This Year:

354.90 miles

Last Year:

604.10 miles