MozillaZine

[SOLVED] CSS question re: highlighting folders, mail

User Help for Mozilla Thunderbird
Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted January 20th, 2019, 1:29 pm

On Thunderbird 60.4.0, I am using this CSS code to highlight rows with folder names and mail items while scrolling and selecting them:


/* MESSAGEPANE & FOLDERPANE SELECTED ROW BACKGROUND COLOR when NOT in focus */
treechildren::-moz-tree-row(selected) {
background-color: rgb(150, 201, 243) /* -moz-Dialog */ !important;
}

/* MESSAGEPANE & FOLDERPANE SELECTED ROW BACKGROUND COLOR when IN focus -- WORKING */
treechildren::-moz-tree-row(selected, focus) {
background-color: rgb(150, 201, 243) /* Highlight */ !important;
}

/* MESSAGEPANE & FOLDERPANE SCROLLING ROW BACKGROUND COLOR -- WORKING */
treechildren::-moz-tree-row(hover) {
background-color: rgb(226, 240, 252) /* Highlight */ !important;
}

This produces a medium blue highlight of the selected (clicked) row, but only after the cursor is moved off of the selected row and scrolls to other rows, which are temporarily highlighted in a lighter blue color when the cursor scrolls over them. After clicking on a row to select a folder or mail item, but before the cursor moves off of that row, the clicked row displays the lighter blue color that other rows do when scrolled.

This makes it hard to know visually that the row has been selected (clicked) until after the cursor is moved off of the row. It would be an improvement if the selected row immediately displayed the darker (selected row) blue color, even before the cursor is moved off of it. That way there is no confusion on whether the row has been clicked.

Another downside of the current behavior is that if a folder or mail item has been clicked on to select it but the user then scrolls to other rows and back over the selected row, when the cursor reaches the selected row it changes color to match the lighter blue scrolled row color until the cursor is again moved off of that row. This is not intuitive either.

To summarize, once a folder is selected (clicked) it should immediately display the darker selected (clicked) row color. It should retain that darker selected (clicked) row color even if the cursor subsequently scrolls off of it and then back over it.

Can anyone suggest how to edit the above code to achieve this? Thanks.
Last edited by Ed1 on January 21st, 2019, 5:56 am, edited 2 times in total.

morat
 
Posts: 3164
Joined: February 3rd, 2009, 6:29 pm

Post Posted January 20th, 2019, 11:18 pm

Try this:

Code: Select all
/* Thunderbird userChrome.css */

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

treechildren::-moz-tree-row(selected) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(selected, focus) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(hover) {
  background-color: rgb(226, 240, 252) !important;
}

treechildren::-moz-tree-row(hover, selected) {
  background-color: rgb(150, 201, 243) !important;
}

treechildren::-moz-tree-row(hover, selected, focus) {
  background-color: rgb(150, 201, 243) !important;
}

http://kb.mozillazine.org/UserChrome.css

Ed1
 
Posts: 940
Joined: January 30th, 2005, 2:33 pm

Post Posted January 21st, 2019, 5:55 am

Thank you very much, morat. This woks perfectly and is exactly what I had in mind!

How could I designate a slightly darker color row background for when the mouse lelft-click button is actually being pressed down (similar to how the scrollbar coloring changes when it is pressed)?

morat
 
Posts: 3164
Joined: February 3rd, 2009, 6:29 pm

Post Posted January 21st, 2019, 9:04 pm

AFAIK, there is no property for a tree element for the moment a row is clicked like "a:active" for a link.

Styling a tree
http://developer.mozilla.org/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree

Styling a link
http://www.w3schools.com/css/css_link.asp

Return to Thunderbird Support


Who is online

Users browsing this forum: No registered users and 9 guests