X
點擊此處開啟此網站的行動版。

技術支援討論區

Change tab height

已張貼

Hi all,

I'd like to modify the tab height, to make it thinner. Is this something that can be done, perhaps via the userChrome.css file?

Thanks in advance.

Hi all, I'd like to modify the tab height, to make it thinner. Is this something that can be done, perhaps via the userChrome.css file? Thanks in advance.

被選擇的解決方法

Try this code for the height. Make sure that --tab-min-height has the same value in both places.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}
從原來的回覆中察看解決方案 1
TyDraniu
  • Top 25 Contributor
324 個解決方法 1851 個答案
  1. Go to ≡ -> Customize…
  2. Press Density and select Compact.
# Go to ≡ -> Customize… # Press '''Density''' and select ''Compact''.
cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158598 個答案

Try this code in userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

:root {
  /* fix for full screen mode */
  --tab-toolbar-navbar-overlap: 0px !important;
  /* set minimum tab height  */
  --tab-min-height: 25px !important;
}

#TabsToolbar {height:var(--tab-min-height)!important; margin-top:-1px!important; margin-bottom:1px!important}

You may need this code as well:

/* Override vertical shifts when moving a tab */
#TabsToolbar[movingtab] {padding-bottom:0px!important}
#TabsToolbar[movingtab] > .tabbrowser-tabs {padding-bottom:0px!important; margin-bottom:0px!important}
#TabsToolbar[movingtab] + #nav-bar {margin-top:0px!important}
Try this code in userChrome.css <pre><nowiki> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ :root { /* fix for full screen mode */ --tab-toolbar-navbar-overlap: 0px !important; /* set minimum tab height */ --tab-min-height: 25px !important; } #TabsToolbar {height:var(--tab-min-height)!important; margin-top:-1px!important; margin-bottom:1px!important}</nowiki></pre> You may need this code as well: <pre><nowiki>/* Override vertical shifts when moving a tab */ #TabsToolbar[movingtab] {padding-bottom:0px!important} #TabsToolbar[movingtab] > .tabbrowser-tabs {padding-bottom:0px!important; margin-bottom:0px!important} #TabsToolbar[movingtab] + #nav-bar {margin-top:0px!important} </nowiki></pre>

提出問題者

@TyDraniu: I would like to keep Density set to "Touch" to have a wider toolbar.

@cor-el: I've inserted both snippets, it has no effect.

@TyDraniu: I would like to keep Density set to "Touch" to have a wider toolbar. @cor-el: I've inserted both snippets, it has no effect.
jscher2000
  • Top 10 Contributor
8775 個解決方法 71736 個答案

有幫助的回覆

Hi dr01, are you familiar with the Browser Toolbox? It has an Inspector tool you can use to poke around in the toolbar area and test changes interactively by finding and modifying the values Firefox is applying (in the Rules pane to the right of the structural diagram). Once you find an approach that works, you can formalize a rule for your userChrome.css file.

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

Hi dr01, are you familiar with the Browser Toolbox? It has an Inspector tool you can use to poke around in the toolbar area and test changes interactively by finding and modifying the values Firefox is applying (in the Rules pane to the right of the structural diagram). Once you find an approach that works, you can formalize a rule for your userChrome.css file. https://developer.mozilla.org/docs/Tools/Browser_Toolbox
cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158598 個答案

選擇的解決方法

Try this code for the height. Make sure that --tab-min-height has the same value in both places.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* TABS: height */
:root {
 --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */
 --tab-min-height: 25px !important;
}
:root #tabbrowser-tabs {
 --tab-min-height: 25px !important;
}
#TabsToolbar {height: var(--tab-min-height) !important;}
Try this code for the height. Make sure that --tab-min-height has the same value in both places. <hr> <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; /* fix for full screen mode */ --tab-min-height: 25px !important; } :root #tabbrowser-tabs { --tab-min-height: 25px !important; } #TabsToolbar {height: var(--tab-min-height) !important;} </nowiki></pre>

提出問題者

Thanks cor-el, this code works.

@jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0).

Thanks cor-el, this code works. @jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0).
jscher2000
  • Top 10 Contributor
8775 個解決方法 71736 個答案

dr01 said

@jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0).

If you have opened the Developer Tools panel (e.g., Ctrl+Shift+i), it is on the ••• menu:

''dr01 [[#answer-1182131|said]]'' <blockquote> @jscher2000: Where are the Developer Tools Settings? I can't seem to find them on my Firefox (v64.0). </blockquote> If you have opened the Developer Tools panel (e.g., Ctrl+Shift+i), it is on the &bull;&bull;&bull; menu: <img src="https://mdn.mozillademos.org/files/16085/DevTools_LayoutMenu.png">
cor-el
  • Top 10 Contributor
  • Moderator
17540 個解決方法 158598 個答案

Once the developer tools are open, you can open the Settings page via the F1 key.

You can enable the Browser Toolbox via the Developer tools Settings page. Once the developer tools are open, open the Toolbox Options via the F1 key and look under "Advanced Settings":

"Enable browser chrome and add-on debugging toolboxes"
"Enable remote debugging"

This will add the Browser Toolbox item to the Web Developer menu (no restart necessary).

Once the developer tools are open, you can open the Settings page via the F1 key. You can enable the Browser Toolbox via the Developer tools Settings page. Once the developer tools are open, open the Toolbox Options via the F1 key and look under "Advanced Settings": "Enable browser chrome and add-on debugging toolboxes" "Enable remote debugging" This will add the Browser Toolbox item to the Web Developer menu (no restart necessary).