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

Thunderbird 128.x Breaks My UserChrome.css Tweaks for Message List and Folder List

  • 5 amsoshi
  • 1 yana da wannan matsala
  • Amsa ta ƙarshe daga Toad-Hall

more options

Is there some way that I can nullify the format changes in the v128.x message list, compared to v115.x, so that my UserChrome.css tweaks that are functioning well in v115.x are not broken? Perhaps there are some new Config flags that might be set? I hate to have to redo a bunch of carefully calibrated work.

Sample of v115.15.0 message list included; I uninstalled v128, so I can't easily show a sample of that.

Is there some way that I can nullify the format changes in the v128.x message list, compared to v115.x, so that my UserChrome.css tweaks that are functioning well in v115.x are not broken? Perhaps there are some new Config flags that might be set? I hate to have to redo a bunch of carefully calibrated work. Sample of v115.15.0 message list included; I uninstalled v128, so I can't easily show a sample of that.
Hoton allon fuska da aka liƙa

All Replies (5)

more options

As you are probably aware - the 'Cards View' is new and constantly under development. So it's inevitable that alterations/modifications to code will occur.

The image shows you are currently using the 'Card View' in version 115.15.0

It would be helpful if you could post the content of your 'userChrome.css' file, so I can copy what you are currently using. Then it's possible to replicate your current state.

If you choose to use 128*: 'Tools' > 'Developer Tools' > 'Developer Toolbox' Alllow connection This can be used to identify the areas which you want to tweak. It can be used to help you modify the 'userChrome.css'.

Helpful?

more options

Here is some card css for 128 that you can modify to your liking:

/* bold sender in cards view */
.sender {
        font-weight: bold !important;
	color: blue !important;
	font-size: 14px !important;
        }

/* indent card subject */
.thread-card-subject-container :is(.subject){
	margin-left: 10px !important;
	font-size: 13px !important;
	color: darkred !important;
}

/* card date */
.date{
	font-size: 12px !important;
	color: darkred !important;
}


/* unread card sender */
tr[is="thread-card"][data-properties~="unread"] :is(.sender) {
      color: black !important;
      font-weight: bold !important;
      font-size: 14px !important;
   }


https://support.mozilla.org/en-US/questions/1447610

Helpful?

more options

@Toad-Hall, thanks for your reply.

I'm not seeing a way to attach a css (or text) file, only images. So I'm pasting in the sections of CSS from my userChrome.css, pertaining to the Folder pane and the Threads pane:

UPDATE: Looking at the output, I see that this website interpreted id elements preceded by a hash sign which are at the start of a line, and rendered them as numbered lists, placing a number, a period, and a space at the start of the line in place of the hash sign.

/*------------------------------------

           Folder Pane
------------------------------------*/
  1. folderPane li:not(.children), #folderPane li + li.children,
  2. folderPane li.children > .container + ul[role="group"] > li.children {
 margin-top: -0.7em !important;

}

  1. folderPane .mode-container + ul[role="group"] > li.children {
 margin-top: -0.6em !important;

}

  1. folderPane li.unread.selected[is="folder-tree-row"][aria-selected="true"] .folder-count-badge.unread-count { color: white !important; }

/*------------------------------------

           Thread Pane
------------------------------------*/

.tabmail-tab[linkedpanel="mail3PaneTab1"] .tab-background {background-color: rgba(250,229,179,0.5) !important;}

.tabmail-tab[linkedpanel="mail3PaneTab1"] {

 color: black !important;
 font-weight: bold !important;

}

.tabmail-tab[visuallyselected="true"] {text-decoration: underline !important;}

.thread-card-container {

 padding-top: 1px !important;
 padding-bottom: 1px !important;

}

table[is="tree-view-table"] { }

table[is="tree-view-table"] .sender {

 font-style: italic !important;
 font-weight: 500;
 color: rgb(96,0,96) !important;
 font-size: 108% !important;
 display: inline-block !important;
 margin: 3px 0 -1px 0 !important;

}

 table[is="tree-view-table"] [data-properties~="unread"] .thread-card-container .sender, 
 table[is="tree-view-table"] [data-properties~="new"] .thread-card-container .sender {
   font-weight: 900 !important;
 }

