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

Changing font size of Message List: userChrome.css no longer working (OSX)?

  • 9 replies
  • 0 have this problem
  • 68 views
  • Last reply by Phil Emery

more options

I need to style the message list, and I have googled /chaptGPT'd a lot.

I've set the toolkit.legacyUserProfileCustomizations.stylesheets flag to true in the config panel.

Created a "chrome" folder in the profile folder as indicated by "Help/Troubleshooting Information" and added a userChrome.css file in the folder. Even added a "profile" folder within that and copied the folder and file to there.

Added some CSS to the file

  1. threadTree > treechildren {
 font-size: 12pt !important;
 color: red !important;

}

treechildren::-moz-tree-cell-text(unread) {

  font-style: italic !important;
  font-weight: bold !important;
    background-color: #ffffff !important;

}

Restarted and nothing is changing.

How can I change the font size in the message list and the folder list? No issues with CSS styling.

I need to style the message list, and I have googled /chaptGPT'd a lot. I've set the toolkit.legacyUserProfileCustomizations.stylesheets flag to true in the config panel. Created a "chrome" folder in the profile folder as indicated by "Help/Troubleshooting Information" and added a userChrome.css file in the folder. Even added a "profile" folder within that and copied the folder and file to there. Added some CSS to the file #threadTree > treechildren { font-size: 12pt !important; color: red !important; } treechildren::-moz-tree-cell-text(unread) { font-style: italic !important; font-weight: bold !important; background-color: #ffffff !important; } Restarted and nothing is changing. How can I change the font size in the message list and the folder list? No issues with CSS styling.

Modified by Phil Emery

Chosen solution

I found a solution. The css framework has changed. This got the needed changes.

 tr[is="thread-row"] td {
    border-top: 1px solid #efefef !important;
    border-bottom: 1px solid #efefef !important;
    }
 tr[is="thread-row"][data-properties~="new"],
 tr[is="thread-row"][data-properties~="unread"],
 tr[is="thread-row"][data-properties~="read"],
 tr[is="thread-row"][data-properties~="untagged"],
 tr[is="thread-row"][data-properties~="offline"],
 tr[is="thread-row"][data-properties~="notjunk"]      
  {
     font-size: 15px !important;
     font-family: "Helvetica Neue Regular" !important;

}

  tr[is="thread-row"][data-properties~="new"] {
     color: #444444 !important;
     font-weight: bold;
  }
  tr[is="thread-row"][data-properties~="unread"] {
     font-weight: bold !important;
  }
Read this answer in context 👍 0

All Replies (9)

more options

The simplest way is to use the FontSize variable. Click hamburger menu in upper right and it should appear. Or, if you use menu bar, then View>fontsize

more options

Thanks, but that really doesn't do what I need.

Not sure why the CSS thing isnt' working. Unless there is someway to handle that via config panel.

more options

Chosen Solution

I found a solution. The css framework has changed. This got the needed changes.

 tr[is="thread-row"] td {
    border-top: 1px solid #efefef !important;
    border-bottom: 1px solid #efefef !important;
    }
 tr[is="thread-row"][data-properties~="new"],
 tr[is="thread-row"][data-properties~="unread"],
 tr[is="thread-row"][data-properties~="read"],
 tr[is="thread-row"][data-properties~="untagged"],
 tr[is="thread-row"][data-properties~="offline"],
 tr[is="thread-row"][data-properties~="notjunk"]      
  {
     font-size: 15px !important;
     font-family: "Helvetica Neue Regular" !important;

}

  tr[is="thread-row"][data-properties~="new"] {
     color: #444444 !important;
     font-weight: bold;
  }
  tr[is="thread-row"][data-properties~="unread"] {
     font-weight: bold !important;
  }
more options

Thanks for sharing that. 115 caused much older CSS to no longer work and people on the forum are discovering new solutions. Yours is a keeper. :)

more options

Yep, using the Dev Tools menu, clicking on the arrow thingy, then clicking on what you want to style will show you what the CSS selectors are, which is actually quite nice.

more options

I will confess that I have never fully understood how to do that. Would you mind sharing the basic steps to get someone started in doing this? That would be priceless.

more options

OK.

1. You'll need to know how to read HTML and CSS. Or you might be able to figure that out by looking at the following.

2. In TB, show your inbox and go to Tools/Developer Tools/Developer Toolbox

A window opens. There might be something about an incoming connection; click ok.

3. Click on the arrow thing in the top left corner of the Developer Toolbox.

Hover your mouse over what thing you want to style. It can be a bit slow and wonky, but you'll get to what you want after a bit. You'll need to click on the thing you want to style.

What styles the thing you selected will be shown on the right-hand column of the developer tools (the tab will be called "Rules". You can then figure out the structure from the left-hand column to find the selectors that need to be called in your CSS code. It can be fidgety and you need to make sure your CSS is properly formatted with ";" at the end of lines and proper open and close brackets, but if you know how to do that - you good!

more options

A big THANKS to you. This is a good foundation for me to start exploring. Much appreciated. :)

more options

For those interested the attached is the result of the above code: