MozillaZine

Zebra striping

From MozillaZine Knowledge Base

This article was written for Thunderbird but also applies to Mozilla Suite / SeaMonkey (though some menu sequences may differ).

The default theme in Thunderbird 2.0 has alternating background colors for each row in the folder listing. This is sometimes called zebra striping. Some other themes have similar effects. You can eliminate this feature by adding one of the two snippets of code to the optional userChrome.css file in the Chrome directory in your profile. Only add one of them. Whether or not this also effects the address book depends upon your theme.

If you're using the default , MiniBird or the Mostly Crystal theme:

/* remove zebra striping */
#threadTree treechildren::-moz-tree-row(odd) {
background-image: none !important;
}

If you're using the Noia Extreme , CrossOver or Cobalt theme:

 
/* remove zebra striping */
#threadTree > treechildren::-moz-tree-row {
  background-color: transparent !important;
}

If you want to change the color of the zebra striping in the default theme (in this case to a light green):

/* change zebra striping color */
#threadTree treechildren::-moz-tree-row(odd) {
-moz-appearance: none !important;
background-image: none !important;
background-color:#66FFCC !important;} 

#threadTree treechildren::-moz-tree-row(odd, selected) {
background-color: Highlight !important;
}

If your theme doesn't support zebra striping you can add it:

/* add zebra striping */
treechildren::-moz-tree-row(odd) {
  border: 1px solid transparent !important;
  background-color: #FFFFFF !important;
  min-height: 18px !important;
  height: 1.3em !important;
}

treechildren::-moz-tree-row(even) {
  border: 1px solid transparent !important;
  background-color: #F4F4F4 !important;
  min-height: 18px !important;
  height: 1.3em !important;
}

treechildren::-moz-tree-row(selected) {
  background-color: -moz-Dialog !important;
}

treechildren::-moz-tree-row(selected, focus) {
  background-color: Highlight !important;
}

treechildren::-moz-tree-row(current, focus) {
  border: 1px dotted #000000 !important;
}

treechildren::-moz-tree-row(selected, current, focus) {
  border: 1px dotted #C0C0C0 !important;
}

tree[selstyle="primary"] > treechildren::-moz-tree-row {
  border: none !important;
  background-color: transparent !important;
}

You can use a color wheel to figure out what hexadecimal number to enter for the colors you want.

If you're using the default theme you can also stripe the folder pane:

#folderTree treechildren::-moz-tree-row(odd) {
  background-image: url("chrome://messenger/skin/icons/row.png");
  background-position: bottom;
  background-repeat: repeat-x;}

If none of this works find the authors web page and see if they document how to customize the theme. The Mozilla Add-ons web site typically has a link to the authors profile, which may have a link to the authors web page. The authors web site for Mostly Crystal is a good example of this.

Several users have complained in the forums about zebra striping requiring enough resources to cause noticeable problems on remote-desktop connections or slow computers. Its been suggested thats due to using gradient fills.