Thunderbird 115: CSS Customization

click click · Sep 9, 2024

Sorry, it does work and thanks for that. I must have done something wrong when I tried it. I just tried .container and that also works. Is there a difference?

.container {
max-height: 16px !important;
min-height: 16px !important;
}

das10 · Sep 10, 2024

The main difference appears to be that with your code, the space around the “Folder mode” title names (eg., ‘All Folders’, ‘Unified Folders’, etc.) remains the same, whereas with mine, that gets reduced as well. So, one can use whichever one prefers.

Also, and this is just for informational purposes, if you use the .container class name method, you would normally use it as a specific descendant of the #folderPane, ie.,as #folderPane .container, instead of just .container. This is to avoid affecting any another .container class which might be elsewhere in Thunderbird & which you might not be aware of.

RobDF · Sep 18, 2024

Morning everybody,
Trust you are all okay.
I wanted to ask you if anybody of you has ever experienced drop-down menu appearing normally when tapped but not disappearing automatically unless you press Esc when you move the mouse out?
Hereunder attached a screeshot.
Thanks.

lenokontesa · Sep 27, 2024

To minimize headers row without extension : how to make headers row smaller

eleven11 · Oct 18, 2024

Dear CSS whizzes,
I have tried Inspector but failed to solve the problem myself:

How can I style the task items (completed, overdue, current, etc.) ?

davidhelp · Oct 25, 2024

Add to your userChrome.css file. 0px will make gap the smallest. re-open Thunderbird to see the change.
/* This is the height of the From Me, To, Subject lines from each other. The bigger the number the wider the spread in height */

#messageHeader {row-gap: 0px !important;}

RobDF · Jan 8, 2025

Hi guys and compliments of the season.

I have not disappeared but a lot things have happened of which some not very nice but here we are again. Life must go on.
I have noticved that not much have been happening on the new customization for TB 128.5.2esr.

Is this thread still going on. Is there anything different on the 128.5.2 esr?

All the best
Rob DF

FrancoDT · Jan 8, 2025

RobDF said:
Is this thread still going on. Is there anything different on the 128.5.2 esr?

Version 128.6.0esr is out today

LnzMrt · Jan 27, 2025

Hello everybody,

I hope that this thread is still active. It has been very useful for me, and I was able to tweak TB (Betterbird, actually) to my preferences.

I was wondering if anybody had a brilliant idea on how to reduce the size of text and button and change the colour of the sign "To protect your privacy, TB has blocked remote content in this message." to something less intrusive?

While I am posting, I wanted to share an effective snippet to expand the category colour and make today stand out in the Calendar that I am using:


/* Calendar Category colour IMPORTANT */
.calendar-category-box {
    width: 100% !important;
}

/* Make "today" stand out in calendar */
.calendar-month-day-box-current-month[relation="today"],
.calendar-month-day-box-day-off[relation="today"],
.calendar-month-day-box-other-month[relation="today"]
{
  border: 2px solid SteelBlue !important;
}

Lnz

Phil_C · Jan 27, 2025

That calendar "Today" mod is excellent! Thank you.

LnzMrt · Jan 27, 2025

Phil_C said:
That calendar "Today" mod is excellent! Thank you.

This is what it looks like. I personally find it enlarging the category colour very useful

Phil_C · Jan 27, 2025

Hmm. Your screenshot does not apply in my case. The only effect of your code is on the calendar square of today's date.

The first section of code that refers to the category box has no effect. I can remove it, resulting in no change.

The second section works perfectly for me. I don't need the rest. I'm just informing you of this result on my setup.

das10 · Jan 27, 2025

@LnzMrt; Thanks for sharing your code, and welcome to Elevenforum.

I think you can make some of the changes you want re: the colors, but the only way I know to make the bar smaller is by using "transform" with a -ve margin block. Although I don't know how effective that might be in case there is more than one bar (having said that I have only ever seen a single bar appearing at the top).

