본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

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

  • 9 답장
  • 0 이 문제를 만남
  • 1 보기
  • 최종 답변자: 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.

글쓴이 Phil Emery 수정일시

선택된 해결법

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;
  }
문맥에 따라 이 답변을 읽어주세요 👍 0

모든 댓글 (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

선택된 해결법

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: