What is userChrome.css? What can it do?

Posted by jscher2000 on November 5, 2017; updated November 25, 2017

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css are applied to the user interface, and can override nearly every built-in style rule. Unfortunately, you cannot use userChrome.css to change the functional operation of Firefox; that's what extensions are for.

Creating a userChrome.css file and adding style rules allows you to make changes to fonts and colors, hide unnecessary items, adjust spacing, and make other changes to the appearance of Firefox. The following examples illustrate the wide range of effects you can create, either by creating your own style recipes, or building on the work of CSS wizards sharing their talents on the web.

Hide Unwanted Menu Items

Do you have Sync set up, but no mobile bookmarks?

CSS:

/* Hide Mobile Bookmarks from Toolbar Bookmarks Menu */
#BMB_mobileBookmarks {
  display: none !important;
}

Among other sources, this was discussed in a Mozilla Support thread: how do I delete the mobile bookmarks folder? If you wanted to hide everything above your own bookmarks, you could use:

/* Hide Top Items on Bookmark Menu Button drop-down */
#BMB_viewBookmarksSidebar, 
#BMB_bookmarksShowAllTop, 
#BMB_bookmarksShowAllTop + menuseparator, 
#BMB_recentBookmarks, 
#BMB_recentBookmarks + menuseparator, 
#BMB_bookmarksToolbar, 
#BMB_unsortedBookmarks, 
#BMB_mobileBookmarks, 
#BMB_mobileBookmarks + menuseparator {
  display: none !important;
}

 

Color in Gray Bookmark Folder Icons

CSS (download SVG fill) (updated 24 Nov 2017):

/* Colored folders for bookmark sidebar, toolbar, menu button, classic menu
   Updated Nov. 24, 2017 */

  /* Standard folder */
#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
  fill: #e8bb00 !important; /* slightly muted gold */
}
  /* Live Bookmark (RSS Feed) */
#bookmarks-view treechildren::-moz-tree-image(container, livemark),
#PlacesToolbarItems toolbarbutton[container="true"][livemark="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][livemark="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][livemark="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"][livemark="true"] .menu-iconic-icon {
  fill: orange !important;
}
  /* Smart bookmark folder */
#bookmarks-view treechildren::-moz-tree-image(container, query),
#PlacesToolbarItems toolbarbutton[container="true"][query="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"][query="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"][query="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"][query="true"] .menu-iconic-icon {
  fill: #69c !important; /* similar to blue smart folder color */
}
  /* These "containers" are SVG in the sidebar, not yet on the menu */
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar) {
  fill: olive !important;
}
#bookmarks-view treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks) {
  fill: olive !important;
}
/* Avoid overriding classic Bookmarks Toolbar and Other Bookmarks icons in menus */
#BMB_bookmarksPopup #BMB_bookmarksToolbar .menu-iconic-icon, 
#bookmarksMenu #bookmarksToolbarFolderMenu .menu-iconic-icon {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
}
#BMB_bookmarksPopup #BMB_unsortedBookmarks .menu-iconic-icon, 
#bookmarksMenu #menu_unsortedBookmarks .menu-iconic-icon {
  list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png") !important;
}

There is a discussion about the original version of this style recipe, and other variations on the theme, on Mozilla's support forum at All bookmarks have grey folders-update 56.

Old Icons Variation: (A) download this zip file containing the style sheet and old images from Firefox 56: Fx56_bookmark_buttons.zip; (B) extract all contents into the chrome folder; (C) if you do NOT have a userChrome.css file, rename userChrome-STARTER.css to userChrome.css; (D) if you DO already have a userChrome.css file, copy the line from userChrome-STARTER.css to the top of your userChrome.css file to include the userChrome_Fx56_bookmark_icons.css file. Firefox will pick up the change at your next startup.

 

Move the Tab Bar Below the Other Toolbars (like Firefox 1.0-3.6)

CSS (download) (updated 28 Nov 2017):

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* If you display either:
   (1) The title bar, or
   (2) On Windows, the menu bar
   You might not want the following extra space above the main toolbar. 
   In that case, delete the following rule:
*/
#navigator-toolbox {
  padding-top: 20px !important;
}

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

There are multiple style recipes to change the order of these toolbars, including:

 

Expand the Bookmarks Toolbar to Multiple Rows

There are multiple style recipes to "wrap" the bookmarks toolbar, including:

 

Rearrange the Address Bar Drop-Down List

Perhaps you prefer the two-row display from before Firefox 48?

You can choose from various autocomplete drop-down styles here: URL Bar Tweaks - Remove Visit/Search & Limit Width – userChrome.css Style Builder.

Ready to Give It a Try?

If you have a user interface tweak in mind, these pages may help:

Related Questions

What's Chrome got to do with it?

If you mean a browser named Chrome, nothing. Mozilla has used to term chrome to refer to the user interface of its browser since it developed Firefox's predecessor, the Mozilla Suite. Another company liked it so much they named a bunch of products after it. But you definitely do not need those products to create or use a userChrome.css file in Firefox.

Is this the same as userChrome.js?

No, not at all. See the following page for an overview of how a JavaScript file named userChrome.js might be applied to Firefox: What is userChrome.js?.