Thunderbird 115: CSS Customization

click click · Dec 28, 2023

I am trying to get rid of the wasted space as seen in the attached toolbars. Is there a css change that can reduce the border space so it looks like the other toolbars from ESR 102?

Wisewiz · Dec 28, 2023

Yes. Reduce the sizes of the padding. I have no wasted space, top or bottom.

I'm using, e.g.,

CSS:

toolbar#toolbar-menubar {
  Order:            -1 !important;
  background-color: #336699 !important;  /* Color of menu bar */
  color:            white   !important;  /* Color of the text - if needed */
  height:           24px    !important;
  padding-top:      0px     !important;
  padding-bottom:   0px     !important;
  margin:           0px     !important;
}

AND

CSS:

#unifiedToolbar {
  height:  24px  !important;
  padding-block:   1px  !important;
  margin-block:    0px  !important;
  background:  #29116e  !important;
  color: white  !important;
}

click click · Dec 28, 2023

Okay, all the wasted space belonged to the unified toolbar. Above and below. The menu bar was not wasting any space as I previously had thought.

Wisewiz · Dec 28, 2023

So, you got it?

click click · Dec 30, 2023

yes, only added
height: 24px !important;
margin-block: 0px !important;

Wisewiz · Dec 30, 2023

RobDF · Apr 2, 2024

Helo @das10. I wanted to apology for the fact that I did not reply to your valuable solution. The fact is that I did not see the post and in the meanwhile I managed to sort of doing it partially myself. When yesterday I downloaded the 105.0.9 and my css was not working I came here and found the script that looked like mine or at least wih the scheme I planned myself for years. I even thought it was looking like the one I use.
Here in Africa we do not find a lot of help on these things and sometime on the forums the guys discussing on a subject they divagate and discuss of anything but what is important.
Thanks a lot for your big effort and from my scarce css coding I will try to contribute when possible to these post.
I need to find out why I have not been notified of the reply from your side.
Following you and @Wisewiz alot. Grazie.

das10 · Apr 2, 2024

@RobDF ; I am sorry you had not received any notification / alert for the reply I had posted. I shall leave it to @Wisewiz to show you detailed instructions on how to keep up with the threads / messages you wish to follow (he has more experience in providing detailed instructions on those matters than myself).

Wisewiz · Apr 2, 2024

@RobDF Please let me know if you receive an email notice from the forum that says you were mentioned in a post.
@das10 Good morning/afternoon! I think maybe the reason Rob didn't get a message is simply that you didn't "mention" him in your answer. We'll see. If he gets a notice about this post, he's fine. If not, maybe he'll come back and I'll have a chance to check his settings with him. Thanks,

Dan

RobDF · Apr 2, 2024

Thanks. To @Wisewiz and @das10. I am enjoying addng here and there and I made a nice "concoction". As soon as I finish it I will post ot for your kind evaluation. I jsut have to finish the compose email part.

And not I have not received even this last email from @des10

All hte best and thanks again

Wisewiz · Apr 2, 2024

@RobDF

When you come back, please tell me where you are in Africa. I am curious because I lived and worked in Sierra Leone for two years (but a long time ago).

RobDF · Apr 2, 2024

Hello again @Wisewiz. I work and live in Zambia. Travelling sometime between Tanzania, Keny DRC Congo and South Africa.
I have never been in Sierra Leone but I beleive it is beautiful. As for riots I had my dosage "part" when we were in Zaire (DRC Congo) during Mobutu destabilization. I was there ......

. A friend of mine wants to open a KyteSurf school in Sierra Leone and asled me for help but I did not know anybody over there.

I have not been back to Europe for sometime but I will explain another time.
Nice to be here anyway. It is a hell of a nice forum.

Wisewiz · Apr 2, 2024

@RobDF

Thanks for the interesting answers. Hope you are comfortable in Zambia.

RobDF · Apr 3, 2024

@Wisewiz

Thanks for your kind concern. I am indeed.

