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:

  • 1. I want a scrollbar that is wide enough to be easily clickable to drag up and down.
  • 2. I want scrollbar arrow buttons that I can click to move the content in small increments.
  • 3. I want the buttons and scrollbars easily identified with a border or color defference.
  • 4. I want these settings to be the default for any theme I use.
  • 5. I want the changes to apply only to me so I don’t piss off anyone else that uses this host.
  • 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.

    Tagged , , , , , , . Bookmark the permalink.

    One Response to Adding Scrollbars and Stepper Buttons to Desktop Theme

    1. Pingback: Adding scrollbar arrows to Adwaita (default) - Boot Panic

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Solve : *
    21 − 5 =