Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

[CSS] Formating TB layout - new mail, scrollbar and others

  • 5 iimpendulo
  • 1 inayo le ngxaki
  • 1 view
  • Impendulo yokugqibela ngu DonAndress

more options

Hello.

So I'm playing with CSS to modify TB layout, I'm making it dark to be exact. It's going good, I managed to change colors of most of the layout but there are still some questions I can't find answers to.

1. It is possible to add background to text for a new mail in the list of emails pane using:

   #threadTree > treechildren::-moz-tree-cell(new) {
   background-color: rgba(160, 0 , 0, 0.4) !important;
   }

Now, my question is, can I add the same but only for the Topic cell of new email?

2. I am having trouble changing colors of the scrollbars of the list of emails pane and the reading pane. Could you please help with that?

3. When you open TB and don't open any email, there is this "splash screen" with an information from TB (welcome to TB and so on). How do I turn it off and change the background color of this pane to black for example?

4. For the new message window as in the image attached: a) for no.1 - it's not visible because I grabbed a snapshot while this window was inactive but actually text color is black (default). So how do I change font color of the menu buttons?

b) for no.2 - as you can see I changed Sender font color but I can't change the rest (To, Copy etc) and it's default (black). How to change that?

c) for no.3 - how do I change font color of email addresses and topic independantly?

Hello. So I'm playing with CSS to modify TB layout, I'm making it dark to be exact. It's going good, I managed to change colors of most of the layout but there are still some questions I can't find answers to. 1. It is possible to add background to text for a new mail in the list of emails pane using: #threadTree > treechildren::-moz-tree-cell(new) { background-color: rgba(160, 0 , 0, 0.4) !important; } Now, my question is, can I add the same but only for the Topic cell of new email? 2. I am having trouble changing colors of the scrollbars of the list of emails pane and the reading pane. Could you please help with that? 3. When you open TB and don't open any email, there is this "splash screen" with an information from TB (welcome to TB and so on). How do I turn it off and change the background color of this pane to black for example? 4. For the new message window as in the image attached: a) for no.1 - it's not visible because I grabbed a snapshot while this window was inactive but actually text color is black (default). So how do I change font color of the menu buttons? b) for no.2 - as you can see I changed Sender font color but I can't change the rest (To, Copy etc) and it's default (black). How to change that? c) for no.3 - how do I change font color of email addresses and topic independantly?
Iqhotyoshelwe imifanekiso ekwisikrini

All Replies (5)

more options

There is ak theme built into Thunderbird 60. is it not suitable?

more options

Matt said

There is dark theme built into Thunderbird 60. is it not suitable?
more options

Matt said

There is ak theme built into Thunderbird 60. is it not suitable?

Well, I'm trying to learn and in order to learn I should not use themes as I can't really analyze them. And believe me, I tried to find suitable selector, it's just that no selector visible under the ctrl+shift+i is a proper one to change what I need.

more options

DonAndress said

Matt said
There is ak theme built into Thunderbird 60. is it not suitable?

Well, I'm trying to learn and in order to learn I should not use themes as I can't really analyze them.

Of course you can, they are XPI files and XPI files are just zip files with a modified extension. By reading them you get to see exactly what things are being used, in an environment where they work.

And believe me, I tried to find suitable selector, it's just that no selector visible under the ctrl+shift+i is a proper one to change what I need.

A starting point is https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/Styling_a_Tree but basically you need to use JavaScript to interrogate the actual values. as specified in the link

getRowProperties : function(row){ return }

getColumnProperties : function(column,columnElement){ return }

getCellProperties : function(row,column){ return }
more options

JavaScript, you say? That's a bit more complexed, I guess... But thanks for the link, I'll give it a shot.