Complete CSS To Control TB UI Fonts

JYLD · Post by **JYLD** » October 9th, 2019, 5:57 pm

This is from my own CSS tweaks that I use with CustomizeMyBird. This is a complete CSS sample code to control all of TB's User Interface Fonts. This listing does not use the CSS for setting a Global UI Font because doing so prevents the detailed customization that is possible by addressing each element class/id separately. With this CSS I was able to achieve even better font size control and personalization than can be done with Theme & Font Size Changer. I use this on TB 60.9 but I believe it should work on TB 68+ in a userChrome,css file as long as TB 68+ still implements these CSS element Class/Ids.

Note that the following is coded to use fonts and sizes that I like on my system with a 27 inch monitor. You may not have some of the fonts I use installed on your system. You will either need to download and install the fonts I have chosen to use or edit the CSS to select fonts that you have on your computer and prefer.

Don't forget in TB 68+ to make sure you set:

Settings/Options > Advanced > General > Config Editor...
toolkit.legacyUserProfileCustomizations.stylesheets > true

FYI, the complete version of my current css along with the icons and png files i use can always be found at https://github.com/JYLD/User-CSS-For-Fi ... rd?files=1

Code: Select all

/*_Complete CSS Thunderbird UI Font Configuration_*/

#mail-toolbox toolbarbutton {
    background: rgba(255,255,255,.95)
                  linear-gradient(rgba(253,254,255,.8), rgba(243,244,245,.8),
                                                      rgba(213,216,217,.6), rgba(193,194,195,.6)) !important;
    border-top: 1px solid #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
    border-right: 1px solid #000000 !important;
    color: #12298E !important;
    font-weight: 600 !important;
    font-size: 10pt !important;
    font-family: 'Archivo Narrow' !important;
}

#quick-filter-bar-main-bar {
    background-color: #465966 !important;
    color: #FFFFFF !important;
    height: 30px !important;
    background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
           url('file:///T:/Users/Administrator/AppData/Roaming/Thunderbird/Profiles/6ztqu4q0.AB/extensions/QFBBackground3.png') !important;
    margin-left: 4px !important;
    border: 0px solid transparent !important;
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
}

#compose-toolbox toolbarbutton {
    text-shadow: none !important;   
    color: #12298E !important;
    font-weight: 600 !important;
    font-size: 10pt !important;
    font-family: 'Archivo Narrow' !important;
    background: rgba(255,255,255,.95)
                  linear-gradient(rgba(253,254,255,.8), rgba(243,244,245,.8),
                                                      rgba(213,216,217,.6), rgba(193,194,195,.6)) !important;
    border-top: 1px solid #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
    border-right: 1px solid #000000 !important;
    border-bottom: 1px solid #000000 !important;
}

calendar-day-label {
    background-color: #FED4D4 !important;
    color: #0000D0 !important;
    line-height: 30px !important;
    padding-top: 2px !important;
    font-size: 11pt !important;
    font-family: 'Archivo Narrow' !important;
}

.calendar-event-details-core.title-desc,
.calendar-event-details-core.location-desc {
    text-shadow: none !important;
    font-family: 'Arial Narrow' !important;
    font-size: 11pt !important;
    color: #000000 !important;
    font-weight: 500 !important;
}

#CardTitle {
    background: rgba(18,104,190,.8)
                  linear-gradient(rgba(170,232,252,.8), rgba(47,141,235,.7) 49%,
                                                      rgba(32,133,234,.6) 51%, rgba(20,114,208,.5)) !important;
    text-shadow: none !important;
    height: 28px !important;
    line-height: 25px !important;
    padding-left: 10px !important;
    text-shadow: none !important;
    font-family: 'Century Gothic' !important;
    font-size: 12pt !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    margin-top: -2px !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

