web-dev-qa-db-ja.com

Thunderbird：作成ウィンドウの色を変更する

ThunderbirdUIはUserChrome.cssを介して高度にカスタマイズ可能であることを私は知っています。

たとえば、ウィンドウバーの色の変更は簡単に行うことができます。

menubar, toolbar, nav-bar, #TabsToolbar > *{
  background-color: rgb(245,199,18) !important;
}

しかし、変更したい要素の名前はどこにありますか？

たとえば、作成ウィンドウでは、新しいThunderbirdがヘッダー全体、ヘッダー自体、および入力ファイルに色を付けます（すべてが薄い灰色です）。

enter image description here

一方、古いThunderbirdはヘッダーに色を付けるだけで、ユーザー入力フィールドは明らかに異なります。

（色のテーマの違い、つまり明るい色と暗い色は無視してください）。重要なのは、見出し（つまり、From、To）と、ユーザーが入力した実際の電子メールアドレスとの明確な違いです。

要素の名前を見つけて、UserChrome.cssを使用して色を変更するにはどうすればよいですか？

Thunderbird 68.3でDebian Busterを使用しています

enter image description here

colorsfirefoxthunderbird
1
Martin Vegter

これは_UserChrome.css_で達成できます

_#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget {
  background-color: -moz-field !important;
}

.dummy-row {
  background-color: -moz-field !important;
}
_

または、以下の代替方法... var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4))を、フィールドの左側にあるダミーボックス（cc、bccなど）の希望の色（赤、青など）に置き換えることができます。

_#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget,
.dummy-row:not(:first-child) {
  background-color: -moz-field !important;
}

.addressingWidgetCell:first-child, 
.dummy-row-cell:first-child {
  background-color: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) !important;
}
_

Thunderbird v68.3.0およびv68.3.1：

まったく新しいインストールでは、次の方法でカスタムCSSの使用法のロックを解除する必要があることに注意してください。

_Settings/Options > Advanced > General > Config Editor...
toolkit.legacyUserProfileCustomizations.stylesheets > true
_

次に、プロファイルディレクトリの下にchromeという名前のフォルダを作成し、次にファイル_userChrome.css_を作成します（大文字と小文字が区別されます）

これは、色＃e06d30 ..を使用したTB v68.3.xの更新されたcssです。

_#msgSubject {
  background-color: -moz-field !important;
}

#msgIdentity {
  background-color: -moz-field !important;
}

.textbox-addressingWidget,
.dummy-row:not(:first-child) {
  background-color: -moz-field !important;
}

.addressingWidgetCell:first-child, 
.dummy-row-cell:first-child {
  background-color: #e06d30 !important;
}

.addressingWidgetCell:nth-child(2), 
.dummy-row-cell:nth-child(2) {
  background-color: #e06d30 !important;
}
_
1
intika

ThunderbirdとFirefoxの場合、UserChrome.cssで編集されたソースは/install-dir/omni.jaで入手できます。このファイルは、表示されたウィンドウのすべてのソース（javascript、xul、cssなど）を含むzip形式のディレクトリ（圧縮なし）です。 .。。

ソースを直接編集/表示するには、次のことができます

mkdir tmp; cd tmp;
cp ../location-of-install-dir/omni.ja .
unzip omni.ja

必要なものを編集したり、探している値を取得したりすると、次のコマンドでファイルを再構築できます。

rm omni.ja #(remove the copied one)
Zip -qr0XD omni.ja *

探しているファイルは./chrome/messenger/content/messenger/messengercompose/messengercompose.xulで、ファイルの先頭にchrome://messenger/content/bindings.cssやchrome://messenger/skin/messengercompose/messengercompose.cssなどのcssとxulが含まれています。

Chrome：//アドレスは、omni.jaにあるファイル、拡張子ファイルなどへのアクセスを許可します。 this または this）のような拡張子がある場合、これらのURLはThunderbirdで直接参照できます。 残念ながら、まだv68に更新されていません

通常、編集する要素を特定するには、メニューの下にあるデバッガー（Ctrl + Shift + I）を使用できます：[ツール]> [開発者ツール]> [開発者ツールボックス]、次にdomオブジェクトインスペクターの左上のボタンを使用しますが、必ず最初に適切なウィンドウを表示し、右上にドロップダウンメニューを表示します（たとえば、新しいメッセージウィンドウの場合はmessengercompose.xul、作成ウィンドウを開いた場合はそこに表示されます）。

Dom Inspector のような拡張機能はここで役立ちますが、v68とはまだ互換性がありません

2
intika