Thunderbird 115: CSS Customization

click click · Sep 24, 2023

I did not have the @namespace statement in my css. I started from scratch and started adding stuff one by one and checked if it was working. The orange close tab is now working even with my old method. I could not get it to break like before. I left out things that did not work and need to fix those. Your help is greatly appreciated. I will eventually have to learn how to use the developer toolkit. Next up is folder and line spacing to get more lines on the screen. These don't seem to do anything.

Code:

  /********************************
     Set Font Size in Folder Pane
  ********************************/

#folderTree >treechildren::-moz-tree-cell-text {
   font-size:  10pt !important;
   font-family: Arial !important;
   }

  /***********************
     Folder list spacing
  ***********************/

#folderTree treechildren::-moz-tree-row {
   min-height: 17px !important;
   height: 17px !important;
}

  /**********************************************************************
     Set Font Size In Thread Pane
     Allow Meesages to use other fonts needs to be checked in Display >
     Formatting > Advanced in order for font-family to have any effect
  **********************************************************************/

#threadTree >treechildren::-moz-tree-cell-text {
   font-size: 10pt !important;
   font-family: Arial !important;
   }

  /***********************
     Thread list spacing
  ***********************/

#threadTree >treechildren::-moz-tree-row {
   min-height: 18px !important;
   height: 18px !important;
}

das10 · Sep 24, 2023

For the above, try the following rules (or maybe some variations thereof).
userChrome.css

Code:

 /********************************
     Set Font Size in Folder Pane
  ********************************/

#folderTree {
   font-size:   10pt  !important;
   font-family: Arial !important;
   }

  /***********************
     Folder list spacing
  ***********************/

#folderTree .container {
   line-height: 17px !important;
}

  /**********************************************************************
     Set Font Size In Thread Pane
     Allow Meesages to use other fonts needs to be checked in Display >
     Formatting > Advanced in order for font-family to have any effect
  **********************************************************************/

#threadTree > .tree-table {
   font-size:   10pt  !important;
   font-family: Arial !important;
   }

  /***********************
     Thread list spacing
  ***********************/

#threadTree > table[is="tree-view-table"] td {
  line-height: 18px !important;
}

Its mostly the old "moz-" type selectors which are breaking.

pn: Presumably, you have also tried out the Compact, Default & Relaxed Density spacing in the Settings menu?

click click · Sep 24, 2023

I have compact set. Your line spacing works when increasing it, but I believe my setting is at the limit on how much the spacing can be reduced. That's how it was in 102 too. I think compact mode is the smallest spacing I will get, so I probably don't need to add those rules unless I want a larger line spacing.

das10 · Sep 25, 2023

click click;
For the twisty icons in the folder pane; these rules appear to work. Although the free source squared "+" & "-" .svg icons I have used as samples are not perfect for the demo, hopefully you can do better with your own icons.

Code:

 /************twisty .icons in folder pane**************************/
 /*twisty icons in folderTree
 "adjust padding according to your own icon"                       
 ********************************************************************/

#folderTree li > div .twisty .twisty-icon{
  color:            transparent !important; /* to hide default twisty icon */
  background-color: transparent !important; /* bg-color if req'd */
  padding-top:      1px         !important;
  padding-right:    0px         !important;
  background-image: url('icons/minus-square-regular.svg') !important;
}
 /*******************************************************************
  twisty icon in folderTree for "collapsed" folders                  
  nb: if the following rule is omitted, then all twistys have the icon
        from the above rule, and which gets rotated automatically.
  *******************************************************************/

#folderTree ul >.collapsed .twisty .twisty-icon {
  color:            transparent !important; /* to hide default twisty icon */
  background-color: transparent !important; /* bg-color if req'd */
  padding-top       0px         !important; /* according to own icon size */ 
  background-image: url('icons/plus-square-regular.svg') !important;  
} 

  /***************************************************************
  tree indentation adjustment-default calc'n is with 16px so to 
  adjust to 18px (add 2px extra)? 
  *****************************************************************/

#folderTree ul {
  --indent: calc((16px + 2px)  *  var(--depth)) !important; /*adjust as needed -see above */
}

 /************twisty .icons in folder pane**************************/

click click · Sep 25, 2023

das10
My twisty icons don't work, but if you give me a pointer where you downloaded yours, I can give them a try

Wisewiz · Sep 25, 2023

@click click
The icons you see in das10's shots are native TBird. Have you done something in Settings so that icons don't show up? Try right clicking a folder and check Properties.

click click · Sep 25, 2023

i'm talking about the folder twisty, not the folder icons

das10 · Sep 25, 2023

The two svg icons I used (plus-square.svg & minus-square.svg) are available from:

Font-Awesome/svgs/regular at master · FortAwesome/Font-Awesome