#status-bar, .status-bar {
    background: rgba(18,104,190,.8)
                  linear-gradient(rgba(170,232,252,.8), rgba(47,141,235,.7) 49%,
                                                      rgba(32,133,234,.6) 51%, rgba(20,114,208,.5)) !important;
    height: 26px !important;
    text-shadow: none !important;
    color: #FAFBFC !important;
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
    font-weight: 500 !important;
}



/*_Other UI Font Choices_*/

menu, menulist, menuitem {
    font-size: 14px !important;
    font-family: 'Archivo Narrow' !important;
}

#folderTree > treechildren {
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
}

#threadTree > treechildren {
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
}

#tabs-toolbar {      
    font-size: 10pt !important;
    font-family: 'Archivo Narrow' !important;
}

#calendar-toolbox {
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#calendar-view-box #event-filter-menulist {      
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
}

#calendar-view-box #unifinder-searchBox {      
    font-size: 11pt !important;
    font-family: 'Arial' !important;
}

#calendar-view-box #unifinder-search-results-tree {       
    font-size: 10pt !important;
    font-family: 'Arial Narrow' !important;
}

#ab-toolbox toolbarbutton {
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#dirTree > treechildren {
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#abResultsTree  > treechildren {
    font-size: 11pt !important;
    font-family: 'Archivo Narrow' !important;
}

#agenda-listbox #today-header, #tomorrow-header, #nextweek-header {
    background-color: #FEF6E2 !important;
    background: linear-gradient(to right, rgba(255, 255, 0, .2), rgba(69, 177, 249, .3)),
           url('file:///T:/Users/Administrator/AppData/Roaming/Thunderbird/Profiles/6ztqu4q0.AB/extensions/Stone G.bmp') !important;
    color: #12298E !important;
    text-decoration: underline !important;
}

#abResultsTreeCols {
    font-size: 11pt !important;
    font-family: 'Archivo Narrow' !important;
}

#CardViewBox {
    font-size: 11pt !important;
    font-family: 'Archivo Narrow' !important;
}

#msgHeaderView {
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#agenda-listbox {      
    background-color: #D8EFFE !important;
    background: linear-gradient(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)),
           url('file:///T:/Users/Administrator/AppData/Roaming/Thunderbird/Profiles/6ztqu4q0.AB/extensions/FolderTreeBackground3.png') !important;
    color: #FFFFFF !important;
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#customizemybird_content_box {
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}   

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

/* Style ACCOUNT name with no new mail */
#folderTree > treechildren::-moz-tree-cell-text(isServer-true) {
    color: #FFFFFF !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    font-size: 10pt !important;
    font-family: 'Archivo Narrow' !important;
}

/* Style ACCOUNT name with new mail */
#folderTree > treechildren::-moz-tree-cell-text(isServer-true, biffState-NewMail) {
    color: #FFFFFF !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    font-size: 10pt !important;
    font-family: 'Archivo Narrow' !important;
}

#folderTree > treechildren::-moz-tree-cell-text(hasUnreadMessages-true) {
    color: #00FF00 !important;
    font-weight: 600 !important;
}

#folderTree > treechildren::-moz-tree-cell-text(hasUnreadMessages-true, selected) {
    color: #000000 !important;
    font-weight: 600 !important;
}

#folderTree > treechildren::-moz-tree-cell-text(hasUnreadMessages-true, selected, focus) {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

#folderpane-mode-selector-menulist {
    background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
           url('file:///T:/Users/Administrator/AppData/Roaming/Thunderbird/Profiles/6ztqu4q0.AB/extensions/QFBBackground3.png') !important;
    color: #FFFFFF !important;
}

#addresses-box hbox > label {
    color: #12298E !important;
    font-size: 10pt !important;
    font-family: 'Roboto Condensed' !important;
}

#threadTree treechildren::-moz-tree-cell-text(selected) {
    font-weight: 500 !important;
}

#threadTree treechildren::-moz-tree-cell-text(selected, focus) {
    font-weight: 500 !important;
}

#addresses-box #identityLabel, #subjectLabel {
    color: #12298E !important;
    font-size: 14px !important;
    font-family: 'Archivo Narrow' !important;
}

