Thunderbird 128.x Breaks My UserChrome.css Tweaks for Message List and Folder List
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.
All Replies (5)
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'.
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;
}
@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 ------------------------------------*/
- folderPane li:not(.children), #folderPane li + li.children,
- folderPane li.children > .container + ul[role="group"] > li.children {
margin-top: -0.7em !important;
}
- folderPane .mode-container + ul[role="group"] > li.children {
margin-top: -0.6em !important;
}
- 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; }
- threadTree [data-properties~="unread"] .thread-card-container .subject,
- threadTree [data-properties~="new"] .thread-card-container .subject {
font-style: italic !important; font-weight: 800 !important; color: inherit !important;
}
- 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;
}
- threadTree tr[data-properties~="junk"] .subject, #threadTree tr[data-properties~="junk"][data-properties~="unread"] .subject {
color: #e27f2e !important;
}
- threadTree [data-properties~="new"] .thread-card-container :is(.subject, .date) {
/* font-weight: 600 !important; */
}
- 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;
}
- threadCols[wlapi_autoinjected="AddOnNS43"] {
display: none;
}
- 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;
}
Modified by Rick Gordon
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.
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;
}
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.