DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

userChrome.css: Customizing Firefox's UI with CSS (Tab Bar, Toolbar, Compact Mode)

#firefox #css #customization #tutorial

userChrome.css lets you customize Firefox's UI with CSS — changing tab appearance, toolbar layout, sidebar styling, and more. It's a powerful customization tool that survives Firefox updates (mostly).

Enabling userChrome.css

First, enable the legacy CSS customization:

  1. Go to about:config
  2. Search for toolkit.legacyUserProfileCustomizations.stylesheets
  3. Set it to true

Then create the file:

  1. Go to about:support → Profile Folder → Open Folder
  2. Create a folder named chrome inside the profile folder
  3. Create a file userChrome.css inside the chrome folder
  4. Restart Firefox

Now you can add CSS to userChrome.css.

Testing Changes

Changes to userChrome.css require a Firefox restart to take effect.

For faster iteration: Use the Browser Toolbox (about:debugging → This Firefox → Browser Toolbox). This opens DevTools connected to the browser UI itself, letting you inspect and modify the toolbar in real-time.

Access Browser Toolbox:

  1. about:config → devtools.chrome.enabled = true
  2. about:config → devtools.debugger.remote-enabled = true
  3. DevTools → three-dot → Browser Toolbox → Allow

Hiding the Tab Bar

If you use a vertical tab extension (Sidebery, Tree Style Tab), you want to hide the horizontal tab bar:

#TabsToolbar {
  visibility: collapse !important;
}
Enter fullscreen mode Exit fullscreen mode

Or with animation for a smoother feel:

#TabsToolbar {
  height: 0 !important;
  min-height: 0 !important;
}
Enter fullscreen mode Exit fullscreen mode

Compact Tab Mode

Make tabs smaller:

/* Compact tab height */
:root {
  --tab-min-height: 24px !important;
}

#tabbrowser-tabs {
  --tab-min-height: 24px !important;
}
Enter fullscreen mode Exit fullscreen mode

Auto-Hide Bookmarks Bar

Show the bookmarks bar only on hover:

#PersonalToolbar {
  transition: height 0.3s ease;
  height: 0 !important;
  overflow: hidden !important;
}

#nav-bar:hover ~ #PersonalToolbar,
#PersonalToolbar:hover {
  height: var(--bookmark-toolbar-height) !important;
  overflow: visible !important;
}
Enter fullscreen mode Exit fullscreen mode

Note: The exact CSS can change between Firefox versions. If this stops working after an update, use the Browser Toolbox to re-identify the selectors.

Compact Mode (Pre-Firefox 89)

Firefox 89 removed Compact mode from the UI. You can re-enable it:

/* Compact mode */
:root {
  --toolbarbutton-inner-padding: 4px !important;
  --toolbar-button-margin: 0px !important;
}
Enter fullscreen mode Exit fullscreen mode

Or via about:config:
browser.compactmode.show = true → then Settings → General → Density → Compact

Sidebar Adjustments

Make the sidebar wider/narrower by default:

#sidebar-box {
  min-width: 250px;
  max-width: 400px;
  width: 250px !important;
}
Enter fullscreen mode Exit fullscreen mode

Styling Pinned Tabs 

/* Make pinned tabs with specific styling */
.tabbrowser-tab[pinned] {
  background-color: rgba(0, 128, 255, 0.2) !important;
}

/* Make active pinned tab more visible */
.tabbrowser-tab[pinned][selected] {
  background-color: rgba(0, 128, 255, 0.5) !important;
}
Enter fullscreen mode Exit fullscreen mode

Center the Address Bar Content

Some people prefer a centered address bar (like Arc or other opinionated browsers):

/* Center address bar items */
#urlbar-input-container {
  text-align: center !important;
}
Enter fullscreen mode Exit fullscreen mode

Remove Specific UI Elements 

/* Hide the "Pocket" save button */
#save-to-pocket-button {
  display: none !important;
}

/* Hide Firefox logo in about:home (save space) */
.logo-and-wordmark {
  display: none !important;
}

/* Hide "New tab" button */
#tabs-newtab-button {
  display: none !important;
}

/* Hide the "Firefox Sync" icon */
#sync-button {
  display: none !important;
}

/* Hide notifications button */
#appMenu-notification-popup { 
  display: none !important; 
}
Enter fullscreen mode Exit fullscreen mode

Adding Container Color Indicators

Make container (Multi-Account Containers) tab colors more prominent:

/* Thicker container color indicator on tabs */
.tabbrowser-tab[usercontextid] .tab-context-line {
  height: 4px !important;
}

/* Show container color in tab background */
.tabbrowser-tab[usercontextid="1"] {
  background-color: rgba(var(--identity-color-blue), 0.15) !important;
}
Enter fullscreen mode Exit fullscreen mode

Window Buttons Styling 

/* Remove window control buttons (if using a custom WM on Linux) */
.titlebar-buttonbox-container {
  display: none !important;
}
Enter fullscreen mode Exit fullscreen mode

Dark Mode UI Beyond the Theme

If Firefox's built-in dark mode looks wrong on your system:

/* Force specific UI elements to dark */
#nav-bar {
  background-color: #1a1a2e !important;
  color: #e0e0e0 !important;
}

#urlbar-background {
  background-color: #16213e !important;
}
Enter fullscreen mode Exit fullscreen mode

userContent.css (for Web Pages)

userContent.css applies CSS to all web pages. Create it in the same chrome/ directory.

Example: Set a minimum font size on all pages:

@namespace url(http://www.w3.org/1999/xhtml);

body {
  font-size: max(14px, 1em) !important;
}
Enter fullscreen mode Exit fullscreen mode

Example: Force dark background on all pages (rough approximation):

@namespace url(http://www.w3.org/1999/xhtml);

@media (prefers-color-scheme: dark) {
  html:not(.dark) {
    filter: invert(1) hue-rotate(180deg) !important;
  }

  img, video, canvas {
    filter: invert(1) hue-rotate(180deg) !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

This is a rough CSS-only dark mode. For better dark mode: use NightOwl or Dark Reader extension.

Maintenance Across Updates

userChrome.css can break when Firefox updates its internal component IDs.

How to fix: Open the Browser Toolbox → inspect the element that lost its styling → find the new selector → update userChrome.css.

Resources for maintained userChrome snippets:

  • r/FirefoxCSS on Reddit has a community maintaining working snippets
  • GitHub searches for userChrome.css find many maintained configurations
  • Firefox's browser.xhtml source shows the internal element IDs

The more specific your CSS selector, the more likely it breaks. Use general ID-based selectors over complex nested selectors.

Top comments (0)