Traditional scrollbars in GTK2 applications

Question

To enable traditional scrollbars with scroll buttons in GTK3 applications I have added the file ~/.config/gtk-3.0/gtk.css with the content

scrollbar {
        -GtkScrollbar-has-backward-stepper: true;
        -GtkScrollbar-has-forward-stepper: true;
}

scrollbar slider {
        border: 0;
        border-radius: 0;
        min-width: 15px;
        min-height: 15px;
}

The first screenshot below shows the result in the GTK3 application Pluma. How do I get the same kind of scrollbar in GTK2 applications like PCManFM in the second screenshot below?

Edit 2020-08-13: I have tried the suggestion in How do I get a bigger static scrollbar... but it makes no difference to the file browser PCManFM which still has the narrow scrollbar as shown in the second screenshot below.

Edit 2020-08-18: Following Miloš Pavlović's suggestion below changes the scrollbar in GTK2 applications but the scrollbar has no steppers and the slider looks really strange, see the third screenshot below.

Edit 2023-07-19: After installing Debian 12 I have been digging a bit deeper into the problem. Correct stepper arrows can be achieved by commenting out the following lines in /usr/share/themes/Adwaita/gtk-2.0/main.rc:

image {
  function = ARROW
  detail   = "vscrollbar"
}
image {
  function = ARROW
  detail   = "hscrollbar"
}

Here is a screenshot with the following settings in ~/.gtkrc-2.0:

gtk-theme-name = "Adwaita"
gtk-icon-theme-name = "Adwaita"

style "TraditionalScrollbar" {
     GtkScrollbar::has-backward-stepper = 1
     GtkScrollbar::has-forward-stepper = 1
     GtkScrollbar::slider-width = 16
     GtkScrollbar::stepper-size = 16
}

class "GtkScrollbar" style "TraditionalScrollbar"

The remaining questions are how to

1. make the scrollbar solid (not hollow)
2. make the scrollbar fill out the trough and
3. make the scrollbar have sharp edges (not rounded).

Answer 1

There is a hidden file .gtkrc-2.0 in the home folder that overides the current theme. If not create it. Paste next at the end of the file

style "myscrollbar"
{
     GtkRange::stepper-size = 16
     GtkRange::trough-under-steppers = 1
     GtkScrollbar::has-backward-stepper = 1  
     GtkScrollbar::has-forward-stepper = 1
     GtkScrollbar::slider-width = 16
     GtkScrollbar::trough-border = 2
}
class "GtkScrollbar" style "myscrollbar"

Save and logout/in to apply the changes.

• GtkRange::stepper-size = 0 --> 16 is the vertical size of arrow buttons, a value of zero nixes them (at least in some apps?))

• GtkRange::trough-under-steppers = 0 --> 1 (extends the left scrollbar border over the arrows for a neater look)

• GtkScrollbar::has-*-stepper = 0 --> 1 turns on scroll arrows (if stepper-size isn't 0)

• GtkScrollbar::slider-width = 14 --> 16 changes width of scroll bar AND slider, apparently, although the lack of a right border makes the slider look off-center and non-flush in width

• GtkScrollbar::trough-border = 0 --> 2 is a partial requirement for getting a (left) border

Answer 2

It turns out that the missing setting is GtkScrollbar::stepper-size = 16. So, a simple ~/.gtkrc-2.0 file like this:

style "myscrollbar"
{
  GtkScrollbar::stepper-size = 16
  GtkScrollbar::has-backward-stepper = 1
  GtkScrollbar::has-forward-stepper  = 1
}

class "GtkScrollbar" style "myscrollbar"

will do the trick.

For a method to show the triangles for the steppers on both ends of the scroll bars look at the end of this answer.

Answer 3

Traditional scrollbars for GTK 2 applications:

Copy the scrollbar arrow icons from the Adwaita theme and create icons for scrollbar sliders with sharp (not rounded) corners:

$ mkdir -p ~/.local/share/themes/Adwaita/gtk-2.0/assets
$ cp /usr/share/themes/Adwaita/gtk-2.0/assets/pan-*.png ~/.local/share/themes/Adwaita/gtk-2.0/assets/
$ convert -size 16x16 "canvas:#787c7d" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider.png
$ convert -size 16x16 "canvas:#535859" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-hover.png
$ convert -size 16x16 "canvas:#2a76c6" ~/.local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-active.png

Create the file ~/.gtkrc-2.0 with the following content:

gtk-theme-name = "Adwaita"
gtk-icon-theme-name = "Adwaita"

style "TraditionalScrollbar" {
    GtkScrollbar::has-backward-stepper = 1
    GtkScrollbar::has-forward-stepper = 1
    GtkScrollbar::slider-width = 16
    GtkScrollbar::stepper-size = 16

    engine "pixmap" {
        /*vertical scrollbar steppers*/
        image {
            function = ARROW
            state = NORMAL
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-up.png"
            overlay_stretch = FALSE
            arrow_direction = UP
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-up-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = UP
        }
        image {
            function = ARROW
            state = NORMAL
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-down.png"
            overlay_stretch = FALSE
            arrow_direction = DOWN
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "vscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-down-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = DOWN
        }

        /*horizontal scrollbar steppers*/
        image {
            function = ARROW
            state = NORMAL
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-left.png"
            overlay_stretch = FALSE
            arrow_direction = LEFT
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-left-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = LEFT
        }
        image {
            function = ARROW
            state = NORMAL
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-right.png"
            overlay_stretch = FALSE
            arrow_direction = RIGHT
        }
        image {
            function = ARROW
            state = INSENSITIVE
            detail = "hscrollbar"
            overlay_file = ".local/share/themes/Adwaita/gtk-2.0/assets/pan-right-insensitive.png"
            overlay_stretch = FALSE
            arrow_direction = RIGHT
        }

        /*scrollbar sliders*/
        image {
            function = SLIDER
            state = NORMAL
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider.png"
        }
        image {
            function = SLIDER
            state = PRELIGHT
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-hover.png"
        }
        image {
            function = SLIDER
            state = ACTIVE
            detail = "slider"
            file = ".local/share/themes/Adwaita/gtk-2.0/assets/scrollbar-slider-active.png"
        }
    }
}

class "GtkScrollbar" style "TraditionalScrollbar"

Here is the result: