Solved Change border colors in Folder Pane for highlighted folder

davidhelp · Oct 26, 2024

Thunderbird version 128.3.1
Question: How do you change border colors in Folder Pane for highlighted folder?

In the Folder Pane when a folder is selected there is a orange left side border and the border around the highlighted folder is a thin orange color. (from Windows Title bar and window borders)
Also when you hover over a folder there is a slight border color of whatever your Windows Title bar and window borders color is.
It carries over to what colors I have using the userChrome.css file.

Question: How to change these colors to what I want?

Here are the settings for the userChrome file I use.

Code:

/* Folder Pane - hover color, once a row is clicked on it will either display
the Windows Titlebar color you choose if you do not specify a color here then
the hover color will continue on any other row you hover over. light blue specified */
.container:hover {
  background-color: #66CDAA !important;}


/* Folder Pane - light blue specified */
li.selected > .container {
  color: black !important;
  background-color: #52aaff !important;
  border: 0px solid #000000 !important;}

glasskuter · Oct 26, 2024

There are a number of add-ons for TB regarding colors. Maybe one would work for you. I can't say how they would react with your css file though.

bordercolors :: Search :: Add-ons for Thunderbird

addons.thunderbird.net

antspants · Oct 26, 2024

davidhelp said:

Question: How to change these colors to what I want?

Here are the settings for the userChrome file I use.

Code:

/* Folder Pane - hover color, once a row is clicked on it will either display
the Windows Titlebar color you choose if you do not specify a color here then
the hover color will continue on any other row you hover over. light blue specified */
.container:hover {
background-color: #66CDAA !important;}


/* Folder Pane - light blue specified */
li.selected > .container {
color: black !important;
background-color: #52aaff !important;
border: 0px solid #000000 !important;}

You mean what to change in the code?

background-color: #66CDAA !important;}
background-color: #52aaff !important;
border: 0px solid #000000 !important;}

All of the bold letters & numbers are hex colour codes. Change them accordingly.
(Backup the style sheet first)

You can use this site to get your hex colour codes

HTML Color Codes

Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.

htmlcolorcodes.com

antspants · Oct 26, 2024

For some reason:

border: 0px solid #000000 !important;}

Did you change that? If you want the border, change to 1px (or more if you want it thicker, I wouldn’t go past 2, it will be kind of ugly.)
The #000000 is black.

davidhelp · Oct 26, 2024

Thanks for trying. Those add-ons are for very old versions of Thunderbird. They cannot be installed.
In my screenshots I show the Thunderbird original look with the border. The border code was there as a reminder only. If I fill in like 3px it does not show a border that I want but only what you see in my screenshots.

Code:

/* Folder Pane - light green hover color, red for border */
.container:hover {
background-color: #66CDAA !important;}
border: 3px solid #FF0000 !important;}


/* Folder Pane - light blue specified, black for border */
li.selected > .container {
color: black !important;
background-color: #52aaff !important;
border: 3px solid #000000 !important;}

antspants · Oct 26, 2024

It’s always nice to have complimentary colours, meaning the background colour would be subtle then darker elements accordingly.
For instance with Blues
Subtle blue BG with a slightly darker blue hover.
Darker blue border

CSS:

.container:hover {
background-color: #b5eeee !important;}

/* Folder Pane - light blue specified */
li.selected > .container {
color: black !important;
background-color: #e9f4f4 !important;
border: 1px solid #acdcdc !important;}

davidhelp · Oct 27, 2024

Ignore the code from me above in post #5. I corrected it here. I do not want to see a border at all and have tried the same color as the background-color. I only use the black and red colors to view the border. If I use the same color then the border disappears when you click away but that orange/red thin border still shows up when the folder is selected. The hover color still has the thin border.

The hover border does not change.

With same color as background.

Code:

/* Folder Pane - light green hover color, red for border or the light blue */
.container:hover {
background-color: #66CDAA !important;
border: 3px solid #FF0000; !important;}


/* Folder Pane - light blue specified, black for border */
li.selected > .container {
color: black !important;
background-color: #52aaff !important;
border: 3px solid #000000 !important;}  /* change to #52aaff */

antspants · Oct 27, 2024

If you don't want a border, remove it

CSS:

.container:hover {
background-color: #66CDAA !important;
border: 0px solid #FF0000; !important;}

Or border none.

CSS:

.container:hover {
background-color: #66CDAA !important;
border: none; !important;}

Or try border style none if the above doesn’t work.

CSS:

.container:hover {
background-color: #66CDAA !important;
border-style: none; !important;}

davidhelp · Oct 27, 2024

See my explanation above. That has been done. A border with 3px and without 0px
Just copy my code into a userChrome.css you create and re-open Thunderbird and check it yourself.

antspants · Oct 27, 2024

That isn’t removing a border properly in CSS coding. But if making it the same colour works for you

das10 · Oct 27, 2024

If you don't want to see the border, you can also make its color transparent; eg.

Code:

/* Folder Pane - hover color, once a row is clicked on it will either display
the Windows Titlebar color you choose if you do not specify a color here then
the hover color will continue on any other row you hover over. light blue specified */
.container:hover {
background-color: #66CDAA       !important;
border-color:     transparent   !important;
}

/* Folder Pane - light blue specified */
li.selected > .container {
color:            black         !important;
background-color: #52aaff       !important;
border-color:     transparent   !important;
}

/* the indicator in front of the foldername selected */
li.selected div::before {
background-color: #52aaff      !important;
border-color:      transparent  !important;
}

davidhelp · Oct 27, 2024

Thanks, the border-color: transparent (das10) works for the hover.
I added the border: none; to the li.selected (antspants) and now have no border for that. Without it the border appears.
Anyone know how to change the color of the left side line that Thunderbird adds for the li.selected?

Code:

/* Folder Pane - light green hover color, border transparent. */
.container:hover {
background-color: #66CDAA !important;
border-color: transparent !important;
border-left: 3px solid  #FF0000 !important;}


/* Folder Pane - light blue specified, border has orange line on left from Thunderbird*/
li.selected > .container {
color: black !important;
background-color: #52aaff !important;
border-color: transparent !important;}
border: none; !important;}

das10 · Oct 27, 2024

Do you mean the selection indicator on the "left" of the selected folder?

davidhelp · Oct 27, 2024

Yes, what you see in the above photo with the line offset from the blue highlight.
It takes up the Windows color for your title bars and windows colors under Settings> Color
It is a grey line if you click elsewhere.

antspants · Oct 27, 2024

davidhelp · Oct 29, 2024

This all works with the colors I want. The color of the left side that Thunderbird adds I have not been able to change yet but it is orange and that works for me. This is all the code for the Folder Pane I use.

Code:

/* Folder Pane - background color is light grey */
#folderPane, #folderPaneHeaderBar {
background-color: #F0F0F0 !important;}


/* Folder Pane - folder names, font, font size - text color is dark green*/
.name {color: #0D3C39 !important; font-family: 'Georgia'; font-size: 12px; font-weight: 600; !important;}


/* Folder Pane - hover color, once a row is clicked on it will either display the Windows Titlebar color you choose if you do not specify a color here. The hover color will continue on any other row you hover over. hover color is light green, border-left is red */
.container:hover {
  background-color: #66CDAA !important;
  border-color: transparent !important;
  border-left: 3px solid  #FF0000 !important;}

/* Folder Pane - light blue specified */
li.selected > .container {
  color: black !important;
  background-color: #52aaff !important;
  border: 0px solid #000000 !important;}

/* this is the color when you drag an email to another folder and that folder is highlighted. Light green color */
#folderTree:focus-within li.selected > .container,
#folderTree li.drop-target > .container {
  background-color: #66CDAA !important;
  border: 0px solid red !important;
  border-radius: 0px;}

Solved Change border colors in Folder Pane for highlighted folder

Member

My Computer

aka Mama Glass

My Computers

Like a rolling drone.

My Computers

Like a rolling drone.

My Computers

Member

My Computer

Like a rolling drone.

My Computers

Member

My Computer

Like a rolling drone.

My Computers

Member

My Computer

Like a rolling drone.

My Computers

Well-known member

My Computer

Member

My Computer

Well-known member

My Computer

Member

My Computer

Like a rolling drone.

My Computers

Member

My Computer

Similar threads