MozillaZine

[Solved] Change Scrollbars Background Color When Dragged

User Help for Mozilla Thunderbird
ThunderStruck
 
Posts: 24
Joined: April 1st, 2019, 10:52 pm

Post Posted April 2nd, 2019, 10:42 pm

In Thunderbird 60+, when I click and drag the scrollbar in either the folderTree or threadTree area, the scrollbar color doesn't turn dark gray like the natural OS handling of windows with scrollbars. What syntax do I add in "userChrome.css" to change the color of the scrollbar when it's in the clicked and being dragged state?

Here's the defaults, but it doesn't address the clicked and draggable state:
--scrollbar-thumb-color: <color here>;
--scrollbar-thumb-hover-color: <color here>;
Last edited by ThunderStruck on April 10th, 2019, 10:53 pm, edited 1 time in total.

morat
 
Posts: 3370
Joined: February 3rd, 2009, 6:29 pm

Post Posted April 7th, 2019, 8:34 am

Are you saying the scrollbar changes to the wrong color when you click the scrollbar? When I click the scrollbar the color doesn't change at all in Firefox or Thunderbird, like it does in Chrome and Internet Explorer.

I think the scrollbar stuff uses AGENT_SHEET styles. The userChrome.css file only supports USER_SHEET styles.

More info: viewtopic.php?f=39&t=3041173

ThunderStruck
 
Posts: 24
Joined: April 1st, 2019, 10:52 pm

Post Posted April 7th, 2019, 2:32 pm

My default scrollbar is a light gray (however this color can be changed in the userChrome.css). When I hover over, it turns dark gray (this color can also be changed in userChrome). When I click it and drag it goes back to light gray (i can't figure out how to target that particular state to make it dark gray—only when I click and drag the scrollbar). I wish to replicate how the natural OS works. Is there a syntax I need to use to target the click and drag state?

Everywhere else in Thunderbird, the application uses the OS natural iframe scrollbars, complete with dark gray when clicked and dragged. It's only in the folderTree and threadTree areas where Thunderbird styles the scrollbars. I'm trying to override that and get them changed to be consistent with how the OS naturally works, so it's a seamless UI overall.

morat
 
Posts: 3370
Joined: February 3rd, 2009, 6:29 pm

Post Posted April 10th, 2019, 8:10 am

Try this:

Code: Select all
scrollbar, scrollbar thumb { -moz-appearance: none !important; }
scrollbar { background-color: pink !important; }
scrollbar thumb { background-color: orange !important; }
scrollbar thumb:hover { background-color: red !important; }
scrollbar thumb:active { background-color: fuchsia !important; }

The ":hover" entry must come before the ":active" entry.

tanstaafl
Moderator

User avatar
 
Posts: 45664
Joined: July 30th, 2003, 5:06 pm

Post Posted April 10th, 2019, 6:35 pm

Another possible solution might be to use the CustomizeMyBird add-on at https://addons.thunderbird.net/en-US/th ... izemybird/ . That lets you specify a color for the thumb on the scrollbar and a color for the scrollbar background. In my case the thumb is a light blue color while the scrollbar is a light grey. I also configured it to increase the size of the "thumb" to make it easier to click on in very large folders. There are also settings for the hover color, to change the roundness of the thumb etc.

ThunderStruck
 
Posts: 24
Joined: April 1st, 2019, 10:52 pm

Post Posted April 10th, 2019, 10:42 pm

Yes! This got me to the desired solution. Many thanks. :D

morat wrote:Try this:

Code: Select all
scrollbar, scrollbar thumb { -moz-appearance: none !important; }
scrollbar { background-color: pink !important; }
scrollbar thumb { background-color: orange !important; }
scrollbar thumb:hover { background-color: red !important; }
scrollbar thumb:active { background-color: fuchsia !important; }

The ":hover" entry must come before the ":active" entry.

ThunderStruck
 
Posts: 24
Joined: April 1st, 2019, 10:52 pm

Post Posted April 10th, 2019, 10:52 pm

I appreciate the response, however, I'm trying to make my desired modifications (when possible) through CSS styling. With add-ons, they can break when the app changes (updates) and/or if the developer(s) stop supporting them. The best forward-thinking approach for me is to tackle the modifications head-on without relying on an add-on. That said, I would consider an add-on if a desired modification simply wasn't possible through CSS. For others reading this thread, perhaps the "CustomizeMyBird" add-on is worth checking out. Thanks for the suggestion :D

tanstaafl wrote:Another possible solution might be to use the CustomizeMyBird add-on

JYLD
 
Posts: 99
Joined: July 18th, 2019, 9:59 am

Post Posted July 18th, 2019, 2:33 pm

ThunderStruck wrote:I appreciate the response, however, I'm trying to make my desired modifications (when possible) through CSS styling. With add-ons, they can break when the app changes (updates) and/or if the developer(s) stop supporting them. The best forward-thinking approach for me is to tackle the modifications head-on without relying on an add-on. That said, I would consider an add-on if a desired modification simply wasn't possible through CSS. For others reading this thread, perhaps the "CustomizeMyBird" add-on is worth checking out. Thanks for the suggestion :D

tanstaafl wrote:Another possible solution might be to use the CustomizeMyBird add-on


CustomizeMyBird makes most of its changes through CSS. It doesn't have the setting for changing the thumb color when the thumb is active however. That would have to be done manually either way. Personally, I really like CustomizeMyBird and its ability for one to add in their own CSS. However, your point about trying to stick to straight CSS and no add-ons is certainly a reasonable choice.

Return to Thunderbird Support


Who is online

Users browsing this forum: Daifne and 3 guests