Cheers

RobDF · Apr 5, 2024

Afternoon everybody,

I have ttried all the sequences written here and combined with mine corrected by the good @das10. I would like to separate the Menu Bar Fro the Composition toolbar in the compose section where I sed the emails.

The code gently proposed for testing by @Wisewiz slightly modified on colors:

[/CODE]
background-color: #99b3ff !important;
height: normal !important;
}

/* address destinee */
#compose-toolbox > menubar menu {
color: white !important;
}

/* Top Menu colors and backgrounds */
#compose-toolbox menubar menu:hover {
background-color: #0040ff !important;
color: #FFFF00 !important;
}

/* Format toolbar */
#FormatToolbox,
#FormatToolbar > menulist {
background-color: #29116e !important;
color: white !important;
}

das10 · Apr 5, 2024

RobDF - Do you mean to add extra margin below the menubar in the Compose Window as shown below?

Then, you could try adding this, to see if it works for you:

Code:

/* add margin to bottom of the menubar in the Compose window */
#compose-toolbox menubar {
  margin-bottom: 20px ;
}

Or: If you meant "separate" as in separating the backgrounds of the Menu Bar & Composition Toolbar like this:

Then you could try:

Code:

/* the menubar color in the Compose window */
#compose-toolbox > #compose-toolbar-menubar2 {
  background-color: #336699 !important;  /* Color of menu bar             */
  color:            white   !important;  /* Color of the text - if needed */
  height:           24px    !important;  /* if needed                     */
}
/* adjust text color for menubar text which is disabled */
#compose-toolbox > #compose-toolbar-menubar2  menu[disabled="true"]{
  color:            lightgrey     !important;  /* Color of the text - if needed */
}
/* the menubar color in the Compose window - the hover effect*/
#compose-toolbox > #compose-toolbar-menubar2 menu:hover {
  background:      lightgrey  !important; 
  color:           #29116e    !important;
}

/* the universal toolbar in the Compose window */
#compose-toolbox > #composeToolbar2 {
  background-color: #29116e !important;
  color:            white   !important;
}
/* the universal toolbar in the Compose window - the hover effect */
#compose-toolbox > #composeToolbar2 toolbarbutton:hover {
  background:      white   !important;   /* color of background */
  color:           #29116e !important;   /* color of text/icons */
}

pn: By the way, your own image shows the Compose window without the System toolbar (ie. where on my image it says "Write: test only - Thunderbird" right at the top) ; how did you get it to not show in the Compose window. If I hide that system window titlebar in the Settings, it still shows in the Compose window. (I am just curious - I don't wish to hide it anywhere).

RobDF · Apr 8, 2024

Hello @das10 and thank you very much for your excellent or I may say your two excellent replies.
Yes I meant the separation in formatting of the Menu Bar & the Composition Toolbar as per your second reply. But I will try to add a hovering different color for the Compsition Toolbar.

As for the System Bar I have not done anything. I have just used the snipping tool and cut directly from the MenuBar and below. I guess, as it says on the description, that the System Bar depends on the system colors and since I put Forest as a relaxing theme the green was not looking good. Your cyan looks much better. But I guess again you have used another theme. I am still working on my "concoction" and as soon as it is finished I will make it available here for suggestions and evaluations. It is sort of fun and very relaxing.

Last nut not least I tried to use the CODE insert to send my small code with the reply but it did not displayed as yours. I guess I will again and see where I am wrong.

Cheers and thank you for the small award.

das10 · Apr 8, 2024

To insert code, you can click on the </> icon in the reply box. In the insert code box which appears, select either General Code, or Other Languages (CSS), and enter your code in that box.

RobDF · Apr 8, 2024

Hi I did that but my email was showing the code in the text box and not as I read yours.

RobDF · Apr 8, 2024

@das10
Ok never mind I pressed preview again (as I was doing on Friday before sending the message with the question) and now it seems to work.
Thanks for the clarification.