[Solved] Old Palemoon 25 tabs? Topic is solved

[SGvagon]

Can I edit tabs from (new rounded in Palemoon 26) to (square) Palemoon 25?
From this

to this


Thank you in advance .

[SGvagon]

Ok I solved this adding these lines to userChrome.css .

Code: Select all

.tabbrowser-tab, .tabs-newtab-button {
border-radius: 0px 0px 0 0!important;
}

[BoFiS]

Where exactly are you finding this userchrome.css file, I'm running Pale Moon 26.0 as of today, and do not have that file anywhere on my computer, but was looking for a way to return the tabs to the more-square look they had previously.

[SGvagon]

Classically in %appdata%\Palemoon\User\Palemoon\Profiles\Default\chrome\userChrome.css

[BoFiS]

Thank you, it seems the file doesn't exist by default, and that folder just contained "userChrome-example.css" and "userContent-example.css" but adding those lines, and saving it as "userChrome.css" removed the curved corners on the tabs, though I still feel like the space between tabs has increased under v26

[SGvagon]

Just add this

Code: Select all

.tabbrowser-tab, .tabs-newtab-button {
border-radius: 0px 0px 0 0!important;
margin-right: 0.5px !important;
margin-left: 0.5px !important;
}

You can change margin for your the best result.

[nmalinoski]

Unfortunately, the proposed solution with userChrome.css has a negative effect for me on W7 x64:

Code: Select all

.tabbrowser-tab, .tabs-newtab-button {
	border-radius: 0px 0px 0 0 !important;
	margin-right: -1px !important;
	margin-left: -1px !important;
}

[SGvagon]

Try margin set on 0.5px.
And I have another small problem. With right scroll tab arrow. When I scroll with mousewheel on the end of all tabs, this arrow doesn't grayed (I must click on it) .

This arrow must be grayed like this

[nmalinoski]

Setting margin-left on .tabbrowser-tab seems to cause my issue. If I don't try messing with the margins, the pinned tabs have the intended spacing, but the normal tabs have a gap.

[SGvagon]

Yes, because you must set margin on pinned tab too

Code: Select all

.tabbrowser-tab[pinned] .tab-reload-icon,
.tabbrowser-tab[pinned] .tab-protect-icon,
.tabbrowser-tab[pinned] .tab-lock-icon,
.tabbrowser-tab[pinned] .tab-icon-image,
.tabbrowser-tab[pinned] .tab-throbber {
margin-right: 0.5px !important;
margin-left: 0.5px !important;
}

[BoFiS]

I found that setting the spacing to 0 pixels for normal tabs seems to look like how it did under 25 without loosing the left edge of the left-most tab like was happening when I tried -1px, so again, here's what I added to my userChrome.css:

Code: Select all

.tabbrowser-tab, .tabs-newtab-button {
   border-radius: 0px 0px 0 0 !important;
   margin-right: 0px !important;
   margin-left: 0px !important;
}
.tabbrowser-tab[pinned] .tab-reload-icon,
.tabbrowser-tab[pinned] .tab-protect-icon,
.tabbrowser-tab[pinned] .tab-lock-icon,
.tabbrowser-tab[pinned] .tab-icon-image,
.tabbrowser-tab[pinned] .tab-throbber {
margin-right: 0.5px !important;
margin-left: 0.5px !important;
}

[Lootyhoof]

Posted this elsewhere, but I'll copy it here too so it's in somewhere a bit more permanent:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
  background-position: 1px 2px !important;
  background-size: calc(100% - 2px) calc(100% - 2px) !important;
  margin: 0 !important;
  padding: 2px 0 4px !important;
  border-width: 4px 3px 0 !important;
  border-style: solid !important;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAcCAYAAABYvS47AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJBJREFUeNpiFBGXYmJgYABhZihGBn+h+B8LkGAFYhUgVgBiPjSFn4D4ARDfAZmka2Ntpb9t80bO1y+ePkfGIDGQHEgNA9DqkKfPnnn9//9fGIiZgJgBikFsYZAcSA3IRHYpSUmQ8e9AbkGyFsR+B5VjZ4IK/gHi/wyY4D9UDuxbRgbCgHFU4ajCUYU0UggQYADV1D8Ak746KgAAAABJRU5ErkJggg==') 4 3 0 fill repeat stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[BoFiS]

Posted this elsewhere, but I'll copy it here too so it's in somewhere a bit more permanent:

So what does this do vs. what was already posted in this thread?

[Lootyhoof]

Posted this elsewhere, but I'll copy it here too so it's in somewhere a bit more permanent:

So what does this do vs. what was already posted in this thread?

It's the proper style to restore the old tabs.

[SGvagon]

Posted this elsewhere, but I'll copy it here too so it's in somewhere a bit more permanent:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
  background-position: 1px 2px !important;
  background-size: calc(100% - 2px) calc(100% - 2px) !important;
  margin: 0 !important;
  padding: 2px 0 4px !important;
  border-width: 4px 3px 0 !important;
  border-style: solid !important;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAcCAYAAABYvS47AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJBJREFUeNpiFBGXYmJgYABhZihGBn+h+B8LkGAFYhUgVgBiPjSFn4D4ARDfAZmka2Ntpb9t80bO1y+ePkfGIDGQHEgNA9DqkKfPnnn9//9fGIiZgJgBikFsYZAcSA3IRHYpSUmQ8e9AbkGyFsR+B5VjZ4IK/gHi/wyY4D9UDuxbRgbCgHFU4ajCUYU0UggQYADV1D8Ak746KgAAAABJRU5ErkJggg==') 4 3 0 fill repeat stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

