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 selected folder styling?

more options

I'm looking for the DOM for the currently selected folder. I'd like to alter the style of the border and remove the annoying vertical bar on the left. If anyone can provide the CSS selectors I'd be grateful.

Also, if someone can point me in the direction of how to find this information for myself, that would also be cool.

Thanks in advance!

I'm looking for the DOM for the currently selected folder. I'd like to alter the style of the border and remove the annoying vertical bar on the left. If anyone can provide the CSS selectors I'd be grateful. Also, if someone can point me in the direction of how to find this information for myself, that would also be cool. Thanks in advance!

All Replies (4)

more options

https://support.mozilla.org/en-US/kb/userchromecss-js-usercontent-unsupported

To compound that I really have no idea what " I'd like to alter the style of the border and remove the annoying vertical bar on the left" means. Do you mean the one that delineates the change from the folder pane to the "list view" pane or is this something about the silly boxes mail is displayed in in the "card view"

You might want to have a look at the developer toolbox (Ctrl+Shift+I) in the inspector

Helpful?

more options

I am referring to the folder tree. I would like to change the style on the selected / focused folder. Specifically, I'm looking to change the border and remove the goofy block/bar on the left.

I have attached a screenshot which may help.

Helpful?

more options

It's possible to colour the border for selected and hovered folders, but I haven't figured out how to modify the bar at the left of selected folders.

/* folder hover border bg color */
li[is="folder-tree-row"] :hover > div.container  {
background-color: lightblue !important;
border-color: red !important;
}

/* folder selected border bg color */
li[is="folder-tree-row"] .selected > div.container  {
background-color: DeepSkyBlue !important;
border-color: red !important;
}


To hide the border:

/* hide folder border */
li[is="folder-tree-row"] > div.container  {
border: none !important;
}

Helpful?

more options

sfhowes said

It's possible to colour the border for selected and hovered folders, but I haven't figured out how to modify the bar at the left of selected folders.
/* folder hover border bg color */
li[is="folder-tree-row"] :hover > div.container  {
background-color: lightblue !important;
border-color: red !important;
}

/* folder selected border bg color */
li[is="folder-tree-row"] .selected > div.container  {
background-color: DeepSkyBlue !important;
border-color: red !important;
}


To hide the border:

/* hide folder border */
li[is="folder-tree-row"] > div.container  {
border: none !important;
}

Thanks! That did the trick.

I used this to remove that silly block to the left of the selected folder:

/* hide idiotic folder highlight thingy*/
li[is="folder-tree-row"] > div.container::before  {
display: none !important;
}

Modified by David Crowder

Helpful?

Ask a question

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