3

Background

I wrote this same question up for 18.04.
At that time various people pointed me at a work-around solution at this link.

However, those solutions don't seem to work on Ubuntu 22.04.

The Reason Up/Down Arrows Are Needed

You may believe that up/down arrows on scrollbar are not needed.
However, I have 100s of email in my inbox on Thunderbird. It is not possible to grab the scroll bar and move it slowly enough to move it one email down. Up/down arrows on scrollbars are a requirement in this situation.

What are the steps to add up/down arrows to all scrollbars in Ubuntu 22.04 with Gnome 42.2?

raddevus
  • 1,800

1 Answers1

3

to add scrollbar arrows to all ubuntu 22.04 themes: Create a file in /home/yourusername/.config/gtk-3.0/gtk.css containing the following:

*{
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
-GtkRange-slider-width: 13;
-GtkRange-stepper-size: 13;
}

replace yourusername by your user name This applyed the arrows for me for many themes and programs but you will get small arrows. enter image description here

if you want to customize one them follow this steps: we will use yaru theme

  1. open /usr/share/themes/Yaru/gtk-3.0 and copy gtk.gresource to home folder

  2. right click in home folder right click and and open in terminal

  3. sudo gresource list gtk.gresource

  4. sudo gresource extract gtk.gresource /com/ubuntu/themes/Yaru/3.0/gtk.css >gtk.css

  5. in home folder copy gtk.css to /usr/share/themes/Yaru/gtk-3.0 and right click in /usr/share/themes/Yaru/gtk-3.0 and open as administrator if you dont have it in your context menu use next command:

    sudo apt install nautilus-admin   
nautilus -q

  6. open /usr/share/themes/Yaru/gtk-3.0 as administrator and inter your password

  7. open gtk.css by text editor

  8. after open gtk.css press ctrlf and write scrollbar and enter you will fined like this:

    -GtkScrollbar-has-backward-stepper: false;
-GtkScrollbar-has-forward-stepper: false;

  9. edit the word false and make it true like this:

    -GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;

  10. save the file

  11. close all opened file, you can keep text editor opened

  12. to apply the theme you can change to other them and back to yaru again

  13. now after open files or show text editor again you will find small up/down arrow

  14. to edit up/down arrow color and size open gtk.css again if it closed or back to text editor if you didn't close it

  15. scroll down to these lines (these lines I get it after I edited the file and test the way) and you can change the number before px; to change the size and change numbers or digit after # to change color. You can Google "color picker" to choose the color and get the code or to write the code to show the color:

    scrollbar button {
  padding: 0;
  min-width: 16px;
  min-height: 16px;
  border-style: none;
  border-radius: 0;
  transition-property: min-height, min-width, color;
  border-color: transparent;
  background-color: #e3dede;
  background-image: none;
  box-shadow: inset 0 16px rgba(255, 255, 255, 0);
  text-shadow: none;
  -gtk-icon-shadow: none;
  color: #c34113; }
scrollbar button:hover {
  border-color: transparent;
  background-color: #636363;
  background-image: none;
  box-shadow: inset 0 16px rgba(255, 255, 255, 0);
  text-shadow: none;
  -gtk-icon-shadow: none;
  color: #636363; }
scrollbar button:active, scrollbar button:checked {
  border-color: transparent;
  background-color: #c34113;
  background-image: none;
  box-shadow: inset 0 16px rgba(255, 255, 255, 0);
  text-shadow: none;
  -gtk-icon-shadow: none;
  color: #c34113; }*

  16. to applay the theme u can change to other them and back to yaru again now after open files or show text editor again u will fined up/dn arrow in your customization

Talaat Etman
  • 669