CSS for Coloring in Folder Pane

[Qwerky]

Using CSS, I can color the background, set the text style, etc. in the Folder Pane, for all Local Folders as a group, all POP3 accounts as a group, all IMAP accounts as a group, etc., like this:

#folderTree treechildren::-moz-tree-row(folderNameCol, serverType-XXXX) { background-color: #E1EDE1 !important; }

But I cannot figure out how to color individual accounts, such as myname@domain.com, rather than the entire group of accounts of that type (POP3, etc.). Instead of serverType-XXXX, what selector does one use for an individual account?

[morat]

It's not possible to do what the following addon does with a userChrome.css tweak.

Account Colors (obsolete)
http://addons.thunderbird.net/thunderbird/addon/14385

The addon rewrites the gFolderTreeView.getCellProperties function so it can color individual accounts.

More info: http://forums.mozillazine.org/viewtopic ... &t=2890811

[Qwerky]

Thanks for the reply. So then, there does not exist a selector per individual account which can be used in CSS?

Does the code in the topic you linked provide a solution, and is it still valid for Thunderbird 91.7.0?

[siffemoz]

As morat said, it's not possible to do using CSS; it would require javascript, which is what the no-longer-functioning addon used. Development of that addon stopped with TB v73 because of all the changes, so you'd have to find someone to recode it, if that's even possible.

[Qwerky]

So yes, I've gathered that there isn't going to be a CSS solution. But might there be a javascript solution, perhaps related to the more info topic that morat linked?

[morat]

@Qwerky

The Thunderbird 31 code needs to be updated. Try something like:

Code: Select all

/* Thunderbird 91 userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

treechildren::-moz-tree-image(folderNameCol, abracadabra-0)
{ list-style-image: url("http://bugzilla.mozilla.org/favicon.ico") !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important; }

treechildren::-moz-tree-image(folderNameCol, abracadabra-1)
{ list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important; }

treechildren::-moz-tree-cell-text(folderNameCol, abracadabra-0)
{ color: orange !important;
  font-weight: bold !important; }

treechildren::-moz-tree-cell-text(folderNameCol, abracadabra-1)
{ color: orchid !important;
  font-weight: bold !important; }

Code: Select all

/* Thunderbird 91 userChrome.js */

(function () {

if (location == "chrome://messenger/content/messenger.xhtml") {

  var uris = [
    "mailbox://username%40gmail.com@pop.googlemail.com/Example",
    "imap://username%40gmail.com@imap.googlemail.com/Example",
  ];

  gFolderTreeView.originalGetCellProperties = gFolderTreeView.getCellProperties;
  gFolderTreeView.getCellProperties = function (row, col) {
    var props = gFolderTreeView.originalGetCellProperties(row, col);
    if (col.id == "folderNameCol") {
      var folder = gFolderTreeView.getFolderForIndex(row);
      var abracadabra;
      if (abracadabra = folder.getStringProperty("abracadabra")) {
        props += " " + abracadabra;
      }
    }
    return props;
  };
  for (var i = 0; i < uris.length; i++) {
    var uri = uris[i];
    var folder = MailUtils.getExistingFolder(uri);
    if (folder) {
      folder.setStringProperty("abracadabra", "abracadabra-" + i);
    }
  }
  var tree = document.getElementById("folderTree");
  tree.invalidate();

}

})();

Remember to edit the uris in the userChrome.js file.

Here is how to show the selected folder uri in the error console.

Code: Select all

alert(GetFirstSelectedMsgFolder().URI);

userChromeJS by jikamens (compatible with TB 91)
http://addons.thunderbird.net/thunderbird/addon/986610

Instructions:

* install userChromeJS extension
* close email client
* create or edit the userChrome.css file in the chrome folder
* create or edit the userChrome.js file in the chrome folder
* open email client

The hack stores the string property in the .msf files and panacea.dat file. (mail folder cache)

Files and folders in the profile
http://kb.mozillazine.org/Files_and_fol ... hunderbird

[morat]

@siffemoz

Could I even submit the updated addon since I'm not the original developer?

The problem is that it is going to have to be an experimental addon, and AFAIK you wouldn't be able to submit it to be hosted on addons.thunderbird.net - as they only accept legacy addons that have been converted to experiments, and not new ones.

Realraven comment
http://github.com/RealRaven2000/FiltaQu ... 1030078384
http://addons.thunderbird.net/thunderbi ... realraven/

[Qwerky]

@morat

Brilliant! Installed extension, edited files, and restarted. I now have two different icons on two different accounts. Unfortunately, the colors did not change, which is what I was really after--to change the background color (as well as the text color) of the row for each account.

Still looking at my userChrome.css file, but not sure why colors aren't changing?

[morat]

@Qwerky

It works here. I styled the inbox folder image and cell text for 2 imap accounts.

The hack may not work with an addon that styles the folder pane like Phoenity Icons.

There may be a conflict with your other userChrome.css entries.

[Qwerky]

@morat

