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.

Thunderbird 115: CSS Customization

Well-known member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Well-known member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Well-known member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Active member

My Computer My Computer

At a glance

Well-known member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Active member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Active member

My Computer My Computer

At a glance

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

My Computers My Computers

At a glance

At a glance

Active member

My Computer My Computer

At a glance

Active member

My Computer My Computer

At a glance

Well-known member

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

My Computer My Computer

At a glance

Active member

My Computer My Computer

At a glance

Well-known member

My Computer My Computer

At a glance

Active member

My Computer My Computer

At a glance

Active member

My Computer My Computer

At a glance

Similar threads

My Computer

My Computers

My Computer

My Computers

My Computer

My Computers

My Computer

My Computer

My Computers

My Computer

My Computers

My Computer

My Computers

My Computer

My Computer

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

My Computer

My Computer

My Computer

My Computer

My Computer