Wow you are the genius man . Thank you, problem solved . It solved right sroll tab arrow too .

[Original_Charun]

Yeah, that code makes it look way better. So thanks Lootyhoof!

But I really wonder who thought that look in 26 was a good idea. Perhaps it looks better for people using a different OS (althought I pitty everyone who upgraded from windows 7 to 8/8.1 or 10)?

[Moonchild]

But I really wonder who thought that look in 26 was a good idea.

That would have been me

And it's an improvement, because using border images and stretching them is a very poor hack, and doesn't scale well. It's final, but just needs some tweaking especially for windows 8. We'll end up with 3 different configurations in the end:

• Win XP and Win Vista and Win 7: Current, more rounded tabs to align with the rounded window styles of the OS.
• Win 8/8.1: Less round tabs with hinted round corners to align with other border elements in the browser itself. Win 8 is a hybrid of styles anyway.
• Win 10: Square is the new round for everything.

[blind12]

Oh noez, the developer is part of this conspiracy.


I tried a bunch of the suggestions:

Code: Select all

.tabbrowser-tab, .tabs-newtab-button {
   border-radius: 0px 0px 0 0 !important;
   margin-right: 0px !important;
   margin-left: 0px !important;
}
.tabbrowser-tab[pinned] .tab-reload-icon,
.tabbrowser-tab[pinned] .tab-protect-icon,
.tabbrowser-tab[pinned] .tab-lock-icon,
.tabbrowser-tab[pinned] .tab-icon-image,
.tabbrowser-tab[pinned] .tab-throbber {
margin-right: 0.5px !important;
margin-left: 0.5px !important;
}

This eats my pinned tabs, except the last rightmost one.

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
  background-position: 1px 2px !important;
  background-size: calc(100% - 2px) calc(100% - 2px) !important;
  margin: 0 !important;
  padding: 2px 0 4px !important;
  border-width: 4px 3px 0 !important;
  border-style: solid !important;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAcCAYAAABYvS47AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJBJREFUeNpiFBGXYmJgYABhZihGBn+h+B8LkGAFYhUgVgBiPjSFn4D4ARDfAZmka2Ntpb9t80bO1y+ePkfGIDGQHEgNA9DqkKfPnnn9//9fGIiZgJgBikFsYZAcSA3IRHYpSUmQ8e9AbkGyFsR+B5VjZ4IK/gHi/wyY4D9UDuxbRgbCgHFU4ajCUYU0UggQYADV1D8Ak746KgAAAABJRU5ErkJggg==') 4 3 0 fill repeat stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

This also eats my pinned tabs, except the last rightmost one.

Anything else I should try?

Maybe there is some interference from TabMixPlus, but just disabling it didn't make pinned icons more visible. Didn't try removing, it's pretty essential to me so I'd rather go back to PM 25.x.

[DjogaRo]

No worries, blind12, we can have it all.
First, thanks Lootyhoof for that backwards style css and thanks SGvagon for giving me narrower pinned tabs.

Now, to get TMP behaving, we got to let it play with the pinned tabs' and the first normal tab's left margins. It abuses those to position said tabs. So, here we go:

Code: Select all

.tabbrowser-tab,
.tabs-newtab-button {
  background-position: 1px 2px !important;
  background-size: calc(100% - 2px) calc(100% - 2px) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 2px 0 4px !important;
  border-width: 4px 3px 0 !important;
  border-style: solid !important;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAcCAYAAABYvS47AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJBJREFUeNpiFBGXYmJgYABhZihGBn+h+B8LkGAFYhUgVgBiPjSFn4D4ARDfAZmka2Ntpb9t80bO1y+ePkfGIDGQHEgNA9DqkKfPnnn9//9fGIiZgJgBikFsYZAcSA3IRHYpSUmQ8e9AbkGyFsR+B5VjZ4IK/gHi/wyY4D9UDuxbRgbCgHFU4ajCUYU0UggQYADV1D8Ak746KgAAAABJRU5ErkJggg==') 4 3 0 fill repeat stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tabbrowser-tab:not([pinned]):not([tabmix-firstTabInRow]) {
  margin-left: 0 !important;
}

.tabbrowser-tab[pinned] .tab-reload-icon,
.tabbrowser-tab[pinned] .tab-protect-icon,
.tabbrowser-tab[pinned] .tab-lock-icon,
.tabbrowser-tab[pinned] .tab-icon-image,
.tabbrowser-tab[pinned] .tab-throbber {
  margin-right: 0.5px !important;
  margin-left: 0.5px !important;
}

[blind12]

Works like a charm, thank you : )

Yes, I noticed that Tabmixplus messes up something in normal tab left margins, disabling Tabmixplus gave an unused empty area on left.