hi, firefox quantum also comes with a light theme that you can switch to when go to the firefox menu ≡ > addons > themes panel ;-)

if you want to increase the minimal size of tabs in firefox quantum, proceed like this: enter about:config into the firefox address bar (confirm the info message in case it shows up) & search for the preference named browser.tabs.tabMinWidth. double-click it and change its value to a higher value that fits your needs (perhaps 110).

I found Firefox v.57 unusable because of what I consider as the Tab Strip problem. So I found and followed the instructions on how to return to an older version of Firefox. Therefore I am now running Firefox v.56. I assume that the Firefox Quantum you refer to is the developer's version of v.57 where new features are tried out. If I am right, how do I get there from here? And is there also a way to restore the 3-D appearance of the tab buttons, and perhaps the height as well as the width (so the icons won't be so small)? Thanks for your help.

oh, sorry for the lingo - quantum is just the codename for firefox 57. as far as i'm aware, the size of favicons on the tabs hasn't changed between the browser versions...

There's some more "lingo." I am not familiar with the term "favicon," but I believe I can figure out what it means. I remember several years ago using a development version of Firefox such as I described, which had a different name (which I have forgotten). The icon was also different. I remember I had both the standard Firefox and this development version installed and could switch between them.

As for the size of the favicons, I am attaching a screen shot of the Tab Strip in my v.56. As I remember the Tab Strip in v.57, which I no longer have installed, the favicons were approximately one third the width, and somewhat smaller in height, than the dimensions of the ones in the screen shot. Only a fraction of the total open tabs are visible; more would be shown in v.57 because they would be smaller.

56 is unsupported and will be force updated to 57. You could have asked for help with 57 instead of embarking on a quest that 56 is not designed to do and 57 is : USSER CHROME URL'S https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place.

The other Browser is : https://www.mozilla.org/en-US/firefox/developer/

Please let us know if this solved your issue or if need further assistance.

You misunderstand. I went back to v.56 because the Tab Strip in that version is already like I want it. The v.57 upgrade totally screwed the Tab Strip up by changing the appearance from black on grey to white on black, making the text and icons both smaller, and changing the art of the tabs to simple rectangles. Most tabs do not contain enough letters to identify the contents, and those that do are illegible without using a magnifying glass. I tried one of the links you provided, Theme Font & Size Changer, and it did not work. The problem is explained in the Extension: "Because of the new extension system on Firefox, most of the functionality of the Theme Font & Size Changer is not available any more. You can read more about this new system here." I have never used Chrome, so I have no way to choose from among the many links you have listed, plus it appears that many of them are links to the Chrome application which I do not have. And I doubt that the Developer Browser would help unless it already has a pre-white-on-black Tab Strip. The closest I ever came to coding was a one-week HTML course I took about 15 years ago, so I need more help than you may have thought. I will put up with v.57 (magnifying glass in hand) until I hear from someone with a useful solution. If that does not happen within a reasonable time, I will be forced to return to the only solution that has worked for me, and return to v.56. Despite Pkshadow's condemnation of my ignorance. At least I am smart enough to know that I won't be "force updated to 57." Since I normally keep a lot of tabs open, and am guessing that most people don't, I am attaching screenshots showing the Tab Strips I see in both versions.

After looking at both screenshots on the same screen at the same scale, it seems that I was wrong about the text and icons being smaller in v.57. They just look smaller because of the black background. But the black tabs themselves are clearly much smaller and less legible, besides truncating most of the text.

Hi, you can change the tab colour etc: 3-bar menu > Customize > Themes (and Density) - at the bottom of the page (click Done to save). You can also drag buttons to different locations if you wish - Customize Firefox controls, buttons and toolbars.

Thank you Scribe; you have solved my problem. And the solution was simple. It just required the proper knowledge.

Hi Perdicus, to address one other thing you mentioned:

You can prevent Firefox from making the tabs so narrow by changing a setting here:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk.

(2) In the search box above the list, type or paste tabm and pause while the list is filtered

(3) Double-click the browser.tabs.tabMinWidth preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.)

Thanks jscher2000. I was prepared to put up with the narrow tabs, but your solution worked perfectly. I don't mind exploring "dangerous" places; I was a guy who used to play with resedit if you're a mac user old enough to remember what that means.

jscher2000 said

