MozillaZine

Thunderbird CSS : mail categories

Discuss application theming and theme development.
Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted December 28th, 2015, 2:46 am

Hello everybody,

In Thunderbird, you can attribute a category to a mail, the proposed examples are important, work, personal, to-do, can-wait ... and the mail is displayed with a colour accordingly.

If I translate literally from French, I shall name that labels.

How do you refer to that in CSS ?

I did not find a general reference document for CSS to use in userChrome.css, did not I search properly ?

smsmith
Moderator

User avatar
 
Posts: 19167
Joined: December 7th, 2004, 8:51 pm
Location: Illinois

Post Posted December 28th, 2015, 11:44 pm

This is how I have done it, which I believe I pulled from the default theme files ages ago. Still seems to work the way I want it to.

Code: Select all
/* Red Label (IMPORTANT) */
#threadTree treechildren::-moz-tree-row(selected, lc-FF0000),
#threadTree treechildren::-moz-tree-row(hover, lc-FF0000) {
  background-image: -moz-linear-gradient(rgba(255,255,255,.65),
                                         rgba(255,255,255,.6)) !important;
  background-color: #FF0000 !important;
  border: 1px solid #ff0000 !important;
}

#threadTree treechildren::-moz-tree-cell-text(selected, lc-FF0000) {
  color: #ff0000 !important;
}


