為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

Change Tab Font, Weight, Color, etc. FF109

  • 3 回覆
  • 0 有這個問題
  • 1 次檢視
  • 最近回覆由 Slouch

more options

Hi All,

I'm trying to modify various userChrome.css attributes of Tabs in Firefox 109.

However, code that worked in FF 88 is seemingly no longer working.

Is the below code outdated?

I would also like to change the appearance of #TabsToolbar from translucent to either a solid color or a background image. Is that possible? Right now, you can see icons from the desktop through the Tab bar, and there appears to be a strange curved, black overlay colorizing it. See attached screenshot.

Thanks for any input!

/* MISCELLANEOUS TAB ATTRIBUTES */

  1. TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 height: 25px !important;
 background-image: url("bkmr_back.gif");
 border-top: 1px solid #afc0d2 !important;
 border-bottom: 1px solid #8698aa !important;

}

/* Change the color of selected tab */

   .tab-background[selected="true"] {
       background-attachment: none!important;
       background-image: none!important;

background-color: #eef5fc !important; /* background color only, not border */ }

/* Change text attributes of selected tab #8698aa to match bottom tabstoolbar line color */

  1. TabsToolbar .tabbrowser-tab[selected] {

font-weight: 800 !important; color: #000 !important;

       border-top: 1px solid #8698aa !important;
       border-left: 1px solid #8698aa !important;
       border-right: 1px solid #8698aa !important;

}

  1. TabsToolbar .tabbrowser-tab:not([selected]) {

font-weight: 600 !important; color: #000 !important; /* non-selected tab text color */

       border-top: 1px solid #afc0d2 !important;
       border-left: 1px solid #afc0d2 !important;
       border-right: 1px solid #afc0d2 !important;

}

/* Change the color of non-selected tab */

  .tab-background:not([selected]) {
       color: #000000 !important;

background-color: #c7d3e0 !important; }

Hi All, I'm trying to modify various userChrome.css attributes of Tabs in Firefox 109. However, code that worked in FF 88 is seemingly no longer working. Is the below code outdated? I would also like to change the appearance of #TabsToolbar from translucent to either a solid color or a background image. Is that possible? Right now, you can see icons from the desktop through the Tab bar, and there appears to be a strange curved, black overlay colorizing it. See attached screenshot. Thanks for any input! /* MISCELLANEOUS TAB ATTRIBUTES */ #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; padding-top: 0 !important; padding-bottom: 0 !important; height: 25px !important; background-image: url("bkmr_back.gif"); border-top: 1px solid #afc0d2 !important; border-bottom: 1px solid #8698aa !important; } /* Change the color of selected tab */ .tab-background[selected="true"] { background-attachment: none!important; background-image: none!important; background-color: #eef5fc !important; /* background color only, not border */ } /* Change text attributes of selected tab #8698aa to match bottom tabstoolbar line color */ #TabsToolbar .tabbrowser-tab[selected] { font-weight: 800 !important; color: #000 !important; border-top: 1px solid #8698aa !important; border-left: 1px solid #8698aa !important; border-right: 1px solid #8698aa !important; } #TabsToolbar .tabbrowser-tab:not([selected]) { font-weight: 600 !important; color: #000 !important; /* non-selected tab text color */ border-top: 1px solid #afc0d2 !important; border-left: 1px solid #afc0d2 !important; border-right: 1px solid #afc0d2 !important; } /* Change the color of non-selected tab */ .tab-background:not([selected]) { color: #000000 !important; background-color: #c7d3e0 !important; }
附加的畫面擷圖

由 Slouch 於 修改

所有回覆 (3)

more options

Dropa said

You need to go to the site your using to create or edit your userChrome.css for support on your css edits as by default Firefox forum doesn't support programming css edits. Or go to a userChrome.css forum and post your question there for those doing css edits to review your edits so it works as what you want.

Hello Dropa,

I'm not sure I understand. For years, I've been getting help with CSS edits here on this forum.

What is the "site" I'm using to edit my userChrome.css?

Thanks.

more options

Do you have other code in your userChrome.cssll code since I notice you have placed the Tab bar below the Navigation Toolbar ?

more options

Hi cor-el,

Yes, quite a bit of other code as well :)