This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lost zebra stripes after upgrade to Thunderbird 128.2.3esr

  • 4 replies
  • 1 has this problem
  • 39 views
  • Last reply by sfhowes

more options

I recently upgraded to Thunderbird 128.2.3esr, and I no longer have the zebra stripes that alternate between my messages.

The userChrome.css file that appears in my profile's chrome folder is:

/* Light green, high-contrast zebra stripes in message list */

  1. threadTree treechildren::-moz-tree-row(odd) {

-moz-appearance: none !important; background-image: none !important; /* background-color:#99E02E !important;} */

  background-color:#EEFFBB !important;} 

/* background-color:#AED6F1 !important;} */

  1. threadTree treechildren::-moz-tree-row(selected) {

background-color:#45A1FF !important;}

Is there a reason that this no longer works? Can it be modified to restore the zebra stripes? Or is there an alternative code that will restore functionality?

Thanks in advance!

I recently upgraded to Thunderbird 128.2.3esr, and I no longer have the zebra stripes that alternate between my messages. The userChrome.css file that appears in my profile's chrome folder is: /* Light green, high-contrast zebra stripes in message list */ #threadTree treechildren::-moz-tree-row(odd) { -moz-appearance: none !important; background-image: none !important; /* background-color:#99E02E !important;} */ background-color:#EEFFBB !important;} /* background-color:#AED6F1 !important;} */ #threadTree treechildren::-moz-tree-row(selected) { background-color:#45A1FF !important;} Is there a reason that this no longer works? Can it be modified to restore the zebra stripes? Or is there an alternative code that will restore functionality? Thanks in advance!

Chosen solution

Zebra stripes for 128 (see picture):

/* zebra striping  table view */
#threadTree tr:nth-child(2n) {
  background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)) !important;  
}

/* zebra striping  cards view */
#threadTree[rows="thread-card"] tr:nth-child(2n) .card-container {
      background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.30)) !important;
}


Help/Troubleshooting Info, Profile Folder, Open Folder, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the colours as desired. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Settings/General/Config. editor, restart TB.

Online css generator

video on how to create a css file (Firefox and TB)

Read this answer in context 👍 4

All Replies (4)

more options

Chosen Solution

Zebra stripes for 128 (see picture):

/* zebra striping  table view */
#threadTree tr:nth-child(2n) {
  background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)) !important;  
}

/* zebra striping  cards view */
#threadTree[rows="thread-card"] tr:nth-child(2n) .card-container {
      background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.30)) !important;
}


Help/Troubleshooting Info, Profile Folder, Open Folder, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the colours as desired. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Settings/General/Config. editor, restart TB.

Online css generator

video on how to create a css file (Firefox and TB)

Helpful?

more options

MANY thanks! Works like a charm!

Helpful?

more options

sfhowes said

Zebra stripes for 128 (see picture):
/* zebra striping  table view */
#threadTree tr:nth-child(2n) {
  background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)) !important;  
}

/* zebra striping  cards view */
#threadTree[rows="thread-card"] tr:nth-child(2n) .card-container {
      background-image: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.30)) !important;
}


Help/Troubleshooting Info, Profile Folder, Open Folder, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the colours as desired. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Settings/General/Config. editor, restart TB.

Online css generator

video on how to create a css file (Firefox and TB)

Thank you so much. If I want to set the alternate color to black, what do I need to do to adjust the text color? Much appreciated.

Helpful?

more options

mystik1 said

Thank you so much. If I want to set the alternate color to black, what do I need to do to adjust the text color? Much appreciated.

To set the alternate text colour, insert this into the code:

color: black !important;


To make the alternate colour a solid colour, replace the background-image line with:

background: lightgrey !important;

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.