How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

uburoi

How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by uburoi » 2018-08-25, 21:43

I very much like Lootyhoof's forks of Alfred Kayser's Firefox themes for Palemoon, namely Walnutty, Nauticalia, Little Moon and Micromoon. Thank you so much, Lootyhoof!

I have a Stylish User Style to make tabs rounded on both sides. It works perfectly in both Little Moon and Micromoon, but not so in Walnutty and Nauticalia. In those two themes, if I place the tabs on top, they are rounded on both sides as I wish. But if the tabs are not on top they are not rounded at all. I wish them to be rounded on both ends all the time. Is there any way to do this? All help will be greatly appreciated.

Thanks to all.

Uburoi

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by Goodydino » 2018-08-25, 22:04

The tabbrowser tabs are rounded on the lower right corner, but not the other corners. A setting in browser/browser4.css in the xpi file probably controls this. The setting, within the element ".tabbrowser-tab" is this: "border-radius: 0px 9px 0px 0px". If you experiment with that setting, you might get what you want.

uburoi

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by uburoi » 2018-08-27, 00:13

Hi, Goodydino --

Thank you so much for your reply. Your advice headed me in the right direction. After some exploration, I found what was needed to make the change.

The controlling setting is "border-radius:0 0 9px 0!important;" in the element ".tabbrowser-tabs[tabsontop="false"] ". At that point I had two options: change the settings to what I wanted, or just delete the setting altogether since I already had a Stylish User Style with relevant settings. I merely deleted the setting, the User Style took over, and the tabs rounded on both sides are now there.

Again, thanks so much for your help.

All the best. Take care.

Uburoi

User avatar
Trapper
Fanatic
Fanatic
Posts: 113
Joined: 2016-01-29, 00:21

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by Trapper » 2018-08-27, 01:03

@uburoi
what user style are you using to round tab corners? I'm having a similar issue with another theme & haven't had much success yet finding the right code.

uburoi

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by uburoi » 2018-08-27, 01:37

@Trapper852 --

Here is the code I use:

@namespace url(http://www.mozilla.org/keymaster/gateke ... s.only.xul);
.tabbrowser-tab {
border-top-left-radius: 14px !important;
border-top-right-radius: 14px !important;
border-bottom-left-radius: 14px !important;
border-bottom-right-radius: 14px !important;
}
.tabs-newtab-button:not([anonid="newtab-button"]) {
border-top-left-radius: 14px !important;
border-top-right-radius: 14px !important;
}

It gives me tabs with both sides rounded exactly as I want.

Please let us know if it works for you. Take care.

User avatar
Trapper
Fanatic
Fanatic
Posts: 113
Joined: 2016-01-29, 00:21

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by Trapper » 2018-08-27, 02:17

Sweet... that worked perfectly. Thank you. :thumbup:

Now I just need to find some code to add to it, so that the tabs are spaced a bit apart from each other. That shouldn't be too difficult I don't think.

uburoi

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by uburoi » 2018-08-27, 04:03

Good. Glad to hear it worked for you.

I went through all my user styles and could not find anything that deals with what you want to do. If you do find something or figure it out, could you please post the code here so we can all see it? Thanks.

Take care.

User avatar
Trapper
Fanatic
Fanatic
Posts: 113
Joined: 2016-01-29, 00:21

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by Trapper » 2018-08-30, 23:48

uburoi wrote:
I went through all my user styles and could not find anything that deals with what you want to do. If you do find something or figure it out, could you please post the code here so we can all see it? Thanks.

Take care.

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
  margin: 0 3px !important;
}
If you want to adjust the gap, change the 3px to some other value.

Works perfectly... credit to Lootyhoof

uburoi

Re: How to make tabs rounded on both sides in Walnutty and Nauticalia Themes?

Unread post by uburoi » 2018-08-31, 05:32

@Trapper852

Yes, Sir, it works perfectly. Thanks for posting that info. Very useful.

And, or course, as always, many thanks to Lootyhoof.

Take care.

Uburoi

Locked