Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

How to adjust the vertical Scroll bar widths in Firefox and Thunderbird-Ubuntu 20.04.2 LTS

  • 2 replies
  • 1 has this problem
  • 1299 views
  • Last reply by Andbo553

Andbo553
Andbo553

Is there a relatively straight forward way to make the width of the scroll bars wider in firefox and thunderbird?

Their default size can prove challenging to see and operate for older users and I would like to be able to modify the width if possible.

I have found some info on the web, but nothing I have tried seems to work. Would be good to understand the best way to achieve this for my father's system:

OS Ubuntu: 20.04.2 LTS Thunderbird:78.8.1 Firefox: 88.01

Is there a relatively straight forward way to make the width of the scroll bars wider in firefox and thunderbird? Their default size can prove challenging to see and operate for older users and I would like to be able to modify the width if possible. I have found some info on the web, but nothing I have tried seems to work. Would be good to understand the best way to achieve this for my father's system: OS Ubuntu: 20.04.2 LTS Thunderbird:78.8.1 Firefox: 88.01

Chosen solution

This can be done with css files:

Add this to userChrome.css for the Threads and Folder Panes: 

scrollbar {
  -moz-appearance: none !important;
    background: orange !important;
    width: 15px;
    scrollbar-color: grey orange;
}

Add this to userContent.css for the Message Pane and Write windows: 

:root { 
    scrollbar-color: grey orange;
    scrollbar-width: 25px;
}

Help/Troubleshooting, Profile Folder, Open Directory, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the numbers and colors as desired. Repeat with userContent.css. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Edit/Preferences/General/Config. editor, restart TB.

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

https://www.reddit.com/r/FirefoxCSS/comments/98j1a7/psa_you_can_change_scrollbar_properties_directly/

The same method should work in Firefox (userContent.css only).

Read this answer in context 👍 1

All Replies (2)

sfhowes
sfhowes
  • Top 10 Contributor

Chosen Solution

This can be done with css files:

Add this to userChrome.css for the Threads and Folder Panes: 

scrollbar {
  -moz-appearance: none !important;
    background: orange !important;
    width: 15px;
    scrollbar-color: grey orange;
}

Add this to userContent.css for the Message Pane and Write windows: 

:root { 
    scrollbar-color: grey orange;
    scrollbar-width: 25px;
}

Help/Troubleshooting, Profile Folder, Open Directory, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the numbers and colors as desired. Repeat with userContent.css. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Edit/Preferences/General/Config. editor, restart TB.

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

https://www.reddit.com/r/FirefoxCSS/comments/98j1a7/psa_you_can_change_scrollbar_properties_directly/

The same method should work in Firefox (userContent.css only).

Andbo553
Andbo553 Question owner

Many thanks. Works a treat!