MozillaZine

CSS To Layer Image Into TB Folder Tree

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

Post Posted October 4th, 2019, 9:21 pm

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.

Frank Lion

User avatar
 
Posts: 20797
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted October 5th, 2019, 6:46 am

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.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

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

Post Posted October 5th, 2019, 12:11 pm

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: 229
Joined: July 18th, 2019, 9:59 am

Post Posted October 6th, 2019, 11:18 am

Last edited by JYLD on November 3rd, 2019, 5:24 pm, edited 2 times in total.

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

Post Posted October 9th, 2019, 2:43 pm

And using the same technique for the "Today Pane"

Image

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

Post Posted October 12th, 2019, 4:07 pm

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.

Return to Thunderbird General


Who is online

Users browsing this forum: No registered users and 2 guests