Widen the scroll bars on Windows

MisterKelly · 2022-10-27T06:41:01.238Z

Hi,

I keep moving folders accidentally while trying to use the narrow scrollbar on the Notebooks panel.

Can anyone suggest some custom css that will widen this scrollbar so that I can grab it without accidentally grabbing a folder.

Many thanks, Owen

Sinacs · 2022-10-27T07:09:23.452Z

Hi @MisterKelly , pick the one you like and copy & paste to your userchrome.css:

For notebook panel:

.rli-sideBar ::-webkit-scrollbar {
  width: 10px !important;
}

For note list panel:

.rli-noteList ::-webkit-scrollbar {
  width: 10px !important;
}

Or for both:

.rli-sideBar ::-webkit-scrollbar,
.rli-noteList ::-webkit-scrollbar {
  width: 10px !important;
}

You can edit the size to fit your needs and it's required to quit & restart Joplin to take effect.

MisterKelly · 2022-10-27T07:35:10.724Z

Thank you. That did the job!

MisterKelly · 2022-10-27T10:19:09.217Z

In case anyone else finds this useful, I will note that I also added this to the css:

.rli-sideBar ::-webkit-scrollbar-track {
border-width: 0;
}

This gets ride of the (now suddenly ugly) black borders on the scrollbar.

Many thanks again @Sinacs

MrMacvos · 2022-11-01T08:11:47.292Z

And then I added this to make the scroll thumb look better:

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

heitmanr · 2023-01-20T16:38:54.922Z

since at least at my device a "c:\ dir /S userchrome.css" had no result...
Introduction to customising Joplin (userchrome.css & userstyle.css) could be a good introduction.
and
How To Style Scrollbars with CSS | DigitalOcean

=> go to Tools => Options

Appearance
"show Advanced settings"
"Custom stylesheet for Joplin-wide settings" <= this is userchrome.css

heitmanr · 2023-01-20T16:40:26.473Z

and if you want to change the colours, try this

/* For styling the entire Joplin app (except the rendered Markdown, which is defined in `userstyle.css`) */

::-webkit-scrollbar {
  width: 15px;
}

::-webkit-scrollbar-track {
  border-width: 5;
  background: dimgrey; /* color of the tracking area */
}
::-webkit-scrollbar-track:hover {
  border-width: 5;
  background: dimgrey; /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
    background-color: orange; /* color of the scrollbar (no hover) */
    border: 3px solid grey;
}
::-webkit-scrollbar-thumb:hover {
    background-color: darkorange; /* color of the scrollbar (hover) */
    border: 3px solid grey;
}