Anyway, here is something to try in userChrome.css:

Code:

/* the main info bar (yellow)  - also see next section */
#mail-notification-top .infobar {
     --message-bar-text-color:       grey      !important;  /* changes color of warning icon + the main text */
     --message-bar-background-color: #ccddee !important;
     font-style:                     italic    !important; /* if req'd */
     font-size:                      100%       !important; /* can use nn% or nnpx for font-size */
     transform: scale(100%, 80%)               !important;
}   
/* this reduces a liitle of the space outside the yellow bar - but note that if there
are multiple yellow bars it may not look right - so remove this code block if necessary */
#mail-notification-top .infobar {
     outline:       1px solid lightgrey !important; /* if req'd */
     margin-block:  -1px -1px           !important; /* remove gaps above & below the yellow bar */
     margin-inline: 4px                 !important; /* use 0px to remove gaps in front & end of the yellow bar */
}    
/* To blend blank area around the infobar with the message header background - if wanted */
#mail-notification-top  .notificationbox-stack[notificationside="top"] {
    background-color: #B1C1DB !important; /* choose same color as the message header b/ground color */
}
/* the text Buttons (buttons which have text) */
#mail-notification-top  .notification-button  {
     color:            grey         !important;
     background-color: aliceblue    !important;
     border-color:     greenyellow  !important;
}
/* the close button - Again not sure if this affects any other "Close" buttons. */
 button {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
    &[size="small"] {
      transform: scale(0.9, 0.9) !important;
      color:        grey         !important;
      border-color: greenyellow  !important;  
      background-color: aliceblue !important;  
    }
  }
}
/* button hover */
#mail-notification-top  .notification-button:hover  {
     color:            white        !important;       
     background-color: skyblue      !important;
}
 button {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
    &[size="small"]:hover {
      color:            white   !important;  
      background-color: skyblue !important;  
    }
  }
}

default infobar.

Security & Junk infobar (subdued colors).

------------
If you want to try an even thinner infobar, try and play around with the above code. You can test other possibilities to reduce the infobar further like this, by making it 'appear' connected to the message header box :

Code:

/* the main info bar (yellow)  - also see next section */
#mail-notification-top .infobar {
     --message-bar-text-color:       grey      !important;  /* changes color of warning icon + the main text */
     --message-bar-background-color: #ccddee   !important;
     font-style:                     italic    !important; /* if req'd */
     font-size:                      100%      !important; /* can use nn% or nnpx for font-size */
     transform: scale(100%, 80%)               !important;
}    
/* this reduces a liitle of the space outside the yellow bar - but note that if there 
are multiple yellow bars it may not look right - so remove this code block if necessary */
#mail-notification-top .infobar {
     margin-block:  -4px -4.5px          !important; /* remove gaps above & below the yellow bar */
     margin-inline: -2px                 !important; /* remove gaps in front & end of the yellow bar */
}     
/* the text Buttons (buttons which have text) */
#mail-notification-top  .notification-button  {
     color:            gray         !important;
     background-color: aliceblue     !important;
}
/* the close button - Again not sure if this affects any other "Close" buttons. */
 button {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
    &[size="small"] {
      transform: scale(0.9, 0.9) !important;
      color:            gray          !important;
      background-color: aliceblue     !important;   
    }
  }
}
/* buttons hover */
#mail-notification-top  .notification-button:hover  {
     color:            white        !important;        
     background-color: skyblue      !important;
}
 button {
  &[type~="icon"]:not(.labelled), &:not(.labelled):has(img) {
    &[size="small"]:hover {
      color:            white   !important;   
      background-color: skyblue !important;   
    }
  }
}

Hopefully it helps somewhat.

LnzMrt · Jan 28, 2025

@das10
Thank you for your code. Your suggestions really look promising and I think will solve that "punch-in-your-eye" yellow!
All the best

LnzMrt · Jan 28, 2025

@das10 Perfect!
I stuck a

Code:

font-stretch: condensed                   ! important;

