Widen the scroll bars on Windows

Lounge
1

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

1 Like
2

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.

5 Likes
3

Thank you. That did the job!

1 Like
4

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

3 Likes
5

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

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

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 :slight_smile:
1 Like
7

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;
}
1 Like