How to make tab bar thinner (height)
I've searched this topic since last week and I haven't come up with a proper solution. The "density" solution is still too big for me. I tried doing css, but I don't know what I'm doing wrong because there's no effect.
If you know anything how to make the tab bar thinner to make it less intrusive to the websites I always visit, please let me know. And btw, I'm not that smart in changing settings, and especially in coding like css so please do a step by step of everything I need to do if you know a solution. Thank you so much
Chosen solution
Hi Barry, there is a way to restore the Compact density. That's the easiest thing to try. See Compact mode workaround in Firefox or https://www.userchrome.org/firefox-89-styling-proton-ui.html#compactmode.
Otherwise, I have a rules builder which you can use to can re-connect the buttons as tabs and shorten their height.
- Code generator: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
- How to install: https://www.userchrome.org/how-create-userchrome-css.html
All Replies (4)
If I remember correctly, Firefox have global scaling factor for the entire browser, including toolbars and content.
Step 1: Open a new tab, type or paste "about:config" in the address bar and press Enter. Click the button accepting the risk.
Step 2: In the filter box, type or paste devp and pause while the list is filtered
Step 3: Double-click layout.css.devPixelsPerPx and change its value to 1.5 and click OK. That corresponds to 150% of the classic font size. Originally is -1.0 from my side. You can play around it between 1.0 to 4.0 in order to suit you.
Noted: Before doing this, please do remember your initial settings in case you want to change back.
I hope this will help you.
Chosen Solution
Hi Barry, there is a way to restore the Compact density. That's the easiest thing to try. See Compact mode workaround in Firefox or https://www.userchrome.org/firefox-89-styling-proton-ui.html#compactmode.
Otherwise, I have a rules builder which you can use to can re-connect the buttons as tabs and shorten their height.
- Code generator: https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
- How to install: https://www.userchrome.org/how-create-userchrome-css.html
To make the height of the tab bar less then you can use this code in userChrome.css.
Add code to the userChrome.css file below the default @namespace line.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* ROOT - VARS */
*|*:root {
--tab-min-height: 25px !important; /* adjust */
--tab-min-width: 60px !important; /* adjust */
}
/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
min-height: var(--tab-min-height) !important;
max-height: var(--tab-min-height) !important;
}
See also:
- /kb/forum-response-tabs-below-url-bar Forum Response - Tabs below the URL bar | Firefox Help
Modified by cor-el
Thank you for all of the solutions. I tried everthing and everything worked. Sadly i cannot choose multiple solutions lol. Thanks again