How to get rounded tabs in firefox 57?
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.
All Replies (19)
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.
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.
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?
Here is a screen cap of the issue. Note the black box behind the rounded tab.
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).
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.
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
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.
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.
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.
Thank you for the more detailed response. I appreciate it very much. I will give this a try tomorrow.
Have a nice evening!
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.
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.
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;
}
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!
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
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!
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
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!