Sorry not possible. Will have to do those things with usserChrome 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. Please let us know if this solved your issue or if need further assistance.

I tried these methods. They don't work with the latest firefox quantum. They change something, but doesn't work as a complete solution (even for rounded/curvy separate tabs' headers).

And my post was just a feature request for Firefox developers. Who invented this ugly rectangular interface?)

Hi, here is where you can make requests/feedback for both Firefox and add-ons : To submit suggestions for new or changed features : Feedback: https://qsurvey.mozilla.com/s3/FirefoxInput/ or https://discourse.mozilla.org/c/add-ons

Suggest possibly reread some of those URL's as I know the work in latest Firefox. https://www.userchrome.org/ maybe starting from this site as the author is here in Support also. Can ask questions here if run into a issue. Know it is not the highest priority and not all of us Volunteers know how.

This add-on is interesting : https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/ Not that there are themes of that URL. All results are for 57+ g'luck Please let us know if this solved your issue or if need further assistance.

Extension authors are gradually getting more capabilities to modify the appearance of tabs. So far, this does not extend to the shape. To see what some developers are doing, you could check out:

• https://addons.mozilla.org/firefox/addon/vivaldifox/

Do you like the Chrome "trapezoid" tab look, or is it just a half-way compromise between rectangular and curved for you?

jscher2000 сказал(а)

Do you like the Chrome "trapezoid" tab look, or is it just a half-way compromise between rectangular and curved for you?

I do like current trapezoid tab look at Chrome. Or previous curvy tab look at old Firefox. In fact, the most awful thing in rectagular tab look is that tabs' headers are not visually devided...

If you are experimenting with custom style rules in a userChrome.css file, you could try this:

/* Curve the background tabs at the upper left and right corners */
.tabbrowser-tab {
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Curve active tab and slightly overlap neighboring tabs */
.tabbrowser-tab .tab-background[selected="true"] {
  margin-left: -1px !important;
  margin-right: -1px !important;
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Shorten the tab line along the tops of tabs */
.tab-line {
  margin-left: 9px !important;
  margin-right: 9px !important;
}
/* Shorten the vertical lines between background tabs */
.tabbrowser-tab::before, .tabbrowser-tab::after {
  margin-top: 9px !important;
}

/***** Variation *****/

/* Border the background tabs for greater visibility */
/* Draw 10% gray border for light themes */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
  border: 1px solid rgba(0,0,0,.1) !important;
  border-bottom-color: transparent !important;
  margin-right: -1px !important;
}
/* Remove short vertical lines between background tabs */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before, 
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
  border: none !important;
}

A screenshot illustrating the effect with the three built-in themes is attached for reference.

jscher2000 said

If you are experimenting with custom style rules in a userChrome.css file, you could try this:

/* Curve the background tabs at the upper left and right corners */
.tabbrowser-tab {
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Curve active tab and slightly overlap neighboring tabs */
.tabbrowser-tab .tab-background[selected="true"] {
  margin-left: -1px !important;
  margin-right: -1px !important;
  border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;
}
/* Shorten the tab line along the tops of tabs */
.tab-line {
  margin-left: 9px !important;
  margin-right: 9px !important;
}
/* Shorten the vertical lines between background tabs */
.tabbrowser-tab::before, .tabbrowser-tab::after {
  margin-top: 9px !important;
}

/***** Variation *****/

/* Border the background tabs for greater visibility */
/* Draw 10% gray border for light themes */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
  border: 1px solid rgba(0,0,0,.1) !important;
  border-bottom-color: transparent !important;
  margin-right: -1px !important;
}
/* Remove short vertical lines between background tabs */
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before, 
#main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
  border: none !important;
}

A screenshot illustrating the effect with the three built-in themes is attached for reference.

Thanks a lot for your help! Now Firefox looks much better. Could you please explain how to improve it to improve interface (like in Chrome): 1) remove blue line. 2) make background tabs darker.

The blue line is the tab line element, so you can hide that completely as follows:

.tab-line {
  display: none !important;
}

You could try this for darker background tabs:

.tabbrowser-tab:not([selected="true"]) {
  background-color: #c2c8ce !important;
}

jscher2000, thanks a lot fo your help!!! Two more questions:

1) How to get rid of empty space at top of Firefox (like in Chrome)? 2) How to make background tabs (headers) more darker than now (like in Chrome)?

Please see the screenshots for better understanding. And below is the current version of the css file:

• Curve the background tabs at the upper left and right corners */

