We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Avatar for Username

Mozilla サポートの検索

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.

詳しく学ぶ

このスレッドはアーカイブに保管されました。 必要であれば新たに質問してください。

How to use userChrome.css to move favicon and text on tabs up 3px and left 2px

  • 2 件の返信
  • 1 人がこの問題に困っています
  • 1 回表示
  • 最後の返信者: Gojira

Gojira
Gojira
more options

I would like to control the positioning of the favicon and text which appears on the tabs. I'm hoping this will be possible by using userChrome.css. Also, would it be possible to reduce the height of the background behind the tabs with userChrome.css?

My goal is basically to reduce the height of the tabs and the background behind the tabs.

Thanks

I would like to control the positioning of the favicon and text which appears on the tabs. I'm hoping this will be possible by using userChrome.css. Also, would it be possible to reduce the height of the background behind the tabs with userChrome.css? My goal is basically to reduce the height of the tabs and the background behind the tabs. Thanks

選ばれた解決策

You can find the relevant code for the tab bar height in this file that you can open via the location bar.

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

I use code like this to adjust the height: 

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

/* Tab bar: adjust height - chrome://browser/skin/browser.css */
#tabbrowser-tabs,
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: 24px!important;
}
#tabbrowser-tabs {height:26px!important;}
#tabbrowser-tabs toolbar button > .toolbarbutton-icon { padding-bottom:2px !important; }

For the icon and the text you can modify the padding or margin of those elements with these selectors: 

.tab-text {padding-bottom:3px !important; }
.tab-throbber, .tab-icon-image  {padding-left:2px !important; }
この回答をすべて読む 👍 2

すべての返信 (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

選ばれた解決策

You can find the relevant code for the tab bar height in this file that you can open via the location bar.

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

I use code like this to adjust the height: 

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

/* Tab bar: adjust height - chrome://browser/skin/browser.css */
#tabbrowser-tabs,
.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: 24px!important;
}
#tabbrowser-tabs {height:26px!important;}
#tabbrowser-tabs toolbar button > .toolbarbutton-icon { padding-bottom:2px !important; }

For the icon and the text you can modify the padding or margin of those elements with these selectors: 

.tab-text {padding-bottom:3px !important; }
.tab-throbber, .tab-icon-image  {padding-left:2px !important; }
Gojira
Gojira 質問者
more options

This has achieved exactly what I wanted!!!

Thank you for you help!!! d(^_^)