Hi Perdicus, to address one other thing you mentioned: You can prevent Firefox from making the tabs so narrow by changing a setting here: (1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button promising to be careful or accepting the risk. Thank you jscher2000, I was unaware Mozilla had reintroduced this option. Wonderful! (2) In the search box above the list, type or paste tabm and pause while the list is filtered (3) Double-click the browser.tabs.tabMinWidth preference and enter the desired value. Firefox 57 has a default of 76. The minimum in Firefox 56 was 100. You can try different values and see how you like them. (Firefox will ignore values lower than 50, however.)

Thank you jscher2000, I was not aware that Mozilla had brought this option back. Wonderful!

Perdicus said

The new v.57 user interface, and in particular the Tab Strip, are totally unusable. The ugly new white-on-black tab buttons are totally unusable by someone like me who keeps a lot of tabs open at all times. The tiny black rectangles only hold maybe one or two letters, and the icons are so small that most are unrecognizable. I tried increasing the text size as your referenced article suggested, but the text only got larger BELOW the Tab Strip. No help. So I have returned to v.56.0.2. I don't care how much faster you claim v.57.0.3 may be; if I cannot easily use my Tab Strip, and if it remains the ugly white on black, tiny plain rectangle format reminiscent of the hated MS DOS, I will not be "upgrading."

My 2 cents I use Firefox Quantum 60.0 64bits (May, 9, 2018). I was able to modify the look of my tabs (tab color, rounded corners, yellow or red font, larger space between tabs, ...) by a very simple process. If you want your tabs look like mine (see picture in attachment at the bottom of my post), create a new ".txt" file using Notepad. Name this file userChrome.css . Copy/paste the text below (without "citation") in your new "userChrome.css" file you just created . Be sure this file is named userChrome.css, NOT userChrome.txt

>>> No "userChrome.css" file yet ? See at the bottom of my post the paragraph How to create "chrome" folder and "userChrome.css" file.<<<

OR

Download directly my userChrome.css file >>>HERE<<<

"citation"

.tabbrowser-tab {
    box-sizing: border-box;
    margin: 0 2px 0 2px !important;
    border-radius: 15px 15px 0 0 !important;
}


.tabbrowser-tab .tab-text.tab-label {
    color: yellow !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-text.tab-label {
    color: red !important;            /* tab text color - customizable */
}


.tabbrowser-tab[selected="true"] .tab-background {
    border: 6px solid blue !important;  /* color is customizable */
    border-bottom: none !important;
    opacity: .1;
}


.tab-background {
    border: none !important;
    border-radius: 15px 15px 0 0 !important;
    background: red;
    opacity: .1;
}


.tab-line {                             /* = light top line in selected tab in Quantum default */
    display: none !important;
    border: 2px solid red !important;
}


.tabbrowser-tab:hover,
.tabbrowser-tab .tab-text.tab-label:hover {
    cursor: pointer !important;
}


.tabbrowser-tab:hover {
    border: 2px solid blue !important;
}


.tabbrowser-tab[selected="true"]:hover {
    border: 2px solid red !important;
}


[tabsintitlebar]:root:not([extradragspace]) .tabbrowser-tab::after,
.tabbrowser-tab:hover::after,
#tabbrowser-tabs:not([movingtab])>.tabbrowser-tab[beforehovered]::after {
    border: none !important;                /* leave as is; affects the New Tab icon (the plus) */
}


/* BOOKMARK ICON COLORIZATION */

#bookmarks-view treechildren::-moz-tree-image(container),
#PlacesToolbarItems toolbarbutton[container="true"] .toolbarbutton-icon,
#PlacesToolbarItems menu[container="true"] .menu-iconic-left,
#BMB_bookmarksPopup menu[container="true"] .menu-iconic-icon,
#bookmarksMenu menu[container="true"] .menu-iconic-icon {
    fill: #e2b80d !important;               /* #e2b80d; customizable */
    margin-right: 8px;                      /* correction for the Firefox default imperfection */
}

/* ADDRESS BAR ICONS CLEAN-UP */

#pageActionSeparator, #pocket-button, #pageActionButton {
    display: none !important;               /* customizable: delete if you want the objects back */
}

"citation"

CANNOT COPY TEXT ABOVE ? Download this userChrome.css file HERE and move it to your chrome folder inside your Profile Folder window. You can keep this window open.

Now restart Firefox to see the results.

How to create "chrome" folder and "userChrome.css" file :

Type or paste about:support in the address bar and press Enter/Return to load it.

In the first table on the page, find the Profile Folder row and click the button to the right, which will say "Open Folder". This should launch a new window with your system's file browser (e.g., Windows Explorer). You should see numerous files and folders.

Create a new folder named chrome

Normally, your profile does not contain a chrome folder unless you've been running Firefox for a very, very, very long time. To create a chrome folder, you can use the standard method provided by your file browser. For example, on Windows: - Right-click a blank area of the list, click New, then Folder. Type chrome (all lower case) as the name of this new folder, then press Enter or click away to complete the edit.

Move the "userChrome.css" file you just created inside this new "chrome" folder.

Restart Firefox to see the result.

DONE !!

Of course you can edit this userChrome.css file and modify the parameters (font color, tab color, space between tabs, rounded corners "border-radius" value, etc...) as you like. Don't forget to save everytime you modify parameters. Restart Firefox to see the results.

My advices : - Make first a backup of the original userChrome.css file in case of problem or messing-up. - Want to revert to Firefox default ? Delete this file and restart firefox. Simple !!

If you want larger tabs looking like mines (100 pixels large), go to : https://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/ Check for paragraph 2. Change Minimum Tab Width

Download directly my userChrome.css file >>>HERE<<<

Do you like my purple background (Firefox and desktop) ?? Download this theme >>>HERE<<<

Hope this may help.