.tabbrowser-tab {

 border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;

} /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] {

 margin-left: -1px !important;
 margin-right: -1px !important;
 border-radius: 10px 10px 0px 0px / 15px 15px 0px 0px !important;

} /* Shorten the tab line along the tops of tabs */ .tab-line {

 margin-left: 9px !important;
 margin-right: 9px !important;

} /* Shorten the vertical lines between background tabs */ .tabbrowser-tab::before, .tabbrowser-tab::after {

 margin-top: 9px !important;

} /* Border the background tabs for greater visibility */ /* Draw 10% gray border for light themes */

1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {

 border: 1px solid rgba(0,0,0,.1) !important;
 border-bottom-color: transparent !important;
 margin-right: -1px !important;

} /* Remove short vertical lines between background tabs */

1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
2. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {

 border: none !important;

} .tab-line {

 display: none ;

} .tabbrowser-tab:not([selected="true"]) {

 background-color: #c2c8ce ;

}

1) How to get rid of empty space at top of Firefox (like in Chrome)?

It's not empty... that's the "Title bar". You can turn it off in the Customize screen. There is still a gap above the tabs bar in a resizable window, but it will go away when the window is maximized.

Customize Firefox controls, buttons and toolbars (lower left corner)

2) How to make background tabs (headers) more darker than now (like in Chrome)?

You need the !important for the rule to have any effect:

.tabbrowser-tab:not([selected="true"]) {
  background-color: #c2c8ce !important;
}

I don't know how that got lost in the copy/paste process, but generally speaking, you will have better luck overriding built-in styles if you add !important to your rules.

jscher2000 said

2) How to make background tabs (headers) more darker than now (like in Chrome)? You need the !important for the rule to have any effect:

.tabbrowser-tab:not([selected="true"]) {
  background-color: #c2c8ce !important;
}

I don't know how that got lost in the copy/paste process, but generally speaking, you will have better luck overriding built-in styles if you add !important to your rules.

1) I tried to change colour code in this setting. For example to

.tabbrowser-tab:not([selected="true"]) {

 background-color: #626567 ;

}

But the colour of background tab stays the same...

2) Could tell me, how to get rid of this strange empty space (see the screenshot)?

the screenshot)

Hi scriptio, if you look at your post here on the forum where you have my rule and yours, you will see the difference. It is the missing !important in yours. Please figure out why it's missing -- is your editor stripping it? -- and get it added to your rule. If you need a different editor, I have a link to Atom here: https://www.userchrome.org/help-with-userchrome-css.html#tools Or you can use the Browser Toolbox for live editing (https://developer.mozilla.org/docs/To.../Browser_Toolbox).

The area at the left of the tab bars on resizable windows is so you can click and drag them to a new spot. You can close up that space on the left and/or right end using:

/* Remove the blank areas at left and right */
.titlebar-placeholder[type="pre-tabs"], 
.titlebar-placeholder[type="post-tabs"] {
  display: none;
}

jscher2000 said

Hi scriptio, if you look at your post here on the forum where you have my rule and yours, you will see the difference. It is the missing !important in yours. Please figure out why it's missing -- is your editor stripping it? -- and get it added to your rule. If you need a different editor, I have a link to Atom here: https://www.userchrome.org/help-with-userchrome-css.html#tools Or you can use the Browser Toolbox for live editing (https://developer.mozilla.org/docs/To.../Browser_Toolbox). The area at the left of the tab bars on resizable windows is so you can click and drag them to a new spot. You can close up that space on the left and/or right end using:

/* Remove the blank areas at left and right */
.titlebar-placeholder[type="pre-tabs"], 
.titlebar-placeholder[type="post-tabs"] {
  display: none;
}

jscher2000, thanks a lot. My mistake was that I didn't use "important" code. Now everything looks much better. Your help is great! Do you know, how make tabs height shorter (1 milimeter shorter) - like tabs at Chrome?

Regarding tab height, are you already using "Compact" in the "Density" setting on the Customize tab? Customize Firefox controls, buttons and toolbars (toward the bottom center)

jscher2000 said

Regarding tab height, are you already using "Compact" in the "Density" setting on the Customize tab? Customize Firefox controls, buttons and toolbars (toward the bottom center)

Thanks a lot. Silly me :)

If you like any of the 4 below interfaces, see https://github.com/FrankConijn/Firefox-Quantum-Rounded-Tabs for the 'How To'. They come with a nice hoover effect, too.