CSS To Layer Image Into TB Folder Tree

Discussion of general topics about Mozilla Thunderbird
Post Reply
JYLD
Posts: 305
Joined: July 18th, 2019, 9:59 am

CSS To Layer Image Into TB Folder Tree

Post by 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:

Image

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");
    color: #FFFFFF !important; 
    font-weight: 500 !important;
} 
Here is the relevant css code for the Quick Filter Bar:

Code: Select all

#quick-filter-bar-main-bar {
    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");
}
Last edited by JYLD on October 7th, 2019, 5:30 pm, edited 1 time in total.
User avatar
Frank Lion
Posts: 21173
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom
Contact:

Re: CSS To Layer Image Into TB Folder Tree

Post by Frank Lion »

JYLD wrote:Here is an example of what I've done with Customize My Bird, adding my own css tweaks
I suggest you think about using relative paths instead of local paths. It's cleaner and makes the chrome folder independent of your stuff and thus the code can be shared.

Make a folder called icons in the chrome folder and add your images to it. Your code will then look like this -

Code: Select all

    background: linear-gradient(rgba(17, 90, 169, .6), rgba(14, 73, 136, .6)),
           url("icons/FolderTreeBackground4.png") !important;
...instead of -

Code: Select all

    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");
As you can see, I've also thrown in a !important there. Doesn't matter if the code works 'just fine' on your Win7 without it, it may not do on Win8, Win10, Linux or Mac. Even if it does an extension or other externals may wreck your code.

tl;dr? if in doubt add !important to everything. WFM.
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)
.
JYLD
Posts: 305
Joined: July 18th, 2019, 9:59 am

Re: CSS To Layer Image Into TB Folder Tree

Post by JYLD »

Frank, I appreciate your most excellent suggestions. I also follow the rule of putting !important at the end of everything. Just an oversight in this case on my part, I'm correcting it now. I also like your suggestion of using a folder under the chrome folder for items instead of what I've been doing by putting them in my extensions folder of my TB profile.
JYLD
Posts: 305
Joined: July 18th, 2019, 9:59 am

Re: CSS To Layer Image Into TB Folder Tree

Post by JYLD »

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

Image

And again for the TB AddressBook:

Image

Full Size Images Can Be Viewed Here:

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
Last edited by JYLD on November 3rd, 2019, 5:24 pm, edited 2 times in total.
JYLD
Posts: 305
Joined: July 18th, 2019, 9:59 am

Re: CSS To Layer Image Into TB Folder Tree

Post by JYLD »

And using the same technique for the "Today Pane"

Image
JYLD
Posts: 305
Joined: July 18th, 2019, 9:59 am

Re: CSS To Layer Image Into TB Folder Tree

Post by JYLD »

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

Look at this screen shot:

Image

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:

Image

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