How to hide FireFox tabs to use Sidebery

How to hide FireFox tabs to use Sidebery.md

DO NOT USE. STILL GETTING WORKING...

How to hide FireFox tabs to use Sidebery How to hide the FireFox native tabs so that the Sidebery vertical tabs add-on will be the only thing displaying tabs

These instructions detail how to create/edit a userChrome.css file for Firefox which hides the native tabs so that the Sidebery vertical tabs add-on will be the only thing displaying tabs.

Note: - These instructions work if native tabs are set to be HORIZONTAL in Firefox. - This was written on 2025-07-19 and tested on Firefox 140.0.4

Instructions:

1. Enable userChrome.css support and vertical tabs in Firefox:

   • Go to about:config
   • Set toolkit.legacyUserProfileCustomizations.stylesheets to true
   • Set sidebar.verticalTabs to true (this enables vertical tabs support)

2. Enable Sidebery window title preface:

   • Open Sidebery settings
   • Navigate to Help
   • Set the Preface value to "[Sidebery]" and enable Add preface to the browser window's title

3. Create or update userChrome.css:

   • Open Firefox menu → Help → More Troubleshooting Information
   • Scroll to Profile Folder and open it
   • Inside the profile folder, create a "chrome" directory (if it doesn't exist)
   • Inside "chrome", create or edit a file named "userChrome.css"
   • Copy and Paste the CSS below this comment, paying attention to which OS you are using.

4. Restart Firefox

Credits:

Sidebury FireFox add-on: https://addons.mozilla.org/en-US/firefox/addon/sidebery/
gist: https://gist.github.com/abhinav/00c2053b750b72e2d43bcf1652b5fb66
FF css hacks: https://mrotherguy.github.io/firefox-csshacks/

/* -----===== IF YOU ARE ON MACOS =====-----*/

Open the following page and copy the code into your "chrome/userChrome.css" file. Save file. Restart Firefox. https://mrotherguy.github.io/firefox-csshacks/?file=hide_tabs_toolbar_osx.css

This next step complicates this effort, unfortunately. If the FF setting "window titlebar" is UNCHECKED, you need additional css to fix the MacOS FF window controls.

Where is this setting? The "Title Bar" checkbox is in the "Customize Toolbar..." dialog, which you can access by right-clicking on the FF window toolbar and selecting "Customize Toolbar...". The checkbox is located at the far bottom, left of that window. This setting hides the chunky FF window title bar used to drag the window around, and replaces it with a much smaller title bar that only contains the window controls (close, minimize, maximize). The Title Bar CHECKED is the default setting in Firefox, so this should not be needed in that case.

Copy the css from the link below, and put it in "content/userContent.css" creating folder and file if needed. Save file. Restart Firefox. https://mrotherguy.github.io/firefox-csshacks/chrome/window_control_placeholder_support.css

/* -----===== IF YOU ARE ON WINDOWS =====-----*/

Open this page and copy the code into your "userChrome.css" file. Restart Firefox. (This guy really knows his FireFox CSS hacking!) https://mrotherguy.github.io/firefox-csshacks/?file=hide_tabs_toolbar_v2.css

/* -----===== IF YOU ARE ON LINUX =====-----*/

As always with Linux, your mileage may vary and some hacking is required... Try the above or see the "tabs" menu on this page: https://mrotherguy.github.io/firefox-csshacks/