Add this to the userChrome.css file. Remember to exit Thunderbird first.

This is a 90% pale grey: #e6e6e6 This is a 95% pale grey - lighter in colour: #f2f2f2 You choose which you prefer.

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

Magic - the 95% pale grey worked for me. Thank-you!

EDIT spoke too soon - now when I select a pale grey line the text turns 'white' I guess because there's a clash using that background, I'm looking now for an alternate colour to 'grey'

Magic - the 95% pale grey worked for me. Thank-you! EDIT spoke too soon - now when I select a pale grey line the text turns 'white' I guess because there's a clash using that background, I'm looking now for an alternate colour to 'grey'

FURTHER EDIT When pointing the line with no background it turns pale blue and when selected it turns darker blue allowing us to read the text which is displayed white'. See image first three lines: display, point, highlight. When pointing the line with pale grey background set it remains 'pale grey' and when selected it remains 'pale grey' making it difficult to read with the text displayed 'white'. See image last three lines: display, point, highlight.

Can someone suggest additional css code so that #threadTree tr:nth-child(2n) turns 'light blue' when pointed at and 'darker blue' when selected same as those lines with a no background? Thank-you.

The background and text colours of selected rows can be altered:

@namespace html url("http://www.w3.org/1999/xhtml");

/* threads pane selected row */
html|tr[is="thread-row"].selected {
  color: navy !important;
  background-color: orange !important; 
}

Similarly for hover colours:

/* threads pane hover row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: lightgrey !important; 
}

The background and text colours of selected rows can be altered: /* threads pane selected row */ html|tr[is="thread-row"].selected { color: navy !important; background-color: orange !important; }

Similarly for hover colours:

/* threads pane hover row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: lightgrey !important; 
}

Thank-you but I don't see how to specifically write this for #threadTree tr:nth-child(2n) { Doi I replace "thread-row" with #threadTree tr:nth-child(2n) {

Just add the code after the zebra (striping) code, it will apply to all rows.

Just add the code after the zebra (striping) code, it will apply to all rows.

Just add the code after the zebra (striping) code? Sorry, I don't have a clue what you are talking about.

What I have written in my userChrome.cc right now is ...

     #toolbar-menubar{order:-1 !important;}
     #threadTree tr:nth-child(2n) {
       background-color:  #e6e6e6 !important;

Just add the code after the zebra (striping) code, it will apply to all rows.

Sorry, I'm a complete novice here - what is the zebra (striping) code?

This is what I have written in my userChrome.css right now ...

    #toolbar-menubar{order:-1 !important;}
   /*  Message List - grey striping assuming you are already using a light theme */
  #threadTree tr:nth-child(2n) {
    background-color:  #e6e6e6 !important;
  }

Zebra or striping style is what you already have to show alternating rows of white and grey backgrounds.

You should have :

Code to put menubar on top followed by the zebra/striping style code both of which I suppied. Then below that you should have add all the code which sfhowes supplied

So in your userChrome.css file it should contains everything that you see in between the lines below.

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row */
html|tr[is="thread-row"].selected {
  color: navy !important;
  background-color: orange !important; 
}

/* threads pane hover row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: #e6e6e6 !important; 
}

Okay, almost there but not quite there yet ...

• when I point at a grey striping row it doesn't change to background-color: pale blue like when I point to a white row
• when I select a grey striping row it doesn't change to background-color: light blue like when I point to a white row.

i.e. the text color changes but the background-color #e6e6e6 remains #e6e6e6

You should have : Code to put menubar on top followed by the zebra/striping style code both of which I suppied. Then below that you should have add all the code which sfhowes supplied So in your userChrome.css file it should contains everything that you see in between the lines below.

---

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row */
html|tr[is="thread-row"].selected {
  color: navy !important;
  background-color: orange !important; 
}

/* threads pane hover row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: #e6e6e6 !important; 
}

---

Yes, thank-you, except the zebra stripping style even rows do not turn in this example to color: navy background-color: #e6e6e6 when I hover and do not turn in this example to color: navy background-color: orange when I select - i.e. the odd rows background white do, the even rows background #e6e6e6 don't

Modify so text now matches the following and report on results.

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row on even grey rows */
#threadTree tr:nth-child(2n).selected {
color: navy !important;
background-color: orange !important;
} 

/* threads pane selected row on even grey rows*/
#threadTree tr:nth-child(2n):hover {
color: navy !important;
background-color: #e6e6e6 !important;
} 

/* threads pane selected odd row */
html|tr[is="thread-row"].selected {
  color: navy !important;
  background-color: orange !important; 
}

