After updating to 16.10 the scrollbar size in all application increased. I am really used to idea of having 2px scrollbars. Is there a way for me to decrease the width of the new scrollbars?

  • Thanks to your question, the wider scrollbar is an added benefit to upgrading because the tiny scrollbar since I started using Ubuntu 14.04 always drove me batty. – WinEunuuchs2Unix Oct 16 '16 at 16:18
  • I would prefer a world where we can both set our own scrollbar width. Only that way you and I can scroll towards happiness. – Visgean Skeloru Oct 16 '16 at 16:24
  • One good turn deserves another so I posted an answer that will hopefully get you strolling down the right scrolling path to happiness. – WinEunuuchs2Unix Oct 16 '16 at 17:50

@WinEunuuchs2Unix

OP did not ask about Amiance, OP asked for help on 16.10. You don't even ask which desktop or theme is under consideration.

It is a very bad idea to encourage users to edit files in /usr/share/themes. First, their changes will be lost when the package upgrades. Second, the changes one user, acting as root, might make could be harmful to other users. Third, the same changes can be had by editing files in ~/.config/gtk-3.0.

I think this is a better answer. The format of GTK-3.20 themes has changed. Many themes do not have user-editable files. Furthermore, the CSS style has changed.

The themes provided with gtk-3.20 are

Adwaita
HighContrast
Raleigh
win32

How to customize those things is mostly uncharted waters, but I've got some success. The gtk.css files provided with those themes are not editable, or not usefully so. However, you can retrieve the gtk-3.20 source code and in the Adwaita theme, there is a file named gtk-contained.css. That shows the CSS syntax as it is currently used.

Copy as much of that syntax as you want into a file named ~/.config/gtk-3.0/gtk.css. If you edit the settings in there, then programs that use gtk-3.20 based themes will notice the changes.

The bad news is that the config changes we used to make in Gnome 16.04 no long work because of the change in CSS style in newer GTK-3.20.

But I have verified, but fiddling the settings in here, and then re-starting firefox, that I can alter the color of the scrollbar, add stepper arrows, and so forth. I don't have great luck fidding with the scrollbar width, a residual frustration of the overlay scrollbar.

But, as soon as you see the syntax difference, you'll see why fiddling themes now is different than it was then.

 scrollbar {
    background-color: #c3c4c4;
    transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 * {
     -GtkScrollbar-has-backward-stepper: true;
     -GtkScrollbar-has-forward-stepper: true; }
 scrollbar.top {
     border-bottom: 1px solid #9d9d99; }
 scrollbar.bottom {
     border-top: 1px solid #9d9d99; }
 scrollbar.left {
     border-right: 1px solid #9d9d99; }
 scrollbar.right {
     border-left: 1px solid #9d9d99; }
 scrollbar:backdrop {
     background-color: #e1e1df;
     border-color: #a5a5a1;
     transition: 200ms ease-out; }
 scrollbar slider {
     min-width: 30px;
     min-height: 30px;
     margin: -1px;
     border: 4px solid transparent;
     border-radius: 8px;
     background-clip: padding-box;
     background-color: #787c7d; }
 scrollbar slider:hover {
       background-color: #535859; }
 scrollbar slider:hover:active {
     background-color: #2a76c6; }
 scrollbar slider:backdrop {
     background-color: #c3c4c4; }
 scrollbar slider:disabled {
     background-color: transparent; }
 scrollbar.fine-tune slider {
     min-width: 4px;
     min-height: 4px; }
 scrollbar.fine-tune.horizontal slider {
     border-width: 5px 4px; }
 scrollbar.fine-tune.vertical slider {
     border-width: 4px 5px; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
       border-color: transparent;
       opacity: 0.4;
       background-color: transparent; }
   scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
       margin: 0;
       min-width: 3px;
       min-height: 3px;
       background-color: #2e3436;
       border: 1px solid white; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
       min-width: 5px;
       min-height: 5px;
       background-color: #2e3436;
       background-clip: padding-box;
       border-radius: 100%;
       border: 1px solid white;
       -gtk-icon-source: none; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
       margin: 0 2px;
       min-width: 40px; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
       margin: 1px 2px;
       min-width: 5px; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
       margin: 2px 0;
       min-height: 40px; }
     scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
       margin: 2px 1px;
       min-height: 5px; }
   scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
     opacity: 0.8; }
   scrollbar.horizontal slider {
     min-width: 40px; }
   scrollbar.vertical slider {
     min-height: 40px; }
   scrollbar button {
     padding: 0;
     min-width: 42px;
     min-height: 12px;
     border-style: none;
     border-radius: 0;
     transition-property: min-height, min-width, color;
     border-color: transparent;
     background-color: transparent;
     background-image: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
     text-shadow: none;
     -gtk-icon-shadow: none;
     color: #787c7d; }
     scrollbar button:hover {
       border-color: transparent;
       background-color: transparent;
       background-image: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none;
       color: #535859; }
     scrollbar button:active, scrollbar button:checked {
       border-color: transparent;
       background-color: transparent;
       background-image: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none;
       color: #2a76c6; }
     scrollbar button:disabled {
       border-color: transparent;
       background-color: transparent;
       background-image: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none;
       color: rgba(120, 124, 125, 0.2); }
     scrollbar button:backdrop {
       border-color: transparent;
       background-color: transparent;
       background-image: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0);
       text-shadow: none;
       -gtk-icon-shadow: none;
       color: #c3c4c4; }
       scrollbar button:backdrop:disabled {
         border-color: transparent;
         background-color: transparent;
         background-image: none;
         box-shadow: inset 0 1px rgba(255, 255, 255, 0);
         text-shadow: none;
         -gtk-icon-shadow: none;
         color: rgba(195, 196, 196, 0.2); }
   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-right-symbolic"); }
   scrollbar.horizontal button.up {
     -gtk-icon-source: -gtk-icontheme("pan-left-symbolic"); }

In my Ubuntu 16.10, I have no Ambiance theme to compare, I don't run Unity. I'll grab a copy of their source and see.

Ah, if a user did want to edit Ambiance gtk-widgets.css as you describe, there is a different format than you describe. Notice the syntax difference in the file /usr/share/themes/Ambiance/gtk-3.20/gtk-widgets.css

/*************
 * scrollbar *
 *************/

.scrollbar,
scrollbar {
    -GtkScrollbar-has-backward-stepper: 0;
    -GtkScrollbar-has-forward-stepper: 0;
}

scrollbar slider {
    background-color: @scrollbar_track_color;
}

.scrollbar.vertical slider,
    scrollbar.vertical slider {
    min-height: 15px;
    min-width: 5px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
    min-width: 15px;
    min-height: 5px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
    min-width: 10px;
}

Note the style difference, where the new one has a "." declaration first, followed by an instance name.

The new Ambiance package also does have gtk-3.0/gtk-widgets.css using the old style. It looks like the one you mention. Because version 3.20 is really more like a version 4.00, you can see why there are 2 separate style folders.

I suppose the tricky think is whether some applications are going to differentiate the two things.

  • I up-voted your very thorough answer and deleted mine :) – WinEunuuchs2Unix Oct 17 '16 at 22:51

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.