tr[is="thread-card"].selected .sender {

 color: #fdf !important;

}

.thread-card-subject-container {

 margin-inline-start: 24px !important;

}

.thread-card-subject-container .subject {

 font-size: 1.25rem !important;
 font-weight: 600 !important;
 padding-bottom: 2px !important;
 }
  1. threadTree [data-properties~="unread"] .thread-card-container .subject,
  2. threadTree [data-properties~="new"] .thread-card-container .subject {
 font-style: italic !important;
 font-weight: 800 !important;
 color: inherit !important;

}

  1. threadTree [data-properties~="new"] .thread-card-container .subject {
 background-color: rgba(19, 115, 217, 0.1) !important;
 border-top: 1px solid rgba(19, 115, 217, 0.3) !important;
 border-left: 1px solid rgba(19, 115, 217, 0.3) !important;
 margin-top: -1px !important;
 padding-left: 2px !important;
 border-bottom-right-radius: 7px !important;

}

tr[data-properties~="Tm"] {

 --tag-color: #331133 !important;
 color: #331133 !important;

} tr[data-properties~="Tg"] {

 --tag-color: #072207 !important;
 color: #072207 !important;

}

tr[is="thread-card"]:nth-child(6n+1) .thread-card-container {

 border-top: 4px solid #888 !important;
 border-top-left-radius: 14px !important;

}

tr[data-properties~="unread"] .thread-card-container::after {

 position:absolute !important;
 content: url("chrome://messenger/skin/icons/new/compact/unread.svg") !important;
 color: #4F6 !important;
 inset-inline-start: 12px !important;
 inset-block-start: 8px !important;

}

tr[is="thread-card"]:first-child .thread-card-container {

 border-top: initial !important;

}

 tr:nth-child(6n+1)[data-properties~="unread"] .thread-card-container::after {
   inset-block-start: 10px !important;
 }
   tr:first-child[data-properties~="unread"] .thread-card-container::after {
     inset-block-start: 8px !important;
   }

.thread-card-row > img.state {

 transform: scale(1.25) !important;

}

table[is="tree-view-table"] td div:not(.recipient-avatar) {

 overflow: visible !important;

}

tr.children[is="thread-card"]:not([data-properties="dummy"]) > td, tr.collapsed[is="thread-card"]:not([data-properties="dummy"]) > td {

 padding-left: 27px !important;

}

tbody:has(> tr[data-properties="dummy"]) tr.children[is="thread-card"]:not([data-properties="dummy"]) > td, tbody:has(> tr[data-properties="dummy"]) tr.collapsed[is="thread-card"]:not([data-properties="dummy"]) > td {

 padding-left: 0 !important;

}

tr[is="thread-card"][data-properties="dummy"] > td {

 left: -26px !important;

}

  1. threadTree tr[data-properties~="junk"] .subject, #threadTree tr[data-properties~="junk"][data-properties~="unread"] .subject {
 color: #e27f2e !important;

}

  1. threadTree [data-properties~="new"] .thread-card-container :is(.subject, .date) {
 /* font-weight: 600 !important; */

}

  1. threadTree tbody [data-properties~="imapdeleted"] :is(td) .subject {
 text-decoration: none !important;

}

tr[is="thread-card"][data-properties~="flagged"] {

 background-color: rgb(250,229,179) !important;

}

 tr[is="thread-card"][data-properties~="flagged"] + tr[is="thread-card"][data-properties~="flagged"] {
   box-shadow: 0 2px 0 rgb(174,137,110) inset !important;
 }

tr.selected[is="thread-card"][data-properties~="flagged"] :is(.subject, .date) {

 color:inherit !important;

}

tr[is="thread-card"][data-properties~="flagged"]:hover {

 background-color: var(--listbox-selected-bg) !important;

}

 [is="tree-view-table-body"]:focus > .selected[data-properties~="flagged"] {
   background-color: rgb(174,137,110) !important;
 }
 [is="tree-view-table-body"] > .hover[data-properties~="flagged"] {
   background-color: rgba(174,137,110,0.1) !important;
 }

