parasurv@webspace ~ $

Blog: [Site updates] [Linux] [Free Software] [Culture] [Health] [Watches] Learning: [Emacs Journal] [Linux Wiki] Personal: [Contact] [About me]

Shorts: [Microblog] [Linkblog] Important: [Read] [Watch] [Listen] Other pages: [Old games stuff]

How to do vertical tabs in Firefox?

I will tell you a big secret. For a while now, I dislike horizontal tabs in my browsers. Simply I have so many tabs open at the same time - sometimes 30-50 - that it is really hard to keep tabs on them (pun intended).

I was so happy to find out that Qutebrowser has an option for vertical tabs, but unfortunetly Firefox devs still living in the last decade. Most people I am sure has widescreen monitors, yet we have no option for vertical tabs.

I am sure there are many solution for Firefox, here is what I use in Manjaro Linux, but you can use it on any operating system.

Step 1.: use the Tab Center Redux extension

From description:

"Tab Center Redux allows you to organize your tabs vertically in the browser's sidebar. It aims to be easy to use while mimicking the vanilla Firefox experience. The extension provides a handful of of settings and allows power-users to customize its appearance completely with CSS code."

You download and install the extension from Firefox Add-ons page.

You can adjust the design and certain elements with CSS, and easily hide the tab bar with a shortcut.

There is a bug in Firefox though, and we can still see the horizontal tabs, when we have this addon. This is where the second step comes in…

Step 2.: hide horinzontal tabbar with CSS

For this we need to edit or create a file in our Firefox profile. In Linux you have this in your home folder:

/home/username/.mozilla/firefox/profilename/chrome/userChrome.css

The 'profilename' is usually a randomly named folder. Most people only have one, so it is easy to find. You need to create the 'userChrome.css' file with your favorite text editor if you don't have one, and put this line of CSS and save it, then restart Firefox.

#tabbrowser-tabs { visibility: collapse !important; }

The Tab Center Redux github page has other CSS modifications.

Hosted on Neocities and created with Emacs, the world best text editor, operating system. This website doesn't track you. I don't use any javascript or other scripts. I don't store any information about the visitors. It's just pure old fashioned HTML. Some parts of the site is not up-to-date design wise. I may or may not update them in the future. I don't really support mobile stuff, but I bet if you disable the little CSS I have, you can read the site perfectly.