X
Tap here to go to the mobile version of the site.

Support Forum

This thread was closed and archived. Please ask a new question if you need help.

Rounded Tabs in Firefox Beta - Linux

Posted

Is there a way I can get rounded tabs in Firefox 57 (Firefox Beta) in Ubuntu 17.10? I see them on Windows and I THINK I remember them when I first started usign Firefox on Linux but I think I've done something and they've disappeared.

I'm just wondering how to get them back from whatever I did or just how to get them.

I took a screenshot of the tab shape I have now:

i.imgur.com/6Z6tVk5.png


Here is a picture of the tab shape I would like:

https://cdn.portableapps.com/FirefoxPortable.png

Thank you!

Is there a way I can get rounded tabs in Firefox 57 (Firefox Beta) in Ubuntu 17.10? I see them on Windows and I THINK I remember them when I first started usign Firefox on Linux but I think I've done something and they've disappeared. I'm just wondering how to get them back from whatever I did or just how to get them. I took a screenshot of the tab shape I have now: i.imgur.com/6Z6tVk5.png Here is a picture of the tab shape I would like: https://cdn.portableapps.com/FirefoxPortable.png Thank you!

Modified by Amolith

Chosen solution

Note that this new Photon design is part of the process to make Firefox as fast as possible and the Firefox user interface has been cleaned up considerably. Restoring the old appearance would require a lot of work with code in userChrome.css because WebExtensions can't modify the user interface.


  • Bug 1346488 - [meta] Photon UI Refresh
  • Bug 1355767 - [meta] Photon tab strip
  • Bug 1349555 - Make tabs rectangular (remove tab curve)

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
)

Read this answer in context 3

Additional System Details

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

Shadow110 1072 solutions 14836 answers

At this time we do not have all the in's and out's of Firefox 57 and higher let alone the beta's. So no idea to help you.

I have read some where that there will be a option to do this in future releases but reading and seeing are.......

What I see here is squared. https://www.mozilla.org/en-US/firefox/quantum/

You could search for a Extension that does this.

You could try refresh or reinstall it but again no ideas.

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

At this time we do not have all the in's and out's of Firefox 57 and higher let alone the beta's. So no idea to help you. I have read some where that there will be a option to do this in future releases but reading and seeing are....... What I see here is squared. https://www.mozilla.org/en-US/firefox/quantum/ You could search for a Extension that does this. You could try refresh or reinstall it but again no ideas. Please let us know if this solved your issue or if need further assistance.

Modified by Shadow110

cor-el
  • Top 10 Contributor
  • Moderator
17591 solutions 159130 answers

Chosen Solution

Note that this new Photon design is part of the process to make Firefox as fast as possible and the Firefox user interface has been cleaned up considerably. Restoring the old appearance would require a lot of work with code in userChrome.css because WebExtensions can't modify the user interface.


  • Bug 1346488 - [meta] Photon UI Refresh
  • Bug 1355767 - [meta] Photon tab strip
  • Bug 1349555 - Make tabs rectangular (remove tab curve)

(please do not comment in bug reports
https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
)

Note that this new Photon design is part of the process to make Firefox as fast as possible and the Firefox user interface has been cleaned up considerably. Restoring the old appearance would require a lot of work with code in userChrome.css because WebExtensions can't modify the user interface. ---- *Bug 1346488 - [meta] Photon UI Refresh *Bug 1355767 - [meta] Photon tab strip *Bug 1349555 - Make tabs rectangular (remove tab curve) (<i>please do not comment in bug reports<br>https://bugzilla.mozilla.org/page.cgi?id=etiquette.html</i>)
thuerrsch 0 solutions 1 answers

Helpful Reply

I too find the strictly rectangular tabs in Firefox Quantum (on Ubuntu artful) a bit irritating as they look slightly trapezoid-shaped to me.

