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

Anything about browser themes, both Full Themes and Lightweight Themes (personas) should go here.

Moderators: satrow, FranklinDM, Lootyhoof

uburoi
Hobby Astronomer
Hobby Astronomer
Posts: 27
Joined: Thu, 07 Jan 2016, 22:16
Location: California

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

Unread postby uburoi » Sat, 25 Aug 2018, 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
Lunatic
Lunatic
Posts: 383
Joined: Tue, 10 Oct 2017, 21:20

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

Unread postby Goodydino » Sat, 25 Aug 2018, 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
Hobby Astronomer
Hobby Astronomer
Posts: 27
Joined: Thu, 07 Jan 2016, 22:16
Location: California

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

Unread postby uburoi » Mon, 27 Aug 2018, 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

Trapper852
Moonbather
Moonbather
Posts: 69
Joined: Fri, 29 Jan 2016, 00:21

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

Unread postby Trapper852 » Mon, 27 Aug 2018, 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
Hobby Astronomer
Hobby Astronomer
Posts: 27
Joined: Thu, 07 Jan 2016, 22:16
Location: California

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

Unread postby uburoi » Mon, 27 Aug 2018, 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.

Trapper852
Moonbather
Moonbather
Posts: 69
Joined: Fri, 29 Jan 2016, 00:21

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

Unread postby Trapper852 » Mon, 27 Aug 2018, 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
Hobby Astronomer
Hobby Astronomer
Posts: 27
Joined: Thu, 07 Jan 2016, 22:16
Location: California

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

Unread postby uburoi » Mon, 27 Aug 2018, 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.

Trapper852
Moonbather
Moonbather
Posts: 69
Joined: Fri, 29 Jan 2016, 00:21

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

Unread postby Trapper852 » Thu, 30 Aug 2018, 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
Hobby Astronomer
Hobby Astronomer
Posts: 27
Joined: Thu, 07 Jan 2016, 22:16
Location: California

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

Unread postby uburoi » Fri, 31 Aug 2018, 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


Return to “Themes”

Who is online

Users browsing this forum: No registered users and 3 guests