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

Support Forum

How to get rounded tabs in firefox 57?

Posted

After downloading the new Firefox 57 I noticed the tabs are a horrible sharp, jaggy square cornered shape. how do I get smooth rounded tabs back? Thanks.

After downloading the new Firefox 57 I noticed the tabs are a horrible sharp, jaggy square cornered shape. how do I get smooth rounded tabs back? Thanks.

Additional System Details

Installed Plug-ins

  • Shockwave Flash 27.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

Tonnes
  • Locale Leader
246 solutions 1454 answers

Please see this page and this similar question.

Don’t get scared in case you are not familiar with code, you only need to copy and paste text found in one of the 3 pages provided in the instructions into a userChrome.css file. Press the Raw button in the top-right of those pages for the theme you use, save the page content as file and put one of them in your profile/chrome folder that you may need to create. If you already have a userChrome.css file, add the code below it.

You can also use these links to download them for a dark, default and light theme respectively - be sure to put the appropriate file as userChrome.css at the location indicated.

Please see [https://github.com/wilfredwee/photon-australis this page] and [/questions/1184438 this similar question]. Don’t get scared in case you are not familiar with code, you only need to copy and paste text found in one of the 3 pages provided in the instructions into a userChrome.css file. Press the ''Raw'' button in the top-right of those pages for the theme you use, save the page content as file and put one of them in your ''profile/chrome'' folder that you may need to create. If you already have a userChrome.css file, add the code below it. You can also use these links to download them for a [https://raw.githubusercontent.com/wilfredwee/photon-australis/master/userChrome-dark.css dark], [https://raw.githubusercontent.com/wilfredwee/photon-australis/master/userChrome-default.css default] and [https://raw.githubusercontent.com/wilfredwee/photon-australis/master/userChrome-light.css light] theme respectively - be sure to put the appropriate file as userChrome.css at the location indicated.

Question owner

Thanks for your Help. It would seem a lot easier if there was an option in the settings to select the type of tab you wanted. I'm not sure people not familiar with coding or who are not technically minded would want to be 'faffing' about in the bowels of the browser. I know several folk who have just gone back to version 56 to get their rounded tabs back or to use add-ons which version 57 has broken. An option at installation to keep the look/smooth, rounded, easy on the eye tabs and warn of add-ons not working would be good.

Thanks for your Help. It would seem a lot easier if there was an option in the settings to select the type of tab you wanted. I'm not sure people not familiar with coding or who are not technically minded would want to be 'faffing' about in the bowels of the browser. I know several folk who have just gone back to version 56 to get their rounded tabs back or to use add-ons which version 57 has broken. An option at installation to keep the look/smooth, rounded, easy on the eye tabs and warn of add-ons not working would be good.

Helpful Reply

I now have the rounded tabs on the default setting after using the Australis css above.. However,, there is a black square overlapping the curved tab in the background. Is there a way to get rid of the black, jaggy, square cornered background?

I now have the rounded tabs on the default setting after using the Australis css above.. However,, there is a black square overlapping the curved tab in the background. Is there a way to get rid of the black, jaggy, square cornered background?

Helpful Reply

Here is a screen cap of the issue. Note the black box behind the rounded tab.

Here is a screen cap of the issue. Note the black box behind the rounded tab.
Tonnes
  • Locale Leader
246 solutions 1454 answers

Even though I don’t see the issue on Win 7 (tested with the 3 files for the associated 3 default themes on the last 57 Nightly), it could be this issue reported.

I’d suggest to await the outcome of that, or to install a lightweight theme as suggested there. It could also depend on the Windows theme - I see you have a transparent one, mine is different (solid background, non-Aero).

Even though I don’t see the issue on Win 7 (tested with the 3 files for the associated 3 default themes on the last 57 Nightly), it could be [https://github.com/wilfredwee/photon-australis/issues/11 this issue] reported. I’d suggest to await the outcome of that, or to install a lightweight theme as suggested there. It could also depend on the Windows theme - I see you have a transparent one, mine is different (solid background, non-Aero).

Question owner

Yes. I think it is the same issue. I'm using Windows 7 32 bit. Tried Windows 10 but wasn't happy with it (due to, no media centre, privacy concerns, flat, bland look and no way to select which updates are installed. it also runs slower than a snail) and went back to 7. Not really happy with the new look of Firefox either too flat and bland much like Windows 10. I haven't noticed any speed improvement over version 56 either. If anything it's a lot slower.

Yes. I think it is the same issue. I'm using Windows 7 32 bit. Tried Windows 10 but wasn't happy with it (due to, no media centre, privacy concerns, flat, bland look and no way to select which updates are installed. it also runs slower than a snail) and went back to 7. Not really happy with the new look of Firefox either too flat and bland much like Windows 10. I haven't noticed any speed improvement over version 56 either. If anything it's a lot slower.
kathyjoe5 0 solutions 24 answers

Help: I got all the way to step : "Copy and Paste" Where do I find the code that matches my Firefox Theme? I am not technical, so any assistance would be greatly appreciated. Those square tabs are UGLY!

   Go to your Firefox browser, type about:profiles in your url bar.
   Under the profile that is in use, open the Root Directory folder.
   If that folder does not have a chrome folder, create a folder, name it chrome.
   In the chrome folder, create a file named userChrome.css
   Copy and paste the code that matches your Firefox theme. Dark, Default, Light
   Restart Firefox and enjoy some sexy curves :D
Help: I got all the way to step : "Copy and Paste" Where do I find the code that matches my Firefox Theme? I am not technical, so any assistance would be greatly appreciated. Those square tabs are UGLY! Go to your Firefox browser, type about:profiles in your url bar. Under the profile that is in use, open the Root Directory folder. If that folder does not have a chrome folder, create a folder, name it chrome. In the chrome folder, create a file named userChrome.css '''''Copy and paste the code that matches your Firefox theme. Dark, Default, Light''''' Restart Firefox and enjoy some sexy curves :D
Tonnes
  • Locale Leader
246 solutions 1454 answers

You can use the 3 links provided above to see/download the code for the 3 types of themes - the theme types are in the file names, as you can see when hovering them. When you click the links, they just open as a page, so you can either save the one you need or all 3 of them as a file to your computer.

Then you can either create the a text file named userChrome.css to the newly created chrome folder as instructed, or (easier) copy one of the 3 files you downloaded to a file called userChrome.css and put that file there instead - you still need to create the chrome folder yourself.

Note that if you use a Mac and open your profile folder as instructed (using about:support), you will land in the parent folder, i.e. make sure to go into the folder that is likely named xxxxxxxx.default (one level down) when creating the chrome folder.

Please let us know if this worked for you.

You can use the 3 links provided above to see/download the code for the 3 types of themes - the theme types are in the file names, as you can see when hovering them. When you click the links, they just open as a page, so you can either save the one you need or all 3 of them as a file to your computer. Then you can either create the a text file named userChrome.css to the newly created chrome folder as instructed, or (easier) copy one of the 3 files you downloaded to a file called ''userChrome.css'' and put that file there instead - you still need to create the ''chrome'' folder yourself. Note that if you use a Mac and open your profile folder as instructed (using about:support), you will land in the parent folder, i.e. make sure to go into the folder that is likely named ''xxxxxxxx.default'' (one level down) when creating the ''chrome'' folder. Please let us know if this worked for you.
kathyjoe5 0 solutions 24 answers

Well, thanks for the response, but I don't get it.......not technical, so it's not as simple as you make it sound, or I am making it more difficult than it is. All I get is page(s) of "stuff" that I have no idea what to do with. Would be so much simpler if FF would just give us "dummies" an option to change it.

Thanks anyway.

Well, thanks for the response, but I don't get it.......not technical, so it's not as simple as you make it sound, or I am making it more difficult than it is. All I get is page(s) of "stuff" that I have no idea what to do with. Would be so much simpler if FF would just give us "dummies" an option to change it. Thanks anyway.
Tonnes
  • Locale Leader
246 solutions 1454 answers

OK, suppose you use the default Firefox theme. Did you manage to open up your profile folder and see the view as posted in this question? Click the image there to see how it should look, assuming you use Windows.

This support article provides more info about your profile folder.

If you create a chrome folder in that profile folder, you click the link for the default theme here, then press Ctrl+S or right-click and choose Save Page As… The file should be called userChrome-default.css, and you can either save it somewhere on your computer and copy it to the new file, or (also easier) save it directly to that chrome folder you created (first), and then rename that file to userChrome.css.

Note the exact name, including the capital C. Also make sure Windows is not set to hide known file types - see the other question for more info on that. If you save the file and you don’t see the name "userChrome-default.css" but "userChrome-default" instead, Windows hides the CSS file types, and you only need to remove the "-default" part if you would rather keep it that way.

If things work, the same should work for the 2 other files posted in my first reply. All 3 of them work, but the colors are slightly different to match the themes a bit better.

OK, suppose you use the default Firefox theme. Did you manage to open up your profile folder and see the view as posted in [/questions/1189476 this question]? Click the image there to see how it should look, assuming you use Windows. [[Profiles - Where Firefox stores your bookmarks, passwords and other user data|This support article]] provides more info about your profile folder. If you create a chrome folder in that profile folder, you click the link for the [https://raw.githubusercontent.com/wilfredwee/photon-australis/master/userChrome-default.css default theme here], then press Ctrl+S or right-click and choose ''Save Page As…'' The file should be called ''userChrome-default.css'', and you can either save it somewhere on your computer and copy it to the new file, or (also easier) save it directly to that ''chrome'' folder you created (first), and then rename that file to userChrome.css. Note the exact name, including the capital C. Also make sure Windows is ''not'' set to hide known file types - see the other question for more info on that. If you save the file and you ''don’t'' see the name "userChrome-default.css" but "userChrome-default" instead, Windows hides the CSS file types, and you only need to remove the "-default" part if you would rather keep it that way. If things work, the same should work for the 2 other files posted in my first reply. All 3 of them work, but the colors are slightly different to match the themes a bit better.
kathyjoe5 0 solutions 24 answers

Thank you for the more detailed response. I appreciate it very much. I will give this a try tomorrow.

Have a nice evening!

Thank you for the more detailed response. I appreciate it very much. I will give this a try tomorrow. Have a nice evening!
kathyjoe5 0 solutions 24 answers

Well, I've tried it multiple times per your instructions as well as some instructions from Kim W, and I still have (ugly) square corners.

I'm exhausted.......will try again at a later date or just hope FF will offer a simple change soon..

Thanks again for your time in explaining it to me.

Well, I've tried it multiple times per your instructions as well as some instructions from Kim W, and I still have (ugly) square corners. I'm exhausted.......will try again at a later date or just hope FF will offer a simple change soon.. Thanks again for your time in explaining it to me.
kathyjoe5 0 solutions 24 answers

OMG.....after hours and hours, I finally deleted all files and started over, and I finally got a rounded tab.

The only issue now, is the rounded tab is only the tab of the page I am on. Other background open tabs are still square. Is there a way to get them all to be rounded?

I tried to upload an image, but it didn't work.

OMG.....after hours and hours, I finally deleted all files and started over, and I finally got a rounded tab. The only issue now, is the rounded tab is only the tab of the page I am on. Other background open tabs are still square. Is there a way to get them all to be rounded? I tried to upload an image, but it didn't work.
RareBird0 0 solutions 3 answers

kathyjoe5 said

OMG.....after hours and hours, I finally deleted all files and started over, and I finally got a rounded tab. The only issue now, is the rounded tab is only the tab of the page I am on. Other background open tabs are still square. Is there a way to get them all to be rounded? I tried to upload an image, but it didn't work.

https://support.mozilla.org/en-US/questions/1188324#question-reply

I'm chasing the same answer. My userChrome.css file contents are below. The curves are much more pronounced than the 8 pixel value I've seen in other postings on how to get rounded edges. I still don't know how to get rid of that rectangular background. FWIW, here is the contents of my userChrome.css file

.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;

}

''kathyjoe5 [[#answer-1046159|said]]'' <blockquote> OMG.....after hours and hours, I finally deleted all files and started over, and I finally got a rounded tab. The only issue now, is the rounded tab is only the tab of the page I am on. Other background open tabs are still square. Is there a way to get them all to be rounded? I tried to upload an image, but it didn't work. </blockquote> https://support.mozilla.org/en-US/questions/1188324#question-reply I'm chasing the same answer. My userChrome.css file contents are below. The curves are much more pronounced than the 8 pixel value I've seen in other postings on how to get rounded edges. I still don't know how to get rid of that rectangular background. FWIW, here is the contents of my userChrome.css file .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; }
kathyjoe5 0 solutions 24 answers

Rarebird: Thanks for the info. I don't have time to test right now because of holidays, but will do so when things slow down.

I'm actually getting used to the black tab behind the front tab, though I really would like to see what the visual would be with all tabs the same color and rounded.

Thanks again and Happy Holidays!

Rarebird: Thanks for the info. I don't have time to test right now because of holidays, but will do so when things slow down. I'm actually getting used to the black tab behind the front tab, though I really would like to see what the visual would be with all tabs the same color and rounded. Thanks again and Happy Holidays!
RareBird0 0 solutions 3 answers

kathyjoe5 said

Rarebird: Thanks for the info. I don't have time to test right now because of holidays, but will do so when things slow down. I'm actually getting used to the black tab behind the front tab, though I really would like to see what the visual would be with all tabs the same color and rounded. Thanks again and Happy Holidays!

I used the "light" set up so the back of the tab is white and rectangular. But there is a nice wide rounded curve in front to return some of that distinctiveness back. Those values of 20 you see in the text of my code were upped from 8's which I saw someone else post, Those are radii of arcs for the corner and 8 was too chincy for me. 20 is about right. I expect they'll change that at some point. I don't buy that any of this "looks modern" and more than what was there before. If it ain't broke, don't fix it as the saying goes. and sometimes technology folks just have to fix things that aren't broke and cause people to clamor for things they didn't realized they liked. Good luck. Let me know how it comes out when you get the chance. Nice of you to reach out. Jim

''kathyjoe5 [[#answer-1049536|said]]'' <blockquote> Rarebird: Thanks for the info. I don't have time to test right now because of holidays, but will do so when things slow down. I'm actually getting used to the black tab behind the front tab, though I really would like to see what the visual would be with all tabs the same color and rounded. Thanks again and Happy Holidays! </blockquote> I used the "light" set up so the back of the tab is white and rectangular. But there is a nice wide rounded curve in front to return some of that distinctiveness back. Those values of 20 you see in the text of my code were upped from 8's which I saw someone else post, Those are radii of arcs for the corner and 8 was too chincy for me. 20 is about right. I expect they'll change that at some point. I don't buy that any of this "looks modern" and more than what was there before. If it ain't broke, don't fix it as the saying goes. and sometimes technology folks just have to fix things that aren't broke and cause people to clamor for things they didn't realized they liked. Good luck. Let me know how it comes out when you get the chance. Nice of you to reach out. Jim
kathyjoe5 0 solutions 24 answers

Jim: So True:

"If it ain't broke, don't fix it as the saying goes. and sometimes technology folks just have to fix things that aren't broke and cause people to clamor for things they didn't realized they liked."

I think I prefer the White rounded tab on the Black background for contrast; just wish they were all rounded. I can get over the black background.

I will let you know how it turns out when I test it out.

Thanks again!

Jim: So True: "If it ain't broke, don't fix it as the saying goes. and sometimes technology folks just have to fix things that aren't broke and cause people to clamor for things they didn't realized they liked." I think I prefer the White rounded tab on the Black background for contrast; just wish they were all rounded. I can get over the black background. I will let you know how it turns out when I test it out. Thanks again!
FrankCo 4 solutions 20 answers

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

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

Modified by FrankCo

kathyjoe5 0 solutions 24 answers

FrankCo. Thanks! I was able to get my tabs rounded awhile back. Mine look like the screen cap above posted by tinman9898 on 11-17

Thanks for the tip!

FrankCo. Thanks! I was able to get my tabs rounded awhile back. Mine look like the screen cap above posted by tinman9898 on 11-17 Thanks for the tip!