in there for good measure, but I am not sure whether it does anything or not

das10 · Jan 28, 2025

Apparently, the default font used there does not appear to react to font stretch. But if eg. you use the arial font there, it does do so.
eg. if say you use:

Code:

/* the main info bar (yellow)  - also see next section */
#mail-notification-top .infobar {
     --message-bar-text-color:       grey    !important;  /* changes color of warning icon + the main text */
     --message-bar-background-color: #ccddee !important;
     font-family:                    arial   !important;
     font-style:                     italic  !important; /* if req'd */
     font-size:                      100%    !important; /* can use nn% or nnpx for font-size */
     font-stretch:                   condensed !important;
     transform: scale(100%, 80%)               !important;
}

Otherwise you can always set the font-size to whatever you want by changing the 100% value, or replacing it with an explicit value.

( If the font you are using does not offer condensed or expanded faces, this property has no effect. )
ref: font-stretch - CSS: Cascading Style Sheets | MDN

RobDF · Jan 30, 2025

Good morning @das10 ,

Do you remember whem I posted the fact that after so many changes on the userChrome.css, probably as a result, the drop-down menus remains open until Esc is pressed?

Well, I has happened again.

Do you thin, as a good exercise for everybody

, that I post my concuction and we have a look at it together?

Thanks

das10 · Jan 30, 2025

I don't think making multiple changes to userChrome.css would cause the issue you mentioned (I make lots of changes to it for testing, and it has never happened to me). The userChrome.css file cannot make any permanent changes to Thunderbird. It only gets loaded when you start Thunderbird - and besides, you can easily rule it out by either deleting/moving that file, or disabling Thunderbird from loading it at all by toggling "toolkit.legacyUserProfileCustomizations.stylesheets" to false in Advanced preferences.

The only setting that I know of which can make dropdown menus not collapse automatically, is the purposeful one in the DevTools Customization dropdown. And, you can easily reset that by unticking it.

Still, you can repost the issue (with full details of the particular PC it is happening in), in case anybody else has seen such behaviour (I doubt it, but you never know), or if not, then report it as a bug if it still happens on the latest version of Tbird.

Log in to Bugzilla

bugzilla.mozilla.org

RobDF · Jan 30, 2025

das10 said:
I don't think making multiple changes to userChrome.css would cause the issue you mentioned (I make lots of changes to it for testing, and it has never happened to me). The userChrome.css file cannot make any permanent changes to Thunderbird. It only gets loaded when you start Thunderbird - and besides, you can easily rule it out by either deleting/moving that file, or disabling Thunderbird from loading it at all by toggling "toolkit.legacyUserProfileCustomizations.stylesheets" to false in Advanced preferences.

The only setting that I know of which can make dropdown menus not collapse automatically, is the purposeful one in the DevTools Customization dropdown. And, you can easily reset that by unticking it.
View attachment 123740

Still, you can repost the issue (with full details of the particular PC it is happening in), in case anybody else has seen such behaviour (I doubt it, but you never know), or if not, then report it as a bug if it still happens on the latest version of Tbird.

Log in to Bugzilla

bugzilla.mozilla.org

Oh yes you are absolutely right. In fact yesterday I was reading through all the posts and saw the instructions you gave to another member and I checked the same setting in Dev Tools. Tomorrow I will try and revert back to you.

As usual my dear @das10, thank you very much.

P.S. one of these days we shall play on the customization of the address book.

Thunderbird 115: CSS Customization

Active member

My Computer

Well-known member

My Computer

Active member

My Computer

Member

My Computer

Member

My Computer

Member

My Computer

Active member

My Computer

Well-known member

My Computers

New member

My Computer

Well-known member

My Computers

New member

Attachments

My Computer

Well-known member

My Computers

Well-known member

My Computer

New member

My Computer

New member

My Computer

Well-known member

My Computer

Active member

My Computer

Well-known member

My Computer

Active member

My Computer

Similar threads