#msgheaderstoolbar-box {
    font-size: 14px !important;
    font-family: 'Archivo Narrow' !important;
}

#subject-box #msgSubject {
    color: #000000 !important;
    font-size: 14px !important;
    font-family: 'Archivo Narrow' !important;
}

vbox {
    font-family: 'Archivo Narrow' !important;
}

hbox {
    font-family: 'Archivo Narrow' !important;
}

JYLD · Post by **JYLD** » October 10th, 2019, 11:00 am

I have the folderTree set to a dark background. I've used CSS to adjust the colors of the folders including the "server/email account" folders to handle the color changes when there is unread email in a folder or subfolder.

I only have one missing element I need to change the color of the [GMail] folder.

I use gmail/gsuite as my email backend so in my folders shown in the folderTree I have a folder named " [GMail] ". The problem is this folder name is colored in dark grey, which does not show up very well on my dark folderTree background. So here is my question, hoping someone knows the answer.

Does anyone know the CSS to change the color of the [GMail] folder in the folderTree ?

Thanks!

JYLD · Post by **JYLD** » October 10th, 2019, 3:39 pm

I've come across today with the need for 3 additional TB UI Font css items. Still looking for help on the css to change the color of the [GMail] folder... Morat? Frank? Bueller?

Here they are:

/*Quick Filter Bar Results (you can set font, size, and color as needed) */
#qfb-results-label {
color: #FFFF00 !important;
}

/* Email Tags. The default seems to be dark background colors with black text. These change the text color for the Important Tag and the ToDo tag to white */

#msgHeaderView #expandedtagsBox .blc-FF0000 {
color: white !important;
}

#msgHeaderView #expandedtagsBox .blc-3333FF {
color: white !important;
}

JYLD · Post by **JYLD** » October 12th, 2019, 1:34 am

OK, I figured out a way to change the color of the [Gmail] folder from its default dark grey. Dark grey doesn't work to good on my dark background in the mail folder tree, so I needed a way to change it.

Here it is:
/* This sets ALL mail folders to white including the [Gmail] Folder */
/* Follow this later with specific color and font css settings for */
/* specific mail folders */

#folderTree > treechildren::-moz-tree-cell-text {
color: #FFFFFF !important;
font-weight: normal !important;
}

So first I color all the mail folders (including the [Gmail] folder) to white. Then I use css placed AFTER the above css to over-ride or add to the white color selection for specific mail folders. Samples of such specific mail folder css was provided above.

JYLD · Post by **JYLD** » November 3rd, 2019, 5:26 pm

To see what CMB and my tweaks look like in action:

https://github.com/JYLD/User-CSS-For-Fi ... -3-19).png

https://github.com/JYLD/User-CSS-For-Fi ... -7-19).png

https://github.com/JYLD/User-CSS-For-Fi ... -3-19).png

JYLD · Post by **JYLD** » November 4th, 2019, 1:52 pm

if you are trying to tweak color selections for CSS or anything else I have personally found this utility to be invaluable. I use the free version, but there is also a pay version. I don't know what the differences might be.

I use Colorpic 4.1 which can be downloaded here:

https://www.majorgeeks.com/files/details/colorpic.html

The pay version can be downloaded here:

http://www.iconico.com/colorpic/

JYLD · Post by **JYLD** » November 9th, 2019, 6:16 am

This doesn't adjust a TB UI (user interface) font. Instead it adjusts the display size of certain monospace-fixed width font emails and certain html text emails that display way too small. (Note: I use the following and keep the minimum font size setting under Tools-Options-Display-Font-Advanced set to NONE. Setting to none allows html emails one receives to maintain the look intended by the sender.)

I have come up with the following which so far works as a good solution for me to just increase the display font size of certain specific emails without affecting all other emails or the display of the compose window when writing a new email.

