X
Tap here to go to the mobile version of the site.

Support Forum

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

Posted

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!

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!

Chosen solution

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
Read this answer in context 0
Quote

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

Wesley Branton
  • Top 10 Contributor
535 solutions 4637 answers

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.

You can try the following userChrome.css code: <pre>/* 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; }</pre> 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.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17171 solutions 155209 answers

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

  • browser.tabs.tabMinWidth
Note that Firefox also has a pref to set the min-width. *browser.tabs.tabMinWidth
Was this helpful to you? 0
Quote

Question owner

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?

cor-el, thanks but it doesn't shrink the tab width enough. ''Wesley Branton [[#answer-1208293|said]]'' <blockquote> You can try the following userChrome.css code: <pre>/* 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; }</pre> 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. </blockquote> 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?
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17171 solutions 155209 answers

Chosen Solution

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
You can try to adjust the padding-left. The padding-left for pinned tabs is set via the Density setting in customize. <pre><nowiki>.tab-content:not([pinned]) { padding-left: 12px !important; padding-right: 0px !important; }</nowiki></pre> ---- See also .tab-content *chrome://browser/skin/browser.css
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8427 solutions 68757 answers

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

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
Was this helpful to you?
Quote

Question owner

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!

''cor-el [[#answer-1208591|said]]'' <blockquote> You can try to adjust the padding-left. The padding-left for pinned tabs is set via the Density setting in customize. <pre><nowiki>.tab-content:not([pinned]) { padding-left: 12px !important; padding-right: 0px !important; }</nowiki></pre> ---- See also .tab-content *chrome://browser/skin/browser.css </blockquote> 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!
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.