Grid lines

From MozillaZine Knowledge Base
Jump to navigationJump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
This article was written for Thunderbird but also applies to Mozilla Suite / SeaMonkey (though some menu sequences may differ).

This article describes how to add grid lines in the folder listing (message list pane). Themes typically don't have grid lines separating the rows/columns in the folder listing, you have to add them yourself using CSS. Add one of the following snippets of code to the optional UserChrome.css file in the Chrome directory in your profile.

/*
 * Dashed horizontal and vertical gridlines in the folder listing
 */
 #threadTree treechildren:-moz-tree-row {  
   border-bottom:1px dashed #CEC6C6 !important; 
 } 
 #threadTree treechildren:-moz-tree-column { 
   border-right:1px dashed #CEC6C6 !important; 
 } 
/*
 * Solid vertical grid lines in the folder listing
 */
#threadTree > treechildren::-moz-tree-cell { 
border-right: 1px dotted #CCB194 !important;  
padding-left: 4px !important; 
padding-right: 4px !important;
} 

You can increase the font size by also adding:

/* Adjust Thread pane font size */
#threadTree treechildren:-moz-tree-cell-text {
font-size: 12pt !important;
}

/* Adjust Thread pane message row height */
#threadTree treechildren:-moz-tree-row {
height: 22px !important;
}

You can change what the selected line in the folder listing looks like by also adding:

/* Selected message background and font color */
/* "background" is the highlight shade. "color" is the font shade. */
#threadTree > treechildren::-moz-tree-row(selected) {
background: #E3E3E3 !important; }
#threadTree > treechildren::-moz-tree-cell-text(selected, focus) {
color: #D50000 !important;
font-weight: bold !important; }

You can use a color wheel to figure out what hexadecimal number to enter for the colors you want, or change some of the decimal numbers to modify the height, spacing etc.

Stylish extension

Another way to provide the CSS code would be to use the Stylish extension and modify this style as desired.

According to this bug report "The 'Stylish' extension was recently sold and the new company now logs all browser history.". Supposedly Stylus is a fork of that extension without the spyware. It currently appears to only support browsers (not Thunderbird). See https://forum.userstyles.org/categories/stylish for a discussion about what's going on.