Code: Select all

    /* Put this in Thunderbird userContent.css file */

    /* This fixes monospace-fixed width font messages that are too small */
    /* For example text monospace-fixed width emails from an iPhone */

    pre,
    code,
    kbd,
    samp,
    tt{
      font-family: monospace, monospace !important;
      font-size: 16px !important;
    }

    /* This fixes messages coming in from gmail online interface that are just too small */

    .moz-text-html {
      font-size: 18px !important;
    }

    /*This fixes messages coming in from Office 365 whose text is too small */

    .moz-text-html .MsoNormal {
      font-size: 18px !important;
    }

If you don't like the pixel sizes I prefer, just edit the css for a different pixel size.

JYLD · Post by **JYLD** » November 9th, 2019, 7:34 am

Also, here is another font size for the display of email messages tip:

Under Tools-Options-Display-Formatting-Advanced, the font sizes you pick are in PIXELS and NOT in POINTS. Pixels are smaller than Points. So if you are used to using font sizes 10, 11, and 12 in microsoft word (those are POINT sizes), then in Thunderbird you need to select 14, 15, and 16 PIXELS. I am using 16 for proportional font size and 14 for monospace font size and NONE for the minimum font size.

Since TB sizes fonts in Pixels, if you are using a high resolution monitor and graphics card with greater than 1920 x 1080 resolution, then you may need to select even larger Pixel Sizes than 16 and 14 to get things to display properly on your monitor.

Here is a conversion chart for points, pixels, ems, and percentages:
Points Pixels Ems Percent
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%

By properly adjusting your font sizes for pixels under Tools-Options-Display-Formatting-Advanced, you may not need the userContent.css I posted above at all.

JYLD · Post by **JYLD** » November 9th, 2019, 5:29 pm

I decided it made more sense to use percentages rather than pixels. So as of now this is what my userContent.css file looks like:

Code: Select all

/* Put this in Thunderbird userContent.css file */

.moz-text-html .MsoNormal {
  font-size: 115% !important;
}

.moz-text-html > #divtagdefaultwrapper p {
  font-size: 115% !important;
}

pre, code, kbd, samp, tt {
    font-family: monospace, monospace !important;
    font-size: 115% !important;
}

.MsoListParagraph {
    font-size: 115% !important;
    line-height 1.25 !important;
}

LewS · Post by **LewS** » November 9th, 2019, 5:58 pm

JYLD, just in case you think no one is paying attention, thanks for the CSS.
I have added much of it to my original Thunderbird CSS, especially since
R68 messed up the earlier version.

JYLD · Post by **JYLD** » November 9th, 2019, 9:04 pm

LewS wrote:JYLD, just in case you think no one is paying attention, thanks for the CSS.
I have added much of it to my original Thunderbird CSS, especially since
R68 messed up the earlier version.

LewS, thank you for the kind words. I post it to try and help people who might find it useful.

FYI, the complete version of my current css along with the icons and png files i use can always be found at https://github.com/JYLD/User-CSS-For-Fi ... rd?files=1

Thanks again.

JYLD · Post by **JYLD** » November 10th, 2019, 8:09 am

After some additional reading and consideration, this is my current userContent.css:

Code: Select all

/* Put this in Thunderbird userContent.css file */

body {
    font-size: 100% !important;
}

.moz-text-html .MsoNormal {
    font-size: 112.5% !important;
}

.moz-text-html .MsoListParagraph {
    font-size: 112.5% !important;
    line-height 1.4 !important;
}

.moz-text-html > #divtagdefaultwrapper p {
    font-size: 112.5% !important;
}

pre, code, kbd, samp, tt {
    font-family: monospace, monospace !important;
    font-size: 105% !important;
}

JYLD · Post by **JYLD** » November 21st, 2019, 9:46 am

This is my current compose message window:

FYI, the complete version of my current css along with the icons and png files i use can always be found at https://github.com/JYLD/User-CSS-For-Fi ... rd?files=1

Complete CSS To Control TB UI Fonts

Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts

Re: Complete CSS To Control TB UI Fonts