Okay, when I use:
#folderTree treechildren::-moz-tree-row(folderNameCol, serverType-none) { background-color: #E1EDE1 !important; }
to color the Local Folders background, it works, and colors the background of all the folders within Local Folders.

But when I use:
#folderTree treechildren::-moz-tree-row(folderNameCol, abracadabra-0) { background-color: #FFC0C0 !important; }
to color the background of an account, it does not work; but using:
#folderTree treechildren::-moz-tree-cell(folderNameCol, abracadabra-0) { background-color: #FFC0C0 !important; }
instead, does work, although it colors only the account itself, and not the folders within the account.

So for some reason, -row works for server type, but not for individual account, which must use -cell. And, for server type, all the folders within are also colored, but not so for individual account. So, does this mean that I need a line for each folder within the account, in order to color all the folders?

[morat]

@Qwerky

You need to rewrite the gFolderTreeView.getRowProperties function to style the row.

Here is how to style the row as well as the image and cell text for individual accounts.

Code: Select all

/* Thunderbird 91 userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

treechildren::-moz-tree-image(folderNameCol, abracadabra-0)
{ list-style-image: url("http://bugzilla.mozilla.org/favicon.ico") !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important; }

treechildren::-moz-tree-image(folderNameCol, abracadabra-1)
{ list-style-image: url("http://forum.mozilla-russia.org/uploaded/custombuttons_button.png") !important;
  -moz-image-region: rect(0px 16px 16px 0px) !important; }

treechildren::-moz-tree-cell-text(folderNameCol, abracadabra-0)
{ color: red !important;
  font-weight: bold !important; }

treechildren::-moz-tree-cell-text(folderNameCol, abracadabra-1)
{ color: green !important;
  font-weight: bold !important; }

treechildren::-moz-tree-row(abracadabra-0)
{ background-color: lightpink !important; }

treechildren::-moz-tree-row(abracadabra-1)
{ background-color: lightgreen !important; }

Code: Select all

/* Thunderbird 91 userChrome.js */

(function () {

if (location == "chrome://messenger/content/messenger.xhtml") {

  var uris = [
    "mailbox://username%40gmail.com@pop.googlemail.com/Example",
    "imap://username%40gmail.com@imap.googlemail.com/Example",
  ];

  gFolderTreeView.originalGetCellProperties = gFolderTreeView.getCellProperties;
  gFolderTreeView.getCellProperties = function (row, col) {
    var props = gFolderTreeView.originalGetCellProperties(row, col);
    if (col.id == "folderNameCol") {
      var folder = gFolderTreeView.getFolderForIndex(row);
      var abracadabra;
      if (abracadabra = folder.getStringProperty("abracadabra")) {
        props += " " + abracadabra;
      }
    }
    return props;
  };
  gFolderTreeView.originalGetRowProperties = gFolderTreeView.getRowProperties;
  gFolderTreeView.getRowProperties = function (row) {
    var props = gFolderTreeView.originalGetRowProperties(row);
    var folder = gFolderTreeView.getFolderForIndex(row);
    var abracadabra;
    if (abracadabra = folder.getStringProperty("abracadabra")) {
      props += " " + abracadabra;
    }
    return props;
  };
  for (var i = 0; i < uris.length; i++) {
    var uri = uris[i];
    var folder = MailUtils.getExistingFolder(uri);
    if (folder) {
      folder.setStringProperty("abracadabra", "abracadabra-" + i);
    }
  }
  var tree = document.getElementById("folderTree");
  tree.invalidate();

}

})();

Remember to edit the uris in the userChrome.js file.

It works here. I styled the inbox folder image and cell text and row for 2 imap accounts.

Screenshot
http://imgur.com/sqvj2zw

[Qwerky]

@morat

Excellent! Works great. I now have all of my accounts and thread rows colored nicely. Thanks for your terrific support!

[siffemoz]

@siffemoz

Could I even submit the updated addon since I'm not the original developer?

The problem is that it is going to have to be an experimental addon, and AFAIK you wouldn't be able to submit it to be hosted on addons.thunderbird.net - as they only accept legacy addons that have been converted to experiments, and not new ones.

Realraven comment
http://github.com/RealRaven2000/FiltaQu ... 1030078384
http://addons.thunderbird.net/thunderbi ... realraven/

Sounds like you'd have to fork the addon, add your code, and submit as new? Maybe ask at https://thunderbird.topicbox.com/groups/addons.

[morat]

@Qwerty

You're welcome.

P.S.

I never see "treechildren::-moz-tree-row" and "folderNameCol" on the same line in the source.

Reference
http://searchfox.org/comm-esr91/search? ... egexp=true

[Qwerky]

@morat

Good tip. I had "treechildren::-moz-tree-row(folderNameCol, serverType-none) { background-color:" in my userChrome.css, and it colored my Local Folders (and all sub-folders) correctly. I removed 'folderNameCol', and it still colored correctly, so as per your search, that would seem to be the correct way to go.

How come, using the Javascript code above, the accounts' sub-folders don't get colored? Would that require an additional line for each sub-folder in each account? If so, I'm not going to go that far... having the account itself colored will be sufficient.