Changing font size of Message List: userChrome.css no longer working (OSX)?
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.
Okulungisiwe ngu Phil Emery
Isisombululo esikhethiwe
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;
}
Funda le mpendulo ngokuhambisana nalesi sihloko
👍 0
All Replies (9)
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
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.
Isisombululo Esikhethiwe
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;
}
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. :)
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.
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.
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!
A big THANKS to you. This is a good foundation for me to start exploring. Much appreciated. :)
For those interested the attached is the result of the above code:
