Firefox Styles Snippets (via userChrome.css)

Firefox Styles Snippets (via userChrome.css)

Warning

At least basic knowledge of CSS is required. The following snippets may stop working with some next Firefox update and are provided just as examples of customization.

Note: Starting with Firefox 69 you have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config.

In 'Profile Directory' (Menu > Help > Troubleshooting Information > Profile Directory) create folder chrome with file userChrome.css.

To find and inspect browser's selectors open Browser Toolbox.

---

Completely hide native tabs strip

Use https://github.com/MrOtherGuy/firefox-csshacks (https://mrotherguy.github.io/firefox-csshacks/):

• hide_tabs_toolbar
• hide_tabs_toolbar_osx
• window_control_placeholder_support

Decrease size of the sidebar header

/**
 * Decrease size of the sidebar header
 */
#sidebar-header {
  font-size: 1.2em !important;
  padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
  padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

Dynamic native tabs (for hiding native horizontal tabs)

dynamic-native-tabs-134.mp4

Tested on Firefox v134

• Set window preface value:
  Sidebery settings > Help > Preface value
  note: in this example: XXX
  note: value can be an "empty" unicode sign
• userChrome css (with animations):

/**
 * Dynamic Horizontal Tabs Toolbar (with animations)
 * sidebar.verticalTabs: false (with native horizontal tabs)
 */
#main-window #TabsToolbar > .toolbar-items {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #TabsToolbar > .toolbar-items { height: 3em !important; }
#main-window[uidensity="touch"] #TabsToolbar > .toolbar-items { height: 3.35em !important; }
#main-window[uidensity="compact"] #TabsToolbar > .toolbar-items { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="​"] #TabsToolbar > .toolbar-items { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="​"] #tabbrowser-tabs { z-index: 0 !important; }
/* Hidden state: Hide window buttons in tabs-toolbar */
#main-window[titlepreface*="​"] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="​"] #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}
/* [Optional] Uncomment block below to show window buttons in nav-bar (maybe, I didn't test it on non-linux-i3wm env) */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-buttonbox-container,
#main-window[titlepreface*="​"] #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
  display: flex !important;
} */
/* [Optional] Uncomment one of the line below if you need space near window buttons */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */

• userChrome css (without animations):

/**
 * Dynamic Horizontal Tabs Toolbar (without animations)
 * sidebar.verticalTabs: false (with native horizontal tabs)
 */
#main-window #TabsToolbar > .toolbar-items { overflow: hidden; }
 /* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="​"] #TabsToolbar > .toolbar-items { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="​"] #tabbrowser-tabs { z-index: 0 !important; }
/* Hidden state: Hide window buttons in tabs-toolbar */
#main-window[titlepreface*="​"] #TabsToolbar .titlebar-spacer,
#main-window[titlepreface*="​"] #TabsToolbar .titlebar-buttonbox-container {
  display: none !important;
}
/* [Optional] Uncomment block below to show window buttons in nav-bar (maybe, I didn't test it on non-linux-i3wm env) */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-buttonbox-container,
#main-window[titlepreface*="​"] #nav-bar > .titlebar-buttonbox-container > .titlebar-buttonbox {
  display: flex !important;
} */
/* [Optional] Uncomment one of the line below if you need space near window buttons */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-spacer[type="pre-tabs"] { display: flex !important; } */
/* #main-window[titlepreface*="​"] #nav-bar > .titlebar-spacer[type="post-tabs"] { display: flex !important; } */

Native gnome look (by @Fletcher-Alderton)

It's a modified version of the Firefox GNOME theme from https://github.com/rafaelmardojai/firefox-gnome-theme

1. Clone the repo to a subdirectory (in the chrome folder):

git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git

2. Create single-line user CSS files if non-existent or empty (at least one line is needed for sed):

[[ -s userChrome.css ]] || echo >> userChrome.css
[[ -s userContent.css ]] || echo >> userContent.css

3. Import this theme at the beginning of the CSS files (all @imports must come before any existing @namespace declarations):

sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css
sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css

4. Symlink preferences file:

cd .. # Go back to the profile directory
ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js

1. Remove Tabs strip (add this to userChrome.css)

#TabsToolbar {
  display: none;
}

6. Hide sidebar top-menu

#sidebar-header {
  display: none;
}

7. Restart Firefox.