3

I have defined tags, with colors:

grep 'mailnews.tags.' prefs.js
user_pref("mailnews.tags.test.color", "#f2a064");
user_pref("mailnews.tags.test.tag", "TEST");
user_pref("mailnews.tags.lists.color", "#3baff4");
user_pref("mailnews.tags.lists.tag", "lists");

When message is tagged, the text has the color as defined above. But when I move around with the cursor, selected tagged message now has this color (or its derivative) used as backgroung color, with white text. This makes the tag unreadable when the tag color is also light tone.

I have tried this in my userChrome.css:

treechildren::-moz-tree-cell(lc-F2A064, selected) {
    background-color: #B63C29 !important;
}
treechildren::-moz-tree-cell-text(lc-F2A064, selected) {
    color: #F7FF7C !important;
}

treechildren::-moz-tree-cell(lc-3BAFF4, selected) {
    background-color: #B63C29 !important;
}
treechildren::-moz-tree-cell-text(lc-3BAFF4, selected) {
    color: #F7FF7C !important;
}

but this seems to have no effect.

I am using Thunderbird 68.8 on Debian.

So, in short, I know how to define tag text color. But how do I define the background color when tagged message is selected (cursor currently on message)?

  • Why is this specific to Linux and Unix machines? – ekv_56 Jun 13 at 18:13
3
+100

The tags are no longer referred to by an "lc-" prefixed color value.

The first five tags are referred to as T_24label#, where # is the number of the tag. For example, the default "Important" tag is referred to as T_24label1. (In my experience, the first five tags are referred to as above even if they've been renamed from their defaults.)

Beyond the fifth, tags are referred to by their names in lowercase prefixed by a T. For example, a tag named "Tech" is referred to as Ttech. However, it's not clear if it's possible to refer to tags with names that include spaces, such as "New Message" or "Very Important".

The info above was distilled from the collection of replies (not the "Chosen solution") to the Mozilla Support post Tags : colorize background instead of text.

As an example, here's my entire userChrome.css file:

treechildren::-moz-tree-cell-text(selected) {
    background-color: lightgrey !important;
    color: black !important;
}
treechildren::-moz-tree-cell-text(selected, focus) {
    background-color: Highlight !important;
    color: white !important;
}
treechildren::-moz-tree-row {
    border: none !important;
    background-color: white !important;
}
treechildren::-moz-tree-row(selected) {
    background-color: lightgrey !important;
}
treechildren::-moz-tree-row(selected, focus) {
    background-color: Highlight !important;
}

/* Tag Important */
treechildren::-moz-tree-cell(T_24label1) {
    background-color: #BF4040 !important;
}
treechildren::-moz-tree-cell(T_24label1, selected) {
    background-color: #FFCCCC !important;
}
treechildren::-moz-tree-cell(T_24label1, selected, focus) {
    background-color: #FF0000 !important;
}
treechildren::-moz-tree-cell-text(T_24label1) {
    color: #FFF !important;
}
treechildren::-moz-tree-cell-text(T_24label1, selected) {
    background-color: #FFCCCC !important;
    color: #000 !important;
}
treechildren::-moz-tree-cell-text(T_24label1, selected, focus) {
    background-color: #FF0000 !important;
    color: #FFF !important;
}

/* Tag Financial */
treechildren::-moz-tree-cell(T_24label3) {
    background-color: #1A5B1A !important;
}
treechildren::-moz-tree-cell-text(T_24label3) {
    color: #FFF !important;
}

/* Tag Tech (9th tag) */
treechildren::-moz-tree-cell(Ttech) {
    background-color: #339999 !important;
}
treechildren::-moz-tree-cell(Ttech, selected) {
    background-color: #1aeaea !important;
}
treechildren::-moz-tree-cell(Ttech, selected, focus) {
    background-color: #32c7c7 !important;
}
treechildren::-moz-tree-cell-text(Ttech) {
    color: #FFF !important;
}
treechildren::-moz-tree-cell-text(Ttech, selected) {
    background-color: #1aeaea !important;
    color: #000 !important;
}
treechildren::-moz-tree-cell-text(Ttech, selected, focus) {
    background-color: #32c7c7 !important;
    color: #FFF !important;
}

And, referring to the tag TEST in the question's defined tags, here's a minimal working example:

treechildren::-moz-tree-row(Ttest, selected) {
    background-color: #B63C29 !important;
}
treechildren::-moz-tree-cell(Ttest, selected) {
    background-color: #B63C29 !important;
}
treechildren::-moz-tree-cell-text(Ttest, selected) {
    background-color: #B63C29 !important;
}
| improve this answer | |
  • can you please provide a working example? I tried copying code from the linked Mozilla Support post, but that does not work for me. – 400 the Cat Jun 13 at 3:29
  • can you please provide minimal working example, of just the relevant lines ? Just show me how to change background of tag1 when selected, without changing anything else. – 400 the Cat Jun 14 at 7:11
  • 1
    I found out why your example did not work before in my setting. My tag names start with uppercase, so I was using uppercase in the tag name. that did not work. It works now when I use lowercase, ie Ttest, instead of TTest. – 400 the Cat Jun 19 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.