How do I get a bigger static scrollbar (aka normal scrollbar)?

Solution 1:

I think you should be cautious there. Many of us will NOT recommend you edit the system-wide defaults for a theme, unless you really do intend to interfere with the activity of all user accounts in the system. If you happen to make an error while doing that, then it affects all user accounts. Another point of caution is that when packages are updated, your changes will be erased.

Another shortcoming of this strategy is that it only changes the behavior of one GTK theme, but you might want to change the scrollbar size in ALL GTK-3.0 themes.

Instead, edit configuration files inside a user account. The trick is to figure out which one is the shortest distance to the desired endpoint. The GTK file you edit is part of a CSS (Cascading Style Sheets) setup, so the customization you put in your account will modify the settings.

In your user account, in the folder ~/.config/gtk-3.0/gtk.css I currently have this in a file called "gtk.css"

.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkRange-slider-width: 20;
  -GtkRange-stepper-size: 20;
}

If you play around with this a little bit, you'll find it is possible to integrate many specific changes from the theme file you were editing above. At one time I tried very hard to fiddle lots of settings, but I'm in the "keep it simple" mode now.

If you really do want to edit a lot of settings, the right thing to do is to COPY the whole gtk-widgets.css file and put it in your ~/.config/gtk-3.0 folder. Then go to town fiddling with settings.

In the same folder, I have a file named "settings.ini"

[Settings]
gtk-primary-button-warps-slider = false

This prevents a click in the scrollbar from moving to a certain point in the file, instead it advances just one screen. I prefer that!

The other thing worth knowing is that changing that theme file (either as previously recommended by @Dorian or by a user account change for all GTK-3.0 based themes as I suggest) only changes programs that are based on the GTK-3.0 toolkit. It does not change the scrollbar for all applications. It is only for the ones that read that gtk-3.0 config file. Since you are editing a gtk-3.0 theme, apps written with QT or gtk-2.0 will not change. Hence, changing the scrollbar size of all programs is rather more difficult/tedious than you might expect.

I have changed the scrollbar width in gtk-2.0 as well. This is done in a separate folder ~/.config/gtk-2.0. The file to create is named gtkrc

style "scroll"
{
 GtkScrollbar::slider-width = 20
}

Note that gtk-2.0 is a differently designed setup so the syntax is different, you can't just copy the gtk-3.0 css into the gtk-2.0 folder.

I have noticed that some applications behave badly when you make the scrollbar different because the size of the "grabber" inside the slider trough is not resized correctly. I suspect the scrollbar-dragging changes in @Dorian's file would help with that. I may come back and try that. I'll let you know.

Summary: The key "old time Linux system administrator advice is" DON'T edit config files on a system-wide basis. You are putting your system at risk, your changes won't last across revisions, and it requires root access, which is never good for cosmetic things like this. Find a way to make changes in your user account.

PS. If you really you want to fiddle around with system files (sometimes I do if I really want to insist all users have my favorite football team colors as their wallpaper and color scheme :) ), the first thing you should do is make a copy of the original file and name the original "gtk-widgets.css.orig". Then when you edit your file, save a copy of your edit as "gtk-widgets.css.20160919", where I have the YYYYMMDD date on the end of it. This way, when the deb package is updated, you'll have a copy of your edited file. The one you edit named gtk-widgets.css will be obliterated by package installation.

Solution 2:

Edit this file /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css

Look for this line (around line 1200): -GtkRange-slider-width: 10;

And change 10 to a bigger number like 20 or 30, and done :)

I also think they're too small...

See this image:

If you change the scrollbar size to 16 and you want them to stay that way, and not shrink when you don't have the mouse on it, then make the changes in the picture above.

If you use a size other than 16, just experiment with the margin sizes to get it right.

Solution 3:

Changing -GtkRange-slider-width has no effect on the default GTK+3 theme. Instead, you can do this:

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

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

(Place the above in ~/.config/gtk-3.0/gtk.css.)

Solution 4:

Here are the steps to restore the scrollbars which don't disappear and have permanent width, i.e. "classic" ones. Tested in GNOME Flashback session in Ubuntu 16.04 (works in Unity, too).

Step 1. Make a backup of /etc/environment. Run sudo nano /etc/environment and add there the next line:

GTK_OVERLAY_SCROLLING=0

This will prevent scrollbar's autohide behavior.

Step 2. In order to avoid tampering with the main theme file /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css we'll borrow some code from there, alter it and put it into user profile folder. Create ~/.config/gtk-3.0/gtk.css and put the next lines into it:

/* Adding the buttons on the edges (if you don't need them, skip the next 4 lines)
 */

