Thunderbird 115: CSS Customization

das10 · Sep 14, 2023

Edwin * Oblias ; are you still using the CSS file you posted in #196?

Try to see if setting the Min Max Close Caption button backgrounds using the following rule at least makes the background uniform.

Code:

/*  min max close buttons  - background-color using color picker from your image */
.titlebar-buttonbox-container {
background-color: #544434 !important;
}

pn: This is not my code - I got it from Aris's Firefox theme changer.

Oblias · Sep 14, 2023

das10 said:
Edwin * Oblias ; are you still using the CSS file you posted in #196?

Try to see if setting the Min Max Close Caption button backgrounds using the following rule at least the background uniform.

Code:

/* min max close buttons - background-color using color picker from your image */ .titlebar-buttonbox-container { background-color: #544434 !important; }

pn: This is not my code - I got it from Aris's Firefox theme changer.

Yes, that did it for my system! Once again, you come thru with a solution we can use, I salute you even if you're not the orig author....

Edwin · Sep 14, 2023

das10 said:
Try to see if setting the Min Max Close Caption button backgrounds using the following rule at least the background uniform.

Wisewiz · Sep 19, 2023

We've had 115.2.2 for over a week now. Wonder what's (not) happening in the dev lab.

Wisewiz · Sep 20, 2023

Wella, wella. Got 115.2.3 this afternoon. They're not all asleep, after all.

click click · Sep 21, 2023

Anyone know how to get a border to show around a highlighted selection in the new Thunderbird?
from v102

from v115

das10 · Sep 22, 2023

I presume you mean the border around a message row that is "hovered" over?

Then, the closest I can get is with the following CSS rule.

I can't get a border to show on the left and right hand ends. Also, the border at the very top on the very first row when using the classic or wide view doesn't work, although it works with the Cards view.

Code:

/* top & bottom border over "hovered" message row */
#threadTree tr:hover td {
  border-collapse:  collapse         !important;  
  border-block:     1px solid blue   !important;
}

Another alternative might be:

Code:

/* Alternative; box style which may work but only with 2px box border */

#threadTree tr:hover {
  outline-offset: -1px           !important; 
  outline:        2px solid blue !important;
}

/* to only catch the top border of 1st row anomaly in classic & wide view */
#threadTree tr[is="thread-row"]:first-of-type:hover td {
  border-top:     2px solid blue !important;  
}

click click · Sep 22, 2023

The active or focused entry as highlighted in the subject images. Not hover, but that's nice too. Do you have something for the Folder side?

Wisewiz · Sep 22, 2023

@click click

Adding this to userChrome.css gives you back the borders between messages in the Tables list display. The Cards view already has borders.

CSS:

table[is="tree-view-table"] td {
     border-bottom: solid 1px blue !important;
}

das10 · Sep 22, 2023

I don't know if this would work for you (on my system, the default background color of the selected row is dark blue, but if your default background color is light blue as shown in your images, then hopefully it will work).

Code:

#threadTree tr.selected {
  outline-offset:   -1px             !important; 
  outline:          2px solid blue   !important;
}

/* to only catch the top border of 1st row anomaly in classic & wide view */
#threadTree tr[is="thread-row"]:first-of-type.selected td {
  border-top:     2px solid blue  !important;  
}

das10 · Sep 22, 2023

For the folder Selected/Focussed outline, this could work:

Code:

/* folder - selected/focussed folder outline */
#folderTree li.selected > .container {
     margin-block:     1px              !important;
     outline-offset:   -1px             !important;   
     outline:          2px solid blue   !important;
}

click click · Sep 22, 2023

~~#threadTree tr.selected~~ ~~did not work.. Only border-top: would show when selecting the first entry~~
My bad, the above works. I missed removing an extra {

das10 · Sep 22, 2023

Wisewiz re: #289 ;
To get rid of the small anomaly under the 'first' column of the 'last' row when drawing bottom-border on all rows:

Code:

/* credit to morat at mozillazine */
#threadTree table[is="tree-view-table"] {
  border-collapse: collapse     !important;
}
#threadTree tr[is="thread-row"] {
  border-bottom: 1px solid blue !important;
}

Wisewiz · Sep 22, 2023

@das10
Results with 115.2.3 not impressive, so I've gone back to my regular userCh. Thanks so much for trying, but I was only trying to help the new guy on the block. I only use the Cards view, so mine looks exactly as I want it to. This is with that new pair of rules added to my file as is (artifact still there):

And this is with the new rules added, but my old

CSS:

table[is="tree-view-table"] td {
 border-bottom: solid 1px black !important;
}

taken out:

Evidently, my old code above works fine, and the artifact gives me no headaches at all, since I never see that view. Tx again, m'fren'.

Edwin · Sep 22, 2023

Wisewiz · Sep 22, 2023

@das10 Actually, I was just thinking about this, and I realized (/suspected??) that the "artifact" is present even in my Cards view, in the form of a heavier line at the bottom of the last message entry. Suits me just fine.

click click · Sep 22, 2023

Two more that stopped working for me.

Code:

  /*************************************************
  Make the close button more clearly visible on hover
  **************************************************/

.tab-close-button:hover {
 background-color: orange !important;
 fill: white !important;
}
  /*****************************************
   Replace twisty to open and close folders
  *****************************************/

treechildren::-moz-tree-twisty {
padding-top: 1px;
padding-right: 2px;
list-style-image:url('icons/open1.png') !important;  }

treechildren::-moz-tree-twisty(open) {
list-style-image:url('icons/closer.png') !important;   }

treechildren::-moz-tree-indentation {
width: 14px;  }

das10 · Sep 23, 2023

For the tab close hover color this works:

Code:

/* Tab close button hover color */
#tabs-toolbar:not([brighttext]) button.tab-close-button:hover {
  background-color: Orange !important;
  color:            White  !important;
}

For the twisty icons, still trying to replicate them in version 115.

click click · Sep 23, 2023

das10 said:
For the tab close hover color this works:

Code:

/* Tab close button hover color */ #tabs-toolbar:not([brighttext]) button.tab-close-button:hover { background-color: Orange !important; color: White !important; }

I couldn't get that one to work. The [X] background stays grey. No idea what might e blocking this

das10 · Sep 24, 2023

If you have carried over this line from your older userChrome.css file, try removing that line, as I read that it doesn't seem to be required with the new way that Thunderbird 115+ is coded.

Code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul")

In fact, after your message, I tried to double check your old tab close rule with and without this @namespace line, and it too nearly works as is, if that namespace line is removed! (note: If you re-use your old tab button code, just change "fill: white" to "color: white").

If you don't have that line and it still doesn't work, try by removing everything in the userChrome.css file (after backing it up somewhere), except the tab close rule. That way, by re-introducing a few rules back into the css file you may be able to locate the rule which breaks the tab button rule.
Of course, if you are able to use the developer toolbox (not that difficult), you can check for rule breakages very quickly.

Thunderbird 115: CSS Customization

Well-known member

My Computer

Well-known member

My Computer

♦ ♦

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

♦ ♦

My Computers

𝐒𝐩𝐞𝐚𝐤𝐬 𝐀𝐧𝐜𝐢𝐞𝐧𝐭 𝐆𝐞𝐞𝐤

My Computers

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Well-known member

My Computer

Similar threads