how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Write tutorials here
There are more tutorials here http://community.linuxmint.com/tutorial/welcome
Forum rules
Please don't add support questions to tutorials,start your own thread in the appropriate sub-forum instead. Before you post please read this
Post Reply
User avatar
sbroccolo
Level 2
Level 2
Posts: 90
Joined: Wed May 10, 2017 6:59 pm
Location: Sacramento

how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by sbroccolo » Thu Aug 03, 2017 2:22 am

I created this to put all the info in one place without having to follow several threads,
Those little arrows on the scroll bar that used to let you step a line at time have disappeared from most Linux apps. Been gone for awhile.
This is how to add what some call "scroll buttons" others call "scroll arrows" but the official term appears to be "Scrollbar Stepper", to all your apps at once.
I have personally tried this to make sure it works.
I tested LibreOffice,a few text editors, most of the Cinnamon System Settings tools, and Firefox. They are now there, although the first time you run an app they don't look there but as soon as you mouse over it, pop, there they are.
I made these changes on Linux Mint Cinnamon 18.2 but I expect it will work on any Linux distro that uses GTK2 or GTK3.

To give proper credit, the actual changes came from mostly two members of http://www.linuxquestions.org - maxreason and TxLonghorn

Open a terminal.
This procedure uses Mint-X as the theme being changed, replace it with the theme you are using
Use your favorite editor, I've used xed here:

For GTK2 Programs
Make a backup copy first

Code: Select all

sudo cp /usr/share/themes/Mint-X/gtk-2.0/gtkrc /usr/share/themes/Mint-X/gtk-2.0/gtkrc.bak
Edit the file

Code: Select all

gksudo xed /usr/share/themes/Mint-X/gtk-2.0/gtkrc
#Added this line to create Scrollbar stepper
GtkScrollbar::stepper-size = 18
#Modified these lines to enable stepper behavior
GtkScrollbar::has-backward-stepper = 1
GtkScrollbar::has-forward-stepper = 1
GtkScrollbar::slider-width = 18
GtkScrollbar::trough-border = 1
GtkScrollbar::activate-slider = 1
GtkScrollbar::min-slider-length = 24


After making the changes, save and reboot.

For GTK3 Programs
Make a backup copy first

Code: Select all

sudo cp /usr/share/themes/Mint-X/gtk-3.0/gtk-widgets.css /usr/share/themes/Mint-X/gtk-3.0/gtk-widgets.css.bak
Edit the file

Code: Select all

gksudo xed /usr/share/themes/Mint-X/gtk-3.0/gtk-widgets.css

(the section needing change will be around line 1640, depending an the theme, so search on "scrollbar", really only two changes normally)

/*************
* scrollbar *
*************/
/*The following lines have been modified to add scrollbar steppers */

.scrollbar {
background-clip: padding-box;
-GtkRange-trough-border: 2;
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
-GtkRange-slider-width: 10;
-GtkScrollbar-min-slider-length: 30;
-GtkRange-stepper-spacing: 0;
-GtkRange-trough-under-steppers: 1;
}

After making the changes, save and reboot.
Yes, you can change both and save both, before rebooting. But I prefer to make one change at a time.
The bolding of the comment lines is simply to draw your attention to them. Not required.
The comment lines are optional but I did program maintenance for too many years, I comment my code changes. If sharing these entire files I would add to the comments - Modified by <yourname> on MM/DD/YYYY, but that's me.

Good Luck. I hope this helps someone.

User avatar
Joe2Shoe
Level 4
Level 4
Posts: 429
Joined: Wed Oct 18, 2017 8:12 pm
Location: Ozone

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by Joe2Shoe » Sun Nov 05, 2017 1:36 pm

Thank you so much for this addition.
It has been very annoying that all Linux programs do not have scrolling arrows on the right-side of apps, thereby making me cursor-grab the scroll bar and move it up and down manually, therefore causing the window to go "scroll crazy" whenever I need to scroll up or down.
This "fix" has now added scroll arrows in Firefox/Google Chrome/Chromium, etc.
I applied this "fix" to all GTK2 and GTK3 apps.
Good job.
"Tolerance is the refuge of men without conviction."
"Common sense is not so common" - Voltaire

wings515
Level 1
Level 1
Posts: 1
Joined: Mon Oct 07, 2019 8:17 pm

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by wings515 » Mon Oct 07, 2019 8:38 pm