.scrollbar {
  -GtkScrollbar-has-backward-stepper: 1;
  -GtkScrollbar-has-forward-stepper: 1;
}

/* Scrollbar trough squeezes when cursor hovers over it. Disabling that
 */

.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical.dragging:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical.dragging:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal.dragging,
.scrollbar.horizontal.slider:hover,
.scrollbar.horizontal.slider.dragging {
    margin-top: 0px;
}

/* Slider widens to fill the scrollbar when cursor hovers over it. Making it permanent
 */

.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}

Step 3. Create ~/.config/gtk-3.0/settings.ini and add the next lines into it:

[Settings]
gtk-primary-button-warps-slider = false

This will restore page-by-page scrolling behavior when you click the scrollbar on the either side of the slider. If this file already exists, just add the last line in the [Settings] section of it.

Step 4. Uninstall overlay-scrollbar and overlay-scrollbar-gtk2 packages - you won't need them anymore.

P.S. If you use some applications which need superuser rights (i.e. Synaptic, Gedit etc.) then you should also place these gtk.css and settings.ini files into the root's profile folder:

sudo cp ~/.config/gtk-3.0/gtk.css /root/.config/gtk-3.0/
sudo cp ~/.config/gtk-3.0/settings.ini /root/.config/gtk-3.0/

P.P.S. If you find that these scrollbars are too narrow for you, make them broader. Just add the next line to your ~/.config/gtk-3.0/gtk.css:

.scrollbar {
  -GtkRange-slider-width: 15;
}

Increase the width as you see fit (the default is 10). Update /root/.config/gtk-3.0/gtk.css also, if needed.

Solution 5:

I'm using Ubuntu 18.04 and this was the only solution that changed the scrollbar for EVERYTHING, from Firefox to LibreOffice to gnome-terminal. The solutions above worked fine for one or two applications but not for everything.

Note: this gives you REALLY big scrollbars which are good for large monitors because you can see them out of the corner of your eye without looking all the way over to the side of the screen every time you want to grab one. If you want smaller ones, change all the 70px's to a smaller number like 20px or 30px and tweak accordingly.

Put the following text into ~/.config/gtk-3.0/gtk.css:

.scrollbar,
scrollbar {
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
}

scrollbar slider {
background-color: @scrollbar_track_color;
}

.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height: 150px;
    min-width: 70px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
min-width: 40px;
min-height: 10px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
min-width: 70px;
}

.scrollbar.horizontal.slider:hover,
scrollbar.horizontal:hover slider {
    min-height: 10px;
}

.scrollbar.contents,
scrollbar contents {
    background-color: transparent;
    background-image: none;
    background-size: 0;
    border: none;
    border-radius: 0;
}

.scrollbar.trough,
scrollbar trough {
    background-image: none;
    border: none;
}

.scrollbar:hover:backdrop,
.scrollbar.dragging:backdrop,
scrollbar:hover:backdrop,
scrollbar.dragging:backdrop {
    background-color: alpha(@backdrop_selected_bg_color, 0.5);
}


.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical:active:dir(ltr),
scrollbar.vertical:hover:dir(ltr),
scrollbar.vertical:active:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical:active:dir(rtl),
scrollbar.vertical:hover:dir(rtl),
scrollbar.vertical:active:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal:active,
scrollbar.horizontal:hover,
scrollbar.horizontal:active {
    margin-top: 0px;
}

.scrollbar.slider,
scrollbar slider {
    background-color: alpha(@backdrop_filling_bg, 0.75);
    border-radius: 10px;
}

.scrollbar.slider:hover,
.scrollbar.slider:active,
scrollbar slider:hover,
scrollbar slider:active {
    border-radius: 20px;
    margin: 0;
}


.scrollbar.vertical:dir(ltr):not(:hover):not(.dragging),
scrollbar.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.vertical:dir(rtl):not(:hover):not(.dragging),
scrollbar.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.horizontal:not(:hover):not(.dragging),
scrollbar.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}


.scrollbar.slider:hover,
scrollbar slider:hover {
    background-color: alpha(@backdrop_filling_bg, 0.6);
}

.scrollbar.slider:active,
scrollbar slider:active {
    background-color: @backdrop_filling_bg;
}

.scrollbar.slider:backdrop,
scrollbar slider:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.75);
}

.scrollbar.slider:hover:backdrop,
scrollbar slider:hover:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.6;
}

.scrollbar.slider:active:backdrop,
scrollbar slider:active:backdrop {
    background-color: @backdrop_filling_bg;
}

scrollbar {
    min-width: 70px;
    min-height: 70px;
}