title: Firefox hides horizontal tabs and changes them to vertical tabs
date: 2023-12-18
coverurl:
type: Post
slug: ff-hide-tab
stats: Published
category: Technical Sharing
summary:
icon: fa-solid fa-camera
password:
tags:
- firefox
notionID: eec1b657-f5be-41ca-b58e-3c7d1b90d735
link: https://spiffy-hardware-dff.notion.site/Firefox-eec1b657f5be41cab58e3c7d1b90d735
I really like the vertical tabs in Edge, as they can display more content. Firefox can also achieve this effect using plugins.
Effect Image#
Tools Needed#
- Firefox browser
- sidebery plugin
- userChrome.css
Enable Firefox's Custom CSS feature#
- Enter
about:config
in the address bar and press Enter - Confirm the risk prompt
- Enter
stylesheets
in the search bar - Find
toolkit.legacyUserProfileCustomizations.stylesheets
and double-click to set it totrue
Configure CSS file#
You need to create a new CSS file in the configuration file, which is not easy to find
- Enter
about:support
in the address bar - Find the
Profile Folder
option, then clickOpen Folder
- Create a new folder in the current folder named
chrome
- Create a new file in the
chrome
folder nameduserChrome.css
- Open
userChrome.css
and paste the following content
#TabsToolbar {
visibility: collapse;
}
#sidebar-header {
visibility: collapse !important;
}
User-friendly configuration#
After the above configuration, there are two problems:
- There is no maximize, minimize, and close buttons
This can be solved by using shortcuts - It is not easy to move the window
You can add aFlexible Space
in theCustomize Toolbar
option on the toolbar, which can also solve the problem of double-clicking to maximize and minimize. However, the space looks a bit ugly, and I don't know how to make it shorter.
Enjoy!#
FF Android mobile can also use plugins. Although FF is already considered as others, it doesn't matter, I still like it.