I have just started using Linux Mint and noticed missing scroll bar pointers on Firefox. I searched and found a solution posted in 2017. I tried to perform the requires changes to the files but an error message stating I did not have permission to do this change.
What am I doing incorrectly?
Thank you,
wings515

User avatar
smurphos
Level 13
Level 13
Posts: 4568
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by smurphos » Mon Oct 07, 2019 11:36 pm

Hi,

The 'best' way in current Mint 19 is to make a gtk3 override file. This was it's theme agnostic.

Open / Create your gtk3 over-ride file by running this command in a terminal

Code: Select all

xed ~/.config/gtk-3.0/gtk.css
Then add the following code block to the file, save and log out and back in.
How this looks does vary by theme but it looks reasonable on most gtk themes I've tried.
Note for Mint 19.2 + Cinnamon users - this over-ride will interfere with the GUI option to set scrollbar width in the Themes module.

Code: Select all

/* Scrollbar width fixes */
scrollbar.vertical slider,
scrollbar.slider.vertical
{
    min-width: 1em;
}
scrollbar.horizontal slider,
scrollbar.slider.horizontal
{
    min-height: 1em;
}

/* Steppers */
* {
    -GtkScrollbar-has-backward-stepper: 1;
    -GtkScrollbar-has-forward-stepper: 1;
}

scrollbar button {
    min-width: 1em;
    min-height: 1em;
}

scrollbar.vertical button.down {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

scrollbar.vertical button.up {
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

scrollbar.horizontal button.down {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

scrollbar.horizontal button.up {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.

sjmathis
Level 1
Level 1
Posts: 46
Joined: Sun Dec 11, 2016 8:22 pm

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by sjmathis » Sat Oct 26, 2019 11:53 am

Wow! Amazing. Seems to have added 'scroll buttons' to everything that has a scroll bar? I tried the second method, since I'm running 19, and it worked like a charm.

Since this is a tutorial, could you also explain what GTK is? I gather that it's a piece of software that does things to things running on your desktop, but What else does it do? Why are there two of them (GTK3 and GTK2)?

By very strange coincidence, my wife, who is a non-techie Windows user, was trying to scroll a window on our laptop that we use for a music player, and I was unable to tell her how to do it using something that she understood, so I had to get off the couch and do it for her. Now I know how to fix that. Many thanks!

User avatar
smurphos
Level 13
Level 13
Posts: 4568
Joined: Fri Sep 05, 2014 12:18 am
Location: Britisher
Contact:

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by smurphos » Sat Oct 26, 2019 11:18 pm

sjmathis wrote:
Sat Oct 26, 2019 11:53 am
Since this is a tutorial, could you also explain what GTK is? I gather that it's a piece of software that does things to things running on your desktop, but What else does it do? Why are there two of them (GTK3 and GTK2)?
So GTK (aka GTK+ and originally the Gimp ToolKit) is one of several toolkits for building GUI applications and desktop UIs (the other main one in the Linux world being QT), basically a set of building blocks or elements (buttons, text boxes, menus etc) that app developers can reference in their code to build what you see on your screen, modified by the end-users choice of GTK theme. It saves app developers having to develop UI elements from the ground up.

It's had a number of iterations and versions jumps but at the time of writing has two supported versions that can and do coexist - GTK2 whose most recent major release was in 2011 and it's successor GTK3 which was in development since 2011 and whose final version 3.24 was released in 2018. The next iteration GTK4 is in the works but I suspect that won't be a 'thing' for Mint users until Mint 21 in 2022.

As of Mint 19.x all the supported desktop environments are GTK based and the majority of your applications are GTK3 based albeit there are still significant numbers of GTK2 based apps (GIMP being the main once installed in Mint by default) . You can install and run QT based apps as-well.

Cinnamon and Mate are GTK3 based desktop environments, XFCE is in the process of moving from GTK2 to GTK3. Mint 19.3's XFCE should be fully GTK3.

More info

https://en.wikipedia.org/wiki/GTK
https://en.wikipedia.org/wiki/Qt_(software)
For custom Nemo actions, useful scripts for the Cinnamon desktop, and Cinnamox themes visit my Github pages.

User avatar
sbroccolo
Level 2
Level 2
Posts: 90
Joined: Wed May 10, 2017 6:59 pm
Location: Sacramento

Re: how to add "scroll buttons" or "scroll arrows" to Office and Firefox

Post by sbroccolo » Fri Nov 08, 2019 6:58 pm

Thanks for adding that explanation. I have not tried it yet but I believe the gtk css override method is a better solution than my original. Thanks!

Post Reply

Return to “Tutorials”