/* threads pane hover odd row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: #e6e6e6 !important; 
}

Modify so text now matches the following and report on results.

---

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row on even grey rows */
#threadTree tr:nth-child(2n).selected {
color: navy !important;
background-color: orange !important;
} 

/* threads pane selected row on even grey rows*/
#threadTree tr:nth-child(2n):hover {
color: navy !important;
background-color: #e6e6e6 !important;
} 

/* threads pane selected odd row */
html|tr[is="thread-row"].selected {
  color: navy !important;
  background-color: orange !important; 
}

/* threads pane hover odd row */
html|tr[is="thread-row"]:hover {
  color: navy !important;
  background-color: #e6e6e6 !important; 
}

---

No, the #threadTree tr:nth-child(2n).selected and #threadTree tr:nth-child(2n):hover do not have any effect when I hover or select on even grey rows

The following has been tested on my version and works: Using a Light theme

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping on even rows assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row on even grey rows - text is navy background orange if selected */
#threadTree tr:nth-child(2n).selected,
#threadTree tr:nth-child(2n).selected:hover {
color: navy !important;
background-color: orange !important;
} 

/* threads pane selected row on even grey rows - on hover text is navy background grey*/
#threadTree tr:nth-child(2n):hover {
color:navy !important;
background-color: #e6e6e6 !important;
} 

/* threads pane selected row on odd grey rows - text is navy background orange if selected */
#threadTree tr.selected,
#threadTree tr.selected:hover {
color: navy !important;
background-color: orange !important;
} 

/* threads pane selected row on odd grey rows on hover text is navy background grey*/
#threadTree tr:hover {
color:navy !important;
background-color: #e6e6e6 !important;
} 

In the above code the odd rows normally white background change to same grey background as the non selected even rows. Is this what you want? If no then tell us what you want or you can edit the 'background-color' on the last part of code to another shade instead of #e6e6e6 try #f2f2f2 which is a bit lighter.

In the above code the odd rows normally white background change to same grey background as the non selected even rows. Is this what you want? If no then tell us what you want or you can edit the 'background-color' on the last part of code to another shade instead of #e6e6e6 try #f2f2f2 which is a bit lighter.

Thank-you for all your effort. My OS is Windows 7. This is how it looks for me and how I want it to be ...

When I open Thunderbird odd row text is black background is white and even row text is black background is grey

• When I hover an odd row: text turns navy background turns grey, I want text to remain black and background to turn pale blue
• When I select an odd row: text turns navy background turns orange, I want text to turn white and background to turn light blue

• When I hover an even row: text turns navy background remains grey, I want text to remain black and background to turn pale blue
• When I select an even row: text turns navy background turns orange, I want text to turn white and background to turn light blue

This is the complete code, which you can simply copy paste replacing all current code. OR you can just modify all the 'color' and 'background-color' with the hex colours I've altered. As you've probably noticed, this code maintains the 'selected' colour scheme if you hover over a preselected item, but alters on hover over non-selected item.

@import url("chrome://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");
@namespace html url("http://www.w3.org/1999/xhtml");

/* Position Menu Bar above Unified Toolbar */
#toolbar-menubar {
order: -1 !important;
}

/*  Message List - grey striping assuming you are already using a light theme */
#threadTree tr:nth-child(2n) {
  background-color:  #e6e6e6 !important;
}

/* threads pane selected row on even grey rows */
#threadTree tr:nth-child(2n).selected,
#threadTree tr:nth-child(2n).selected:hover {
color: #ffffff !important;  /*white text*/
background-color: #4db8ff !important; /*light blue deep enough for white text*/
} 

/* threads pane selected row on even grey rows*/
#threadTree tr:nth-child(2n):hover {
color:#000000 !important;   /*black text*/
background-color: #ccebff !important;  /*pale blue*/
} 

/* threads pane selected row on odd grey rows */
#threadTree tr.selected,
#threadTree tr.selected:hover {
color: #ffffff !important;  /*white text*/
background-color: #4db8ff !important;  /*light blue deep enough for white text*/
} 

/* threads pane selected row on odd grey rows*/
#threadTree tr:hover {
color:#000000 !important;  /*black text*/
background-color: #ccebff !important; /*pale blue*/
} 

This is the complete code, which you can simply copy paste replacing all current code. OR you can just modify all the 'color' and 'background-color' with the hex colours I've altered. As you've probably noticed, this code maintains the 'selected' colour scheme if you hover over a preselected item, but alters on hover over non-selected item.

---

Thank-you, much obliged to you for going the extra mile on this one!