My Own Scroll Bar Styling Not Working Correctly

Support
1

Operating system

Linux

Joplin version

2.14.20

Desktop version info

Joplin 2.14.20 (prod, linux)

Client ID: b099e5d204c548b797866cfda73a0c4a
Sync Version: 3
Profile Version: 46
Keychain Supported: No

Revision: cfd98e3

Backup: 1.4.0

What issue do you have?

Hi,

I was playing with re-styling the scrollbars as I find them difficult to see on my laptop, so I wanted to make them a different color and a little wider. I had a look in the "Toggle development tools" bit and thought I found the answer, so I created this and added it to "Custom stylesheet for Joplin-wide app styles". It did the very job I needed.. sort of.

::-webkit-scrollbar {
    width: 10px;
    height: 7px;
}


::-webkit-scrollbar-thumb {
    background: #bd85e573;
    border-radius: 5px;
}

Three of my scrollbars have changed to what I wanted, but the far right one hasn't changed at all, any ideas of what I have done wrong or haven't done?

Thanks

Screenshots

JoplinScrollbarStyling.png
JoplinScrollbarStyling.png1917×485 115 KB

2

Adding that CSS to Custom stylesheet for rendered Markdown (userstyle.css) will change the right scrollbar.

This post explains which areas each stylesheet covers: Introduction to customising Joplin (userchrome.css & userstyle.css)

1 Like
3

Thank You