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

Support Forum

I just upgraded from 52 to 60.9. The tabs are now Square. How can I get rounded corners on the tabs.

Posted

In Firefox it is done using userChrome.css but I can't find any information on how to do this for Thunderbird.

In Firefox it is done using userChrome.css but I can't find any information on how to do this for Thunderbird.
Quote

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0

More Information

sfhowes
  • Top 10 Contributor
1694 solutions 8234 answers

Helpful Reply

I tried the code from here in TB 68 and it works, so it should work in other versions.

I tried the code from [http://forums.mozillazine.org/viewtopic.php?p=14789900#p14789900 here] in TB 68 and it works, so it should work in other versions.
Was this helpful to you? 1
Quote

Question owner

I tried the code you referenced It does make the corners rounded how ever it grey's out all of the tabs. So I loose the skins color on the one's not highlighted.

Any thoughts on how to fix this? I would really like it to look like Firefox's userChrome.css fix.

I tried the code you referenced It does make the corners rounded how ever it grey's out all of the tabs. So I loose the skins color on the one's not highlighted. Any thoughts on how to fix this? I would really like it to look like Firefox's userChrome.css fix.
Was this helpful to you?
Quote
sfhowes
  • Top 10 Contributor
1694 solutions 8234 answers

What is the code for the Firefox fix? The method I cited was for Firefox, but as you can see, it also works for TB.

What is the code for the Firefox fix? The method I cited was for Firefox, but as you can see, it also works for TB.
Was this helpful to you?
Quote

Question owner

The Firefox userChrome.css fix can be found here: https://github.com/wilfredwee/photon-australis

It's quite an extensive script.

The Firefox userChrome.css fix can be found here: https://github.com/wilfredwee/photon-australis It's quite an extensive script.
Was this helpful to you?
Quote

Question owner

I tried using the Firefox userChrome.css as provided but that doesn't work.

I tried using the Firefox userChrome.css as provided but that doesn't work.
Was this helpful to you?
Quote
sfhowes
  • Top 10 Contributor
1694 solutions 8234 answers

Helpful Reply

I followed a link from the github page and made a userChrome.css file:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tabbrowser-tab::before, .tabbrowser-tab[beforeselected-visible="true"]::after, .tabbrowser-tab[selected]::after {

 border: none !important;

} .tab-background[selected="true"]::before {

 background-image: var(--svg-selected-before) !important;
 filter: drop-shadow(-1px 0px 1px gray);

}

.tab-background[selected="true"]::after {

 background-image: var(--svg-selected-after) !important;
 filter: drop-shadow(2px 0px 1px gray)

}

.tab-background[selected="true"] > spacer {

background-image: var(--background-selected-middle) !important;
filter: drop-shadow(2px -1px 1px gray);

} .tab-background {

 border-radius: 12px 12px 0px 0px !important;
 border-image: none !important;
 border-left: 1px solid !important;
 border-right: 1px solid !important;
 border-top: 1px solid !important;
 background-color: #BDBDBD !important;

} .tab-line {

 display: none !important;

}

See the attached pictures with the css applied to the default, light and dark themes in TB 68.1.2. You can make further changes according to your preferences.

I followed [https://www.reddit.com/r/FirefoxCSS/comments/bzd5dz/help_with_australis_css/ a link] from the github page and made a userChrome.css file: <code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .tabbrowser-tab::before, .tabbrowser-tab[beforeselected-visible="true"]::after, .tabbrowser-tab[selected]::after { border: none !important; } .tab-background[selected="true"]::before { background-image: var(--svg-selected-before) !important; filter: drop-shadow(-1px 0px 1px gray); } .tab-background[selected="true"]::after { background-image: var(--svg-selected-after) !important; filter: drop-shadow(2px 0px 1px gray) } .tab-background[selected="true"] > spacer { background-image: var(--background-selected-middle) !important; filter: drop-shadow(2px -1px 1px gray); } .tab-background { border-radius: 12px 12px 0px 0px !important; border-image: none !important; border-left: 1px solid !important; border-right: 1px solid !important; border-top: 1px solid !important; background-color: #BDBDBD !important; } .tab-line { display: none !important; } </code> See the attached pictures with the css applied to the default, light and dark themes in TB 68.1.2. You can make further changes according to your preferences.
Was this helpful to you? 1
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.