What this does, is in the message list (#threadTree) if a message is tagged as Important (the red category) the sender, subject, date, etc., of that message in the message list is made red, and when the message is selected, it has a semi-transparent red highlight. When the message is not selected, just the text is red in the message list. When you hover the message, the red highlight comes back.

Note that the way the message is targeted is from the label color. In the case of the red (important) tag, the label color is FF0000 which should be hex color code for red.

The others are:
Green Label (PERSONAL): #threadTree treechildren::-moz-tree-row(selected, lc-009900)
Blue Label (TO DO): #threadTree treechildren::-moz-tree-row(selected, lc-3333FF)
Orange Label (WORK): #threadTree treechildren::-moz-tree-row(selected, lc-FF9900)
Purple Label (LATER): #threadTree treechildren::-moz-tree-row(selected, lc-993399)

If you tag a message with multiple tags, the color of the "more important" tag is applied. In my case, my tags are listed as 1 through 5 in the order I gave them, so a message tagged Important and To Do will be red, but one marked To Do and Later will be blue.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted December 29th, 2015, 10:19 am

Hello,
Oh well, thank you.
I presume lc is for label category ?
And that to select mails with no category at all it is lc-000000 ?
In fact, adding a "no category" selector for the selected mail can be quicker, as the theme manages the colours for the different categories.
But of course, as I placed a colour for the selected folder or mail, I do not see the colour of the category as I said !important in userChrome.css.
You only managed one category in your code, didn't you ?
In some languages, you would define a constant, in the style
const int IMPORTANT = lc-FF0000;
I think you cannot do that in CSS, can you ?

You know that I do not receive mail alerts when my questions are answered ?
The option is selected in my profile, hereunder "Notity me when a reply is posted" is checked ...

Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted December 29th, 2015, 10:48 am

smsmith wrote:The others are:
Green Label (PERSONAL): #threadTree treechildren::-moz-tree-row(selected, lc-009900)
Blue Label (TO DO): #threadTree treechildren::-moz-tree-row(selected, lc-3333FF)
Orange Label (WORK): #threadTree treechildren::-moz-tree-row(selected, lc-FF9900)
Purple Label (LATER): #threadTree treechildren::-moz-tree-row(selected, lc-993399)


Oh, I realize they are not in the same order as the numbers proposed to the end-user. Any idea how to find the codes that are used by extensions that initiate mail categories, as RemindIt, MNP ?
I could use a colour-picker, I wonder whether I should obtain a sufficient precision.

smsmith
Moderator

User avatar
 
Posts: 19167
Joined: December 7th, 2004, 8:51 pm
Location: Illinois

Post Posted December 29th, 2015, 12:02 pm

Gloops wrote:I presume lc is for label category ?

Yes

And that to select mails with no category at all it is lc-000000 ?

I don't think that would work, as you would first have to define a label with that color (is that white or black?).

In fact, adding a "no category" selector for the selected mail can be quicker, as the theme manages the colours for the different categories.

I wanted to add some extra flair to the tagged messages. If you want to select any message, you can use these selectors.
Code: Select all
#threadTree treechildren::-moz-tree-row  <-- allows you to style the background and border of the row of the message

#threadTree treechildren::-moz-tree-cell-text  <-- allows you to style the text of the message row


But of course, as I placed a colour for the selected folder or mail, I do not see the colour of the category as I said !important in userChrome.css.

If you style something and use !important, and then style it again further down, the last definition in the file is used.

You only managed one category in your code, didn't you ?

I only gave the full code for one of the categories, as all the others are similar with different label colors and resultant text and highlight colors.

In some languages, you would define a constant, in the style
const int IMPORTANT = lc-FF0000;
I think you cannot do that in CSS, can you ?

I think there are ways to add definitions like that, but I don't know how to do it. I'll PM one of the members that I believe may know.

You know that I do not receive mail alerts when my questions are answered ?
The option is selected in my profile, hereunder "Notity me when a reply is posted" is checked ...

I don't use this feature. There may be an override in the user control panel you can access from the right hand sidebar of the page.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

smsmith
Moderator

User avatar
 
Posts: 19167
Joined: December 7th, 2004, 8:51 pm
Location: Illinois

Post Posted December 29th, 2015, 12:04 pm

Gloops wrote:
smsmith wrote:The others are:
Green Label (PERSONAL): #threadTree treechildren::-moz-tree-row(selected, lc-009900)
Blue Label (TO DO): #threadTree treechildren::-moz-tree-row(selected, lc-3333FF)
Orange Label (WORK): #threadTree treechildren::-moz-tree-row(selected, lc-FF9900)
Purple Label (LATER): #threadTree treechildren::-moz-tree-row(selected, lc-993399)


Oh, I realize they are not in the same order as the numbers proposed to the end-user. Any idea how to find the codes that are used by extensions that initiate mail categories, as RemindIt, MNP ?
I could use a colour-picker, I wonder whether I should obtain a sufficient precision.

You'd probably need to open the extensions files to see what colors they are adding, but a color picker may work. Worth a shot.

To get at the files of an extension, you can either find the folder for the extension in your profile folder, or download the extension's XPI file, rename it to a ZIP file and then extract it. You'll need to hunt through it until you find the theme files it uses.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted January 3rd, 2016, 5:11 am

Hello,

As I understood of what was said here, if I want to apply a style to messages that have no category, I first have to list the existing categories, and then exclude each of them :
(not(lc-FF0000),not(lc-009900),not(lc-3333FF),not(lc-FF9900),not(lc-993399))
and so on if applied.

Any better idea ?
Anything more synthetic ?
Joker characters are not a standard in style names.

smsmith
Moderator

User avatar
 
Posts: 19167
Joined: December 7th, 2004, 8:51 pm
Location: Illinois

Post Posted January 3rd, 2016, 8:48 am

No, you can globally assign a style to all messages, and then add rules for specific types of messages (such as the tagged messages). Something like this:

Code: Select all
treechildren {
   styling code goes here
}

treechildren::-moz-tree-row {
  styling code goes here
}

If you just use treechildren, this would target the message list, the folder list, and any other place where you have a similar type listing (like the address book). If you just want the message list, add #threadTree and a space before treechildren. For the folder's list, you would add #folderPaneBox instead.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted January 3rd, 2016, 2:24 pm

Hello,

Well thank you, what you say is OK to select elements from a specific pane, or specific areas in or around the lines.

But I was speaking about selecting some rows inside the messages pane, according to criteria relevant to the messages.

In your previous message you gave me the example of messages with the "Important" label (coloured in red). They were selected by adding lc-FF0000 in the parenthesis after the node.

For messages that do not have the "Important" label, that is easy : not(lc-FF0000)

But for messages that have no label colour at all ...

smsmith
Moderator

User avatar
 
Posts: 19167
Joined: December 7th, 2004, 8:51 pm
Location: Illinois

Post Posted January 3rd, 2016, 4:47 pm

What I am saying is, style ALL the messages the way you want, and then if they have the label color, add styling specific to each label color.
Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

Gloops
 
Posts: 42
Joined: April 19th, 2006, 6:12 am

Post Posted January 3rd, 2016, 6:48 pm

So you mean it is not possble to take profit of the colours already defined for the labels, you must redefine all of them ?

And if I try to redefine most of things, it sometimes does not appear to respond.

For instance, with nothing in userChrome.css, the red label in the focused threads tree, appears red on white background for the selected message, white on red background for an unselected message.

Well, I should like to do reverse, and with bold characters for the selected red message.

For the selected one it seems OK, for the other ones the rule seems to be simply ignored. I obtain red text on white background in both cases, with bold characters when the message is selected.

Code: Select all
#threadContentArea > #threadTree > treechildren::-moz-tree-cell-text(selected,focus,lc-FF0000) {
    background-color:white!important;
    color:#FF0000!important;
    font-weight:bold!important;
}

#threadContentArea > #threadTree > treechildren::-moz-tree-cell-text(not(selected),focus,lc-FF0000) {
    background-color:#FF0000!important;
    color:white!important;
}


I tried with only that in userChrome.css

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest