CSS And Layering Images Into Thunderbird UI

[JYLD]

Here is an example of what I've done with Customize My Bird, adding my own css tweaks, and then adding a nice theme that uses transparency behind my setup. The themes however don't add anything to or change the Folder Tree or Quick Filter Bar backgrounds. So, I came up with some images and additional CSS to lay in some complimentary background images in the Folder Tree and Quick Filter Bars

This is what it looks like:



Here is the relevant css code for the Folder Tree:

Code: Select all

#folderTree { 
    background-color: #465966 !important; 
    background: linear-gradient(rgba(17, 90, 169, .6), rgba(14, 73, 136, .6)),
           url("file:///T:/Users/Administrator/AppData/Roaming/Thunderbird/Profiles/6ztqu4q0.AB/extensions/FolderTreeBackground4.png") !important;
    color: #FFFFFF !important; 
} 

Here is the relevant css code for the Quick Filter Bar:

Code: Select all

#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: 11pt !important;
    font-family: "Archivo Narrow" !important;
}

#quick-filter-bar-main-bar .textbox-input-box {
    background-color: #465966 !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;
    color: #FFFFFF !important;
    border: 0px solid transparent !important;
    font-size: 11pt !important;
    font-family: "Archivo Narrow" !important;
}

#qfb-qs-textbox {
    background-color: #465966 !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;
    color: #FFFFFF !important;
    border: 0px solid transparent !important;
    font-size: 11pt !important;
    font-family: "Archivo Narrow" !important;
}

#quick-filter-bar-main-bar .textbox-input:hover {
    background-color: #FFFFFF !important;
    color: #0725EB !important;
    border: 0px solid transparent !important;
    font-size: 11pt !important;
    font-family: "Archivo Narrow" !important;
}

#quick-filter-bar-main-bar .textbox-search-clear {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    margin-left: 4px !important;
    border-top: 2px solid #FFFFFF !important;
    border-left: 2px solid #FFFFFF !important;
    border-right: 2px solid #D8EFFE !important;
    border-bottom: 2px solid #D8EFFE !important;
}

#qfb-results-label {
    color: #FFFF00 !important;
}

[JYLD]

Using the same technique with an image for the TB Calendar:



And again for the TB AddressBook:



Full Size Images Can Be Viewed Here:

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

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

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

[JYLD]

Here's a cool trick using the ability to lay images into places as a background.

Look at this screen shot:



Notice in the picture above that the quick filter bar is active yet you don't see the normally white text input box. That's because I've laid the matcing image into the text input box so its effectively hidden from view. I have it set to become visible when you hover the mouse over the quick filter bar text input box area. When you do then suddenly this is what appears:



Pretty cool. I did the same thing with the filter bar for the address book tab. Definitely cool looking in my humble opinion.

[HansV]

Welcome to Eileen's Lounge! Thanks for sharing, I hope it'll be useful to Thunderbird users.

[JYLD]

Thank you Hans. I've put a lot of work into customizing the TB UI into something I find visually appealing from the plain white TB interface. I use TB 60.9 because of addon compatibility issues, and the fact I don't need the "improvements" in version 68+. However, most of what I've done with the TB UI should work in a userChrome.css file and TB 68+.