My solution was to put the following in my userChrome.css to make the tabs rounded again:

   /* tab top border roundness */
   #TabsToolbar .tabs-newtab-button,
   #TabsToolbar .tabbrowser-tab,
   #TabsToolbar .tabbrowser-tab .tab-stack,
   #TabsToolbar .tabbrowser-tab .tab-background,
   #TabsToolbar .tabbrowser-tab .tab-content {
       border-top-left-radius: 8px !important;
       border-top-right-radius: 8px !important;
   }
   /* remove colored line above each tab */
   #TabsToolbar .tabbrowser-tab .tab-line {
       visibility: hidden;
   }

The second part avoids the tab line reaching into the rounded tab corners, which doesn't look very pretty. You could also make the tab line a few pixels shorter, but I don't know how to do that and I find the tab line unnecessary anyway.

Since people have been asking: "userChrome.css" is a text file in the "chrome" sub-folder of your Firefox profile folder. If you don't find it there, just create the sub-folder and/or the css file. Earlier versions of Firefox used to put sample userChrome.css and userContent.css files into each new profile IIRC, but that seems to be no longer the case.

I found most of the css in CustomCSSforFx (via this article), under css/tabs/classic_squared_tabs.css. If anybody knows how to simplify or improve my workaround or how to make it work for the light theme too, that would be great. Also, the rounded tabs look a little too high for me even with density set to "Compact". Maybe they can be made a little narrower?

I too find the strictly rectangular tabs in Firefox Quantum (on Ubuntu artful) a bit irritating as they look slightly trapezoid-shaped to me. My solution was to put the following in my userChrome.css to make the tabs rounded again: /* tab top border roundness */ #TabsToolbar .tabs-newtab-button, #TabsToolbar .tabbrowser-tab, #TabsToolbar .tabbrowser-tab .tab-stack, #TabsToolbar .tabbrowser-tab .tab-background, #TabsToolbar .tabbrowser-tab .tab-content { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } /* remove colored line above each tab */ #TabsToolbar .tabbrowser-tab .tab-line { visibility: hidden; } The second part avoids the tab line reaching into the rounded tab corners, which doesn't look very pretty. You could also make the tab line a few pixels shorter, but I don't know how to do that and I find the tab line unnecessary anyway. Since people have been asking: "userChrome.css" is a text file in the "chrome" sub-folder of your Firefox profile folder. If you don't find it there, just create the sub-folder and/or the css file. Earlier versions of Firefox used to put sample userChrome.css and userContent.css files into each new profile IIRC, but that seems to be no longer the case. I found most of the css in [https://github.com/aris-t2/customcssforfx/releases CustomCSSforFx] (via [http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html this article]), under css/tabs/classic_squared_tabs.css. If anybody knows how to simplify or improve my workaround or how to make it work for the light theme too, that would be great. Also, the rounded tabs look a little too high for me even with density set to "Compact". Maybe they can be made a little narrower?

Modified by thuerrsch

Kim Wilson 0 solutions 1 answers

Helpful Reply

I had to create the chrome folder and the userChrome.css file in my user\Application Data\Mozilla\Firefox\Profiles\.... folder

I restarted Firefox and it worked!  :-)

I had to create the chrome folder and the userChrome.css file in my user\Application Data\Mozilla\Firefox\Profiles\.... folder I restarted Firefox and it worked! :-)
andrewm57 0 solutions 5 answers

It worked for the Default and Dark themes, but not Light.

It worked for the Default and Dark themes, but not Light.
edrandall 0 solutions 5 answers

On MacOSX I needed to create the userChrome.css in: ~/Library/Application Support/Firefox/Profiles/{MYPROFILE}.default/chrome (where {MYPROFILE}.default is a randomdomised dir name which exists for my user already)

Fuller instructions and more retro look-and-feel tweaks are at: https://github.com/Aris-t2/CustomCSSforFx

