Tweaking your Scrollbar Settings

Tips, Tricks and Tutorials Tried & Tested
1

Mate default theme has the scrollbar set pretty nice, but I still like to tweak it a bit. This is something I don't want to do everytime I switch themes. So here's a way to tweak the scrollbar that will work for all the gtk3 themes.

NOTE: This will change most, but not all windows. Example: No effect on Synaptic Package Manager.

Create a new file and name it "gtk.css".

Place this file in your home folder at the location /.config/gtk-3.0/gtk.css

And place this script in your newly created "gtk.css" file:

scrollbar slider {
    /* Size of the slider */
    min-width: 15px;
    min-height: 15px;
    border-radius: 17px;

    /* Padding around the slider */
    border: 2px solid transparent;
}

This is set to my liking (15,15,17,2), but you can play with all four of the "px" numbers until it's to your liking.

5 Likes
2

This is awesome, thanks for sharing! One question, could I also have a colour setting for the scrollbar in this file that overrides the current theme?

3

Sorry, I haven’t tried adding color. I do color variations in the theme itself or use dconf-editor.

4

Updated to include shading/color changes.

Note:
This tweak should work on all default themes. It was created using GreenLaguna, so milage may vary.

Scrollbar/buttons/slider tweaks will need to be added to (home directory) ~/.config/gtk-3.0/gtk.css (the /gtk.css file will need to be created at that location) and this is a per user modification that will not work system wide. Currently I cannot add a custom theme system wide using root access to /themes or user themes to /.themes. The appearance GUI just will not see them.

Code to paste to /gtk.css:

  scrollbar slider {
    /* Size of the slider */
    min-width: 15px;
    min-height: 15px;
    border-radius: 17px;

    /* Padding around the slider */
    border: 2px solid transparent;
}

scrollbar trough {
    background-color: shade(@theme_bg_color, 0.60);
}

scrollbar button,
scrollbar button.vertical,
scrollbar button.horizontal,
scrollbar .button,
scrollbar .button.vertical,
scrollbar .button.horizontal {
    color: shade(@theme_bg_color, 0.10);
    background-color: shade(@theme_bg_color, 0.4);
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    background-image: linear-gradient(to top,
                                      shade(@toolbar_gradient_base, 0.85),
                                      white);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    background-image: linear-gradient(to left,
                                      shade(@toolbar_gradient_base, 0.85),
                                      white);
}
1 Like
5

"Dark & Black" scrollbar modification.

Scrollbars.png957×455 136 KB

gtk.css code:

scrollbar trough {
    background-color: shade(@theme_bg_color, 1.35);
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    background-image: radial-gradient(ellipse at center, #6E726A 0%, #000000 100%);
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    background-image: radial-gradient(ellipse at center, #6E726A 0%, #000000 100%);
}
1 Like
6

Awesome, made my Seamonkey scrollbar and other scrollbars wider. Thank you so much!

7

Hi all,
Do I need to restart processes to enable these settings? I'm trying to widen the scrollbar (since it takes me ages to find and click it) but adding this file doens't seem to change anything.

(edit mate version: Mate 1.20.1)

8

trying: https://forums.linuxmint.com/viewtopic.php?t=265533

9

still no dice, tried to edit themes and set slider-width in gtk-2 and gtk-3 /usr/themes, copied /usr/themes to ~/.themes (but can't select in in theme settings.)

10

Excellent.
I did this yesterday, just installed LM20 XFCE and it works beautiful.
O.K., a few rarely-used apps don't get affected but I don't care.
I went on an google expedtion
to solve this problem & the .css file worked fine.

Anon gets 10 beers from me.