How to make ALL TABS identical in appearance to PINNED TABS via the UserChrome.css file?
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
All Replies (6)
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.
Note that Firefox also has a pref to set the min-width.
- browser.tabs.tabMinWidth
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?
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
Hi ffuser88, if you haven't already discovered the Browser Toolbox for poking around in the UI (Inspector tool), you might find it handy:
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!