Personalize your Thunderbird by changing it's chrome

NOTE: this post is very likely out-of-date. Please keep this in mind when considering this article.

ThunderbirdIt’s been awhile since we tweaked our Firefox chrome, and it’s about time we get to hack Mozilla’s wonderful email client Thunderbird.

In this post I’ll give you the necessary tools to change the look of Thunderbird and give you some suggestions (and code, of course :) to help you along the way. First, let me give credit to Twister MC’s wonderful post that I will be using as a reference for the label coloring scripts below. OK, let’s get started!

I recommend that you create a Stylish script using the Stylish Add-on for Thunderbird and putting these CSS snippets in there.

Right! So open up your userChrome.css file in your favorite text editor (not Microsoft Word, I recommend jEdit) We’ll need to begin the file by defaulting to the XUL namespace:

1
2

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

Then we get to the good stuff. Here are some snippets I have created for you to put in the userChrome.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

/* Change menu and dialog font sizes */
menupopup > * {
    font-size: 12px !important
}

/* Change font-size of email list */
.tree-rows {
    font-size: 10px !important;
}

/* Change all fonts to Century Gothic */
* {
    font-family: "Century Gothic", sans-serif !important;
}

/* Hide status bar */
#status-bar {
    display: none !important;
}

/* Get rid of the throbber */
#throbber-box {
    display: none !important;
}

/* Make Sidebar header big and bold */
#folderpane-title {
    font-size: 1.2em !important;
    font-weight: bold !important;
}

/* Hide Menus: menu_File, menu_Edit, menu_View, messageMenu, ltnCalendarMenu, tasksMenu */
#menu_File, #menu_Edit, #menu_View {
    display: none !important;
}

/* Remove disabled toolbar buttons until enabled */
toolbarbutton[disabled="true"] {
    display: none !important;
}

/* Make unread messages blue and italic */
treechildren:-moz-tree-cell-text(unread) {
    color: #CCCCFF !important;
    font-style: italic !important;
}

/* Change background color of unread messages to slightly red */
treechildren::-moz-tree-cell(unread) {
    background-color: #330000 !important;
}
treechildren::-moz-tree-cell(unread,selected) {
    background-color: #660000 !important;
}

/* Change colors of replied messages */
treechildren::-moz-tree-cell(replied) {
    background-color: #003300 !important;
}
treechildren::-moz-tree-cell(replied,selected) {
    background-color: #006600 !important;
}
treechildren::-moz-tree-cell(replied,current) {
    background-color: #009900 !important;
}
treechildren:-moz-tree-cell-text(replied,current) {
    color: #FFFFFF !important;
}

/* Change color of deleted messages */
treechildren::-moz-tree-cell(imapdeleted) {
    background-color: #999999 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted) {
    color: #FFFFFF !important;
text-decoration: line-through !important;
}
treechildren::-moz-tree-cell(imapdeleted,selected) {
    background-color: #333333 !important;
}
treechildren::-moz-tree-cell(imapdeleted,current) {
    background-color: #666666 !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,selected) {
    color: #DDDDFF !important;
}
treechildren:-moz-tree-cell-text(imapdeleted,current) {
    color: #DDDDFF !important;
}
treechildren::-moz-tree-cell-text(imapdeleted, offline) {
    background-color: #DDDDDD !important;
    text-decoration: line-through !important;
}

/* Folder pane(color/text) and Message pane(color) */
treechildren {
    background-color: #2D2D2D !important;
}

/* change Message Pane text */
treechildren:-moz-tree-cell-text(unread) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
    color: #D50000 !important
}
treechildren:-moz-tree-cell-text(read) {
    font-size: 10px !important;
    font-family: "Times New Roman" !important;
    font-weight: bold !important;
}

/* Set no-label (default) bottom border */
treechildren::-moz-tree-cell {
    border-bottom: 1px solid #FFFFFF !important;
}

I’ve also created a snippet for pretty labels on GitHub. Enjoy!

You can add to these easily by using the Thunderbird DOM Inspector. I know my brilliant readers have some more of these up their sleeves so let’s see what tweaks you have for Thunderbird in the comments!

Posted on under css