My Own Scroll Bar Styling Not Working Correctly

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

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

Thank You

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.