How to get back to the old tab design in Firefox?

👤 Diwas Poudel 🕒 13 Mar 2022 📁 TECH

According to Browser Market Share Worldwide (Statcounter), Firefox Browser is the third-largest browser, and it is used as the default browser by a large number of people. So, in order to satisfy those users, Firefox must create a stable and consistent layout and UI design.

However, it appears that a great deal of controversy has arisen as a result of Firefox 89.0 updates and users report that it is difficult for them to use it because due to the latest updates firefox added floating tabs button makes it difficult to switch between tabs quickly.

no-separator-in-tabs-firefox — **fig. no separator between the tabs firefox**

Initially, it was connected tabs that people adopted, and Firefox's bad idea changed those to floating. This occasionally perplexes the user or slows down his workflow and productivity

I'm currently using Firefox 98, and the UI is still the same.

What are Proton and Photon in Firefox?

Ans: Proton is Firefox's new design, which started with Firefox 89. Photon is an old Firefox design that was used until version 88. And we started facing controversial design issues with Proton.

In this article, I will attempt to provide workable solutions for "reconnecting" the buttons and creating more distinct tabs. Let's go with me.

Steps for switching back to Firefox's old style of tabs

1 First update Firefox browser to the latest version.

To do so, click on the three horizontal bars in the top right corner of the Firefox toolbar, then on Help, and then on "About Firefox." This will launch the "About Mozilla Firefox" window. Then, by default, Firefox will check for updates and download them if they are available. When the download is finished, you will be prompted to click the "Restart to Update Firefox" button. Click on it, and your Firefox will be updated to the most recent version.

about-firefox

2 Open Firefox and in address bar type : about:config and press "Enter" key.

about:config is a popular setting in Mozilla Firefox that allows you to change configuration and preferences, as well as customize the look and feel of the browser.

3 Click on the "Accept the Risk and Continue" button to go to the about:config page.

about-config-firefox

4 In the search bar, search for legacyuserprofile and click on the "toolkit.legacyUserProfileCustomizations.stylesheets" option from the list.

5 Double click on the arrow toggle button and set it to true.

legacyuserprofilecustomization

By doing this we have enabled legacy customization for firefox.

6 Again go to the address bar and type : about:support and press the "Enter" key

7 Search for Profile Folder (or Profile Directory )

8 Click on Open Folder.

profile-folder-firefox

Firefox saves all of your settings (including home page information, passwords, and bookmarks) in the profile folder, which is located outside of Firefox in Profile Folder.

9 Create a folder/directory name "chrome" (all lower case) if there is no any.

create-chrome-folder

10 Navigate to chrome directory.

11 Create a new text file inside chrome and name it userChrome.css

Note that name should be userChrome.css, not userchrome.css

12 Open userchrome.css and paste the following CSS code there.

userchrome-css-file

 .tab-background {
   border-radius: 0px 0px !important;
   margin-bottom: 0px !important;
   margin-top: 0 !important;
 }

 .tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
   background-color: color-mix(in srgb, currentColor 5%, transparent);
 }

What this CSS code is doing?

Ans: It removed the curvy border present in your tab and removed the border present below each and every tab by setting the border-radius and margin bottom to 0. And applying color contrast to 5% with transparent background.

13 Save the CSS file

14 Close all opened firefox and reopen it. And you will see properly distinguishable tabs.

Final Firefox tabs look like this :

tabs-are-distinguishable-in-firefox — fig. Tabs are distinguishable in firefox

Conclusion:

In this way, you can customize browser CSS to make it look like a legacy old browser tab.

FAQ:

What is userChrome.css?

Ans: userChrome.css contains customizable layout settings for the Firefox browser. To access this you have to enable "toolkit.legacyUserProfileCustomizations.stylesheets" so that each and every time you startup your firefox then it will read on the userChrome.css file and apply to the browser.

How to customize tab style and hover effect?

For this, you just have to append the following CSS in userChrome.css

/* Tab: selected colors */
#tabbrowser-tabs .tabbrowser-tab[selected] .tab-content { background: linear-gradient(to bottom,#AAFFAA,#FFAAFF) !important; }

/* Tab: hovered colors */
#tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content { background: linear-gradient(to bottom,#808080,#FFFFFF) !important; }

Where is Firefox Profile Folder in Windows , Mac and Linux ?

You can find the Profile Folder in the following location

In Linux : Home\.mozilla\firefox\xxxxxxxx.default path
In WIndows: %AppData%\Roaming\Mozilla\Firefox\Profiles\xxxxxxxx.default
In MacOS :Users/<username>/Library/Application Support/Firefox/Profiles/xxxxxxxx.default.