The iconic SVG, font, and CSS toolkit. Contribute to FortAwesome/Font-Awesome development by creating an account on GitHub.

github.com

click click · Sep 25, 2023

Ok your twisty icons work. I tried solid angle-right.svg and angle-down.svg and they show up double. Your icons don't have that problem. The other icons I wanted had the same problem showing double.

das10 · Sep 26, 2023

That is because I chose svg's which had square backgrounds, whilst the "angle-right.svg" and "angle-down.svg" you chose don't. If possible, try to change the canvas size of your icon so it has a square aspect ratio ie. don't change the main image of the icon as such, but make the canvas square and the main image is in the centre.

On my System, the twisty icon only occupies around 16px x 16px , and manipulating it using transformations with external icons is a bit difficult (for me at least, as I am no expert in either CSS coding or images).

If all you want to do is manipulate the default twisty, you can color & transform it in place uisng something like this;

Code:

 /************twisty .icons in folder pane**************************/
 /*twisty icons in folderTree
 "adjust padding according to your own icon"                       
 ********************************************************************/

#folderTree li > div .twisty .twisty-icon{
  color:            red !important;
  background-color: transparent !important; /* bg-color if req'd */
  padding-top:      1px             !important;
  padding-right:    0px             !important;
  transform:        scale(0.75,0.75) !important;
}
 /*******************************************************************
  twisty icon in folderTree for "collapsed" folders                  
  nb: if the following rule is omitted, then all twistys have the icon
        from the above rule, and which gets rotated automatically.
  *******************************************************************/

#folderTree ul >.collapsed .twisty .twisty-icon {
  color:            red         !important;
  background-color: transparent !important; /* bg-color if req'd */
  padding-top       0px         !important; /* according to own icon size */ 
  transform: rotate(-90deg) scale(0.75,0.75) !important;
} 

  /***************************************************************
  tree indentation adjustment-default calc'n is with 16px so to 
  adjust to 18px (add 2px extra)? 
  *****************************************************************/

click click · Sep 26, 2023

Well, your expertise is miles better than mine.

The smaller size fits much better and I will use that. Thanks again for being so helpful. I still have some more things I would like to change. I hope I'm not being a pain. Can the arrows be made bold? I tried font-weight: bold !important; but that did not work

das10 · Sep 26, 2023

Unfortunately, the default twisty is in svg file format & not a font character, so it does not have a 'boldness' (weight) property.

click click · Sep 26, 2023

Ok, next question.

I want to hide the Forwarded/Replied etc. icons from appearing in the thread pane under the subject column. Is there a way to hide these? it's confusing when you don't know what they mean and you have to go looking for an explanation and later forget again. There are others too that show now and then under subject.

das10 · Sep 26, 2023

Maybe this works for all images which appear within the "Subject" Column (I had to create a test replied message to try it - but probably works on forwarded, redirected as well; also I don't ever recall seeing any other persistent images inside that column, but I may be wrong ).

Code:

/* "all" images (?) which appear in the "Subject" Column */
#threadPane td > div img {
  fill:  transparent !important;
}

(or perhaps change the fill to a less distracting color like lightgrey - which I personally would if I did find them distracting).

update: For the non-persistent new messages indicator (? Golden Star icon) this updated rule should work.

Code:

/* "all" images (?) which appear in the "Subject" Column */
#threadPane td > div img {
  stroke: transparent !important;
  fill:   transparent !important;
}

click click · Sep 26, 2023

I never had much use for the subject column indicators and I just as soon not see them. They're gone now. The new indicator still shows when something new arrives, but it's not persistent . Do you know where I might find documentation on #foilderTree , #threadPane, etc. and abreviations such as li, div, td ?

das10 · Sep 27, 2023

For Thunderbird panes use the following page, or use the search at the top of that page. To learn about particular terms like li, div, td etc, use Google to search for the terms like "html li" or "css li" etc.

about3Pane.css - mozsearch

searchfox.org

click click · Oct 4, 2023

Has anyone noticed that when scrolling thread items, hover highlighting keeps trying to follow the lines passing by the cursor?

In v102 hover highlighting is hidden/off during scroll . I find it distracting and wonder if there is a way to turn off this behavior.

click click · Oct 5, 2023

Note: the above doesn't happen when using the scrollbar. Only when scrolling with the mouse wheel or scrollpoint etc.

MarcDwonn · Oct 5, 2023

Since the forced update to Supernova i had multiple problems, but i think i resolved them now. Except one thing that's driving me crazy, every time i get a new email.

There is no margin below the messages list anymore. So, it's not clear visually that the lowest message i see is the last in the list. And, it's more difficult to click now, with my settings (compact view, 21px line height).

How can i add back the space at the end of the messages list?