Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

How to make ALL TABS identical in appearance to PINNED TABS via the UserChrome.css file?

  • 6 uphendule
  • 1 inale nkinga
  • 618 views
  • Igcine ukuphendulwa ngu ffuser88

more options

Basically I am seeking a way to shrink the normal tabs in Firefox to ONLY include the favicon like the pinned tabs while keeping the same margin and padding. I don't want to see the tab text just the site favicon. If someone could post the userchrome.CSS code to make all the tabs identical to the pinned tabs in appearance, I would be forever grateful.

Thanks to the Firefox community for this kickass browser!

Isisombululo esikhethiwe

You can try to adjust the padding-left. The padding-left for pinned tabs is set via the Density setting in customize.

.tab-content:not([pinned]) {
 padding-left: 12px !important;
 padding-right: 0px !important;
}

See also .tab-content

  • chrome://browser/skin/browser.css
Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0

All Replies (6)

more options

You can try the following userChrome.css code:

/* Removes text from tabs */
.tabbrowser-tab .tab-label {
	display:none !important;
}

/* Resizes tabs to minimum width */
.tabbrowser-tab:not([pinned]) {
	max-width: 50px !important;
	min-width: 50px !important;
}

It's not perfect, but you can play around with the width values to get something that suits your needs the best.

Hope this helps.

more options

Note that Firefox also has a pref to set the min-width.

  • browser.tabs.tabMinWidth
more options

cor-el, thanks but it doesn't shrink the tab width enough.

Wesley Branton said

You can try the following userChrome.css code:
/* Removes text from tabs */
.tabbrowser-tab .tab-label {
	display:none !important;
}

/* Resizes tabs to minimum width */
.tabbrowser-tab:not([pinned]) {
	max-width: 50px !important;
	min-width: 50px !important;
}

It's not perfect, but you can play around with the width values to get something that suits your needs the best.

Hope this helps.

Thanks for the response. Min/Max width of 40 seems to work best but for some reason, there is still about 8pixels of padding to the right of the favicon. I set the padding to 0 pixels under your min/max width rules but it doesn't affect it. Attached images are pinned and non pinned tabs.

Any thoughts?

more options

Isisombululo Esikhethiwe

You can try to adjust the padding-left. The padding-left for pinned tabs is set via the Density setting in customize.

.tab-content:not([pinned]) {
 padding-left: 12px !important;
 padding-right: 0px !important;
}

See also .tab-content

  • chrome://browser/skin/browser.css
more options

Hi ffuser88, if you haven't already discovered the Browser Toolbox for poking around in the UI (Inspector tool), you might find it handy:

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

more options

cor-el said

You can try to adjust the padding-left. The padding-left for pinned tabs is set via the Density setting in customize.
.tab-content:not([pinned]) {
 padding-left: 12px !important;
 padding-right: 0px !important;
}

See also .tab-content

  • chrome://browser/skin/browser.css

Had to change the width to 41 but this completes it. Thank you so much! I've been trying for weeks to get this to work. I should of posted sooner.

Thanks again to everyone that responded and jscher2000, I'll check it out, thanks.

Keep up the great work guys!