沒穿方服

索引

顯示╱隱藏內文
顯示具有 userChrome 標籤的文章。 顯示所有文章
顯示具有 userChrome 標籤的文章。 顯示所有文章

Firefox 分頁標籤背景色改暗 (userChrome.css)

2025-09-10 09:45
：

貼圖記錄，十年後可以回來看古代 UI。

分頁群組太過搶眼

Firefox 138 開始支援分頁群組（Tab Groups），預設顯示是在群組下面劃一條線，結果有點太醒目，造成無法一眼辨認「目前分頁」在哪。

自救

我已經好久沒用 userChrome.css，先貼圖，詳細記在後面。

  • Firefox 142.0.1 預設
  • 套上 userChrome.css 後

userChrome.css 內容

用法是到 about:config 開啟 toolkit.legacyUserProfileCustomizations.stylesheets，然後到 Profile 資料夾自己新增 chrome/userChrome.css 檔案。

主要策略是用 CSS color-mix() 把預設背景色調暗。 另外有把關閉按鈕拿掉，內容如下：

2026-06-20: Firefox 152 更新了定義，新版為： 

.tab-background {
  &:is([selected], [multiselected]) {
    background-color: color-mix(in srgb, var(--tab-background-color-selected) 70%, black) !important;
  }
}

.tabbrowser-tab[selected] .tab-close-button {
  color: white !important;
}
.tabbrowser-tab[selected]:not(:hover) .tab-close-button {
  display: none !important;
}

以下為舊版，已經沒用了。 

.tabbrowser-tab[selected] .tab-background {
  background-color: color-mix(in srgb, var(--tab-selected-bgcolor) 70%, black) !important;
}

.tabbrowser-tab[selected] .close-icon {
  color: white !important;
}
.tabbrowser-tab[selected]:not(:hover) .close-icon {
  display: none !important;
}
0
留下意見 (0)

userChrome.css - 更換 Firefox 工具列的書籤圖示

2009-10-20 10:57
：
Chrome, telnet 網址也有圖示。

網站加入書籤會有 favicon，不過 bookmarklet（網址為 javascript: 開頭）或本地端檔案（網址為 file: 開頭）沒那好處，只能顯示預設的圖了。

修改辦法是靠 userChrome.css，搜尋發現相關的碼隨 Firefox 版本偶有變動，以下為 Fx 3.5.3 適用規則：

.bookmark-item[scheme="javascript"] {list-style-image:url("http://userscripts.org/images/script_icon.png") !important;}
.bookmark-item[scheme="file"] {list-style-image:url("http://127.0.0.1/favicon_green.ico") !important;}
.bookmark-item[scheme="chrome"] {list-style-image:url("http://www.spreadfirefox.com/sites/all/themes/sfxBB/img/favicon.png") !important;}
.bookmark-item[scheme="telnet"] {list-style-image:url("http://pcman.openfoundry.org/favicon.ico") !important;}

其中圖示是按 scheme 分辨，例如第四行會對應 telnet://ptt.cc 而跑出 PCMan 的圖（直連人家網站，僅為示範用啊）。

0
留下意見 (0)

Page Info Forms and Links 的圖示問題

2008-11-09 23:31
：

Page Info Forms and Links 在鏈結、表單分頁沒有圖示的時候（例如，預設的佈景主題就沒有）會以媒體的圖示代替……我想趁此機會多少發洩對媒體的怨氣，於是用 userChrome.css 把它改了。

完成圖

先說明開發者的想法是使用佈景主題既有的圖示，以免出現風格不搭的情形；所以若要自行修改，換佈景的時候也請自行留意。

原套件的相關設定在 chrome://pifal/skin/overlay.windows.css，貼在這裡供參考：
（取自 0.7 版本原始碼，應該是 Windows 用的樣式）

#formsTab,#linksTab{-moz-image-region:rect(0px 64px 32px 32px)!important;}

而這篇做的 userChrome.css 修改如下，圖示是從 Link And Forminfo 套件取出的，印象中是公眾授權的圖片。

#formsTab,#linksTab{-moz-image-region:rect(0, 0, 0, 0) !important;}
#formsTab{list-style-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADcUlEQVRYhe2Wz29UVRTHP/e+ee/Nz85MbZ0RptgGKWmtKSFgBV0gIm2EsNFYISYaQiS4AVw0rkSbuNCVujDRxMR/woWJihqQaOJCjAu6EJOaWlJJq1UUmHuui2nfzJt50742giZ6ksncOffc8/3cc++Z9+AfNrXOdd1AcWl8Bfjl78GJZ3mgn9HKexwfsBwfsOzsPrneZM46xEuM3Dle2bPhhVNHfLJbepjRztjNP6oLzFz78lYC1MXHeiaPHtJM/VZiQRTbhx7AuO7Yz4sLa4aICxAp/qvArCiuGs34zoPM2vk1Q8QFuJtd5XF2lydPPJ7gm8XazmdF8WMV+pI99KVL3DcwxNmr346h+Inp37+Okzh+F7xyv10e3rO7xDWBeQHHejy/cT/7SzvY986JevyZr2LlTsQGqCXs542HLn1/AwQFFp4tjZBz07WYvAenzq2ptZcB+mOvKHiIKAZSJR7tGqbby4fmYuaaagbgwHMvXYqj/0HyAhObDtR33WhJJ36edydVCADgzYln0NrBcTRKQdQV2fTFhWjxJXvt5FMtvkI+j+PU7/uxM28H4xCAUopKZSNaK7TWbUV2dQ62nburXA47lML3/eBnOpUMTUdeQqVWvkf7Pn1xxflGW2kjbQGstW0h5MkPERGMEUQMVWMQI1SNAWtb4htLHwnYLGyXktiIZPWY5m8bKa60XrUCwWwy4QAWawURG4JpBhQRrK19iIhbNtd1I/01rZoFR1BIeUiDAGi0bq1ErfSyFFergkQAuK7b9hgLKa8VoCPlIcZiRHA0TE/PoJQK2tFig91aK4i1iLGImBaApO+TyWRCvlxHB41aLQDZtI9YQYzBWsvm1x+LpF/NHu7dzt6tIy3+06PHgnE2XW/LACCX8sCCEYuDgOsgb11cVfDpc4d4oucwn8+d5ZHSKD/8ucierm2cn7/Mg8U+zs9fZu67mdCaXEMFgkuYSfsUi3m0VlSNQG+euJZN5BjKb6M3u5msG7Gu4IV+ZqIqkE17gMJxEmhtObxjbyzxiXtfppQssyHTyx1+J4M2QVeyk+GCS1eyyHDB5aPF8DtrTasJwGnoV6UUg4U+Xr34fuCbu77AdXOTSro7AmOVo2pqhkattu8Dp7e0PlRuha38N/VfAGg5gubH5e0CmAL4+JPPbqv4//avsL8AFM5Ar51T9ksAAAAASUVORK5CYII=') !important;}
#linksTab{list-style-image:url('data:image/png;base64,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') !important;}
0
留下意見 (0)
較舊的文章 》