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: 89
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 12
Level 12
Posts: 4392
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.

Post Reply

Return to “Tutorials”