tr[data-properties~="Txnote"] .subject, .thread-card-subject-container:has(> .tag-icon[title~="XNote"]) > .subject, [aria-label~="XNote"] .subject {

 background-color: #FFCC00 !important;
 color: inherit !important;
 padding-left: 3px !important;

}

  1. threadCols[wlapi_autoinjected="AddOnNS43"] {
 display: none;

}

  1. threadPaneHeaderBar > .list-header-bar-container-start {
 margin-left: 7px;

}

.unified-toolbar {

 position:relative;
 left: 14px;
 top: 3px;

}

.unified-toolbar .search-bar {

 max-width: 300px !important;
 position: relative;
 top: 7px;

}

.live-content{

 position: relative;
 opacity: 1 !important;

}

.live-content .button:hover {

 transform-origin: 0 center;
 transform: scale(1.35);
 position: relative;
 z-index:100000;
 background-color: rgb(228, 228, 231) !important;

}

.live-content .button-label {

 font-weight: bold !important;
 font-stretch: 50% !important;
 font-size: 14.5px !important;

}

.live-content .button-label[data-l10n-id="toolbar-write-message-label"]{

 visibility: hidden;
 font-size: 0.0001px;
 margin-right: -2.5em;

}

 .live-content .button-label[data-l10n-id="toolbar-write-message-label"]:before {
   visibility: visible;
   display: inline-block;
   font-size: 14px !important;
   content: "New Message";
 }
 .live-content .button-label[data-l10n-id="toolbar-write-message-label"] {
   min-width:7.5em;
 }

.unified-toolbar > li {

 display: inline-block !important;
 margin-top: -4px !important;
 margin-right: -16px !important;
 aria-pressed: false !important;

}

 .unified-toolbar > li.search-bar {margin-right: 0 !important;}
 .unified-toolbar > li.spacer {
   display: block !important;
   max-width: 50px;
 }

.extension-action .prefer-icon-only .button-label {

 display: block !important;

}

.button.check-button[aria-pressed="true"]::before {

 background-color: rgb(175,0,175) !important;
 border-color: rgb(96,0,96) !important;

}

.tabmail-tab[visuallyselected="true"] {

 font-weight: bold !important;
 overflow-y: visible !important;

}

.tab-line[selected="true"] {

 background-color: var(--toolbar-color) !important;
 position: relative;
 top: -6px;

}

An gyara daga Rick Gordon

Helpful?

more options

Of course, the above CSS is configured based on the assumption of a few other preferences set within the interface, such as UI density, the font face and size settings, etc.

Helpful?

more options

Here is some code that should get you on the right track.

/* bold sender in cards view */
.sender {
	font-style: italic !important;
 	font-weight: 500;
	 color: rgb(96,0,96) !important;
	 font-size: 108% !important;
 	display: inline-block !important;
 	margin: 3px 0 -1px 0 !important;
}

/*indent entire section leaving space on far left */
.card-container {
	 margin-inline-start: 24px !important;
}


/* indent card subject */
.thread-card-subject-container :is(.subject){
	font-size: 1.25rem !important;
	font-weight: 600 !important;
 	padding-bottom: 2px !important;
}

tr[is="thread-card"][data-properties~="new"] :is(.subject) {
	background-color: rgba(19, 115, 217, 0.1) !important;
 	border-top: 1px solid rgba(19, 115, 217, 0.3) !important;
 	border-left: 1px solid rgba(19, 115, 217, 0.3) !important;
 	margin-top: -1px !important;
 	padding-left: 2px !important;
 	border-bottom-right-radius: 7px !important;
}

/* unread card sender */
tr[is="thread-card"][data-properties~="unread"] :is(.sender),
tr[is="thread-card"][data-properties~="new"] :is(.sender) {
     font-weight: 900 !important;
   }

/* line to denote section x number of emails */
tr[is="thread-card"]:nth-child(6n+1) .card-container {
 border-top: 4px solid #888 !important;
 border-top-left-radius: 14px !important;
}

Helpful?

Yi tambaya

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.