Adding Scrollbars and Stepper Buttons to Desktop Theme

Do you like having clear and easily manipulated controls on your desktop? I sure do. There seems to be a rush to get to a pure minimalist desktop UI. Where there are limited controls and everything is flat grey on a white background. I, for one, don’t consider my desktop a work of art, it’s a tool. Call me old fashioned, but I like my tools to have labels and clear controls.

I recently tried out a few new desktop UIs and one thing kept popping out at me. Where are the scrollbars and scrollbar buttons? Every theme I tried seemed to lack the scrollbar buttons for up/down vertical or left/right horizontal controls. Most scrollbars would auto-dissappear. Some were so slim that I couldn’t click on the scrolling bar to move the content of a page up/down. So I figured, I’ll just edit the settings and give myself the environment I wanted.

I found that there is very limited information on how to do this. The pages I did find were mostly man pages where examples were constantly labeled with ‘this is deprecated’. There were also lots of forum posts asking “how do I do exactly this” with no answers (e.g. DenverCoder9) Two Hours later, and after a lot of trial and error I found working settings.

OK – Sorry for the rant. Seriously, this should not have been so difficult.

What I wanted was simple:

The window controls for themes like Gnome and Cinnamon are handled by gtk 3.0. To create your own settings, you need a gtk css file in your home directory.

/home/user/.config/gtk-3.0/gtk.css

The gtk.css file in this home folder will be applied to any new application that you launch.

I added this to the gtk.css file:

/* Add Scrollbar buttons */
.scrollbar,
scrollbar {
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
}
/* Make the scrollbar sliders wider and easier to grab */
.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height:100px;
    min-width: 25px;
}
.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
min-width: 40px;
min-height: 20px;
}
/* Change Buttons/stepper colors and size  */
scrollbar.vertical button,
scrollbar.vertical .button {
    min-width:13px;
    min-height: 30px;
    padding: 0px;
    background-color: white;
/* If you want a border around your scrollbar buttons, uncomment these items  */ 
/*   border-style: solid; */
/*   border-color: black; */
/*   border-width: 1px; */
}
scrollbar.horizontal button,
scrollbar.horizontal .button {
    min-width:25px;
    min-height: 16px;
    padding: 0px;
    background-color: white;
/* If you want a border around your scrollbar buttons, uncomment these items  */ 
/*   border-style: solid; */
/*   border-color: black; */
/*   border-width: 1px; */
}

Save your file then open up a new application in the UI like texteditor. You should see a change in the scrollbars.

Note, that the /home/user/.config/gtk-3.0/ folder is separate from the /home/user/.themes/ folder. You can create custom themes or copy a theme into your folder to change it and it will not change the settings in the gtk.css and your scrollbars will remain intact.