On MacOSX I needed to create the userChrome.css in: '''~/Library/Application Support/Firefox/Profiles/{MYPROFILE}.default/chrome ''' (where {MYPROFILE}.default is a randomdomised dir name which exists for my user already) Fuller instructions and more retro look-and-feel tweaks are at: https://github.com/Aris-t2/CustomCSSforFx

Modified by edrandall

drjulian 0 solutions 3 answers

thuerrsch said

I too find the strictly rectangular tabs in Firefox Quantum (on Ubuntu artful) a bit irritating as they look slightly trapezoid-shaped to me. My solution was to put the following in my userChrome.css to make the tabs rounded again: /* tab top border roundness */ #TabsToolbar .tabs-newtab-button, #TabsToolbar .tabbrowser-tab, #TabsToolbar .tabbrowser-tab .tab-stack, #TabsToolbar .tabbrowser-tab .tab-background, #TabsToolbar .tabbrowser-tab .tab-content { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } /* remove colored line above each tab */ #TabsToolbar .tabbrowser-tab .tab-line { visibility: hidden; } The second part avoids the tab line reaching into the rounded tab corners, which doesn't look very pretty. You could also make the tab line a few pixels shorter, but I don't know how to do that and I find the tab line unnecessary anyway.

This also works in Windows 10

''thuerrsch [[#answer-1028242|said]]'' <blockquote> I too find the strictly rectangular tabs in Firefox Quantum (on Ubuntu artful) a bit irritating as they look slightly trapezoid-shaped to me. My solution was to put the following in my userChrome.css to make the tabs rounded again: /* tab top border roundness */ #TabsToolbar .tabs-newtab-button, #TabsToolbar .tabbrowser-tab, #TabsToolbar .tabbrowser-tab .tab-stack, #TabsToolbar .tabbrowser-tab .tab-background, #TabsToolbar .tabbrowser-tab .tab-content { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } /* remove colored line above each tab */ #TabsToolbar .tabbrowser-tab .tab-line { visibility: hidden; } The second part avoids the tab line reaching into the rounded tab corners, which doesn't look very pretty. You could also make the tab line a few pixels shorter, but I don't know how to do that and I find the tab line unnecessary anyway. </blockquote> This also works in Windows 10

Modified by drjulian

RareBird0 0 solutions 3 answers

Paste the below into your userChrome.css file and restart FireFox

.tab-background {
  border-radius: 20px 20px 0px 0px !important;
  border-image: none !important;
}
.tab-line {
  display: none;
}
/* remove colored line above each tab */
   #TabsToolbar .tabbrowser-tab .tab-line {
       visibility: hidden;
}
Paste the below into your userChrome.css file and restart FireFox <pre><nowiki>.tab-background { border-radius: 20px 20px 0px 0px !important; border-image: none !important; } .tab-line { display: none; } /* remove colored line above each tab */ #TabsToolbar .tabbrowser-tab .tab-line { visibility: hidden; }</nowiki></pre>

Modified by cor-el

rbhall52 0 solutions 8 answers

Does this code help in windows 7, and if so, where do you put it in the css file? I tried putting it after </head>, and it is ignored.

Does this code help in windows 7, and if so, where do you put it in the css file? I tried putting it after </head>, and it is ignored.
cor-el
  • Top 10 Contributor
  • Moderator
17591 solutions 159130 answers

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

See also:

It is not that difficult to create userChrome.css if you have never used it. The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder. *https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name <u>chrome</u> in this folder (name is all lowercase). In the <b>chrome</b> folder you need to create a text file with the name <u>userChrome.css</u> (name is case sensitive). In this userChrome.css text file you paste the text posted. In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named <i>userChrome.css.txt</i>. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as". See also: *https://www.userchrome.org/how-create-userchrome-css.html
FrankCo 4 solutions 20 answers

Have a look at the below image. If would like Quantum to look like that, see https://github.com/FrankConijn/Firefox-Quantum-Rounded-Tabs.

Have a look at the below image. If would like Quantum to look like that, see https://github.com/FrankConijn/Firefox-Quantum-Rounded-Tabs.