In Ubuntu 16.04, I created a file ~/.config/gtk-3.0/gtk.css to replace the skinny scrollbar (on both firefox and emacs) that widens when you hover with one that is always wide, change the color of the scrollbar to a dignified gray, and have buttons at the top and bottom to single step:

.scrollbar {
  -GtkScrollbar-has-backward-stepper: true;
  -GtkScrollbar-has-forward-stepper: true;
  -GtkRange-slider-width: 16;
  -GtkRange-stepper-size: 16;

  background-color: LightGray;

.scrollbar.slider {
    background-color: DarkGray;
    border-radius: 1px;

.scrollbar.slider {
    border-color: shade (@bg_color, 0.4);
    background-image: -gtk-gradient (linear, left top, right top,
                                     from (shade (@button_bg_color, 0.9)),
                                     to (shade (@button_bg_color, 0.8)));
    box-shadow: inset 1px 0 shade (@bg_color, 0.85),
                inset -1px 0 shade (@bg_color, 0.62),
                inset 0 1px shade (@bg_color, 0.9),
                inset 0 -1px shade (@bg_color, 0.62);

This file seems to have no effect on Ubuntu 18.04. I would very much like to eliminate the skinny scrollbar that widens only when the mouse hovers, and to change the color from the default orange to nice gray. Can anyone tell me how to accomplish this in Ubuntu 18.04?


I'm answering my own question because no one has had any suggestions but after long experimentation I have something that mostly works. I have the following in ~/.config/gtk-3.0/settings.ini

gtk-primary-button-warps-slider = false

and the following in ~/.config/gtk-3.0/gtk.css

scrollbar slider {
    /* Size of the slider */
    min-width: 18px;
    min-height: 18px;
    border-radius: 15px;

    /* Padding around the slider */
    border: 1px solid #606307;

scrollbar trough {
    background-color: shade(@theme_bg_color, 0.5);

scrollbar button,
scrollbar button.vertical,
scrollbar button.horizontal,
scrollbar .button,
scrollbar .button.vertical,
scrollbar .button.horizontal {
    color: shade(@theme_bg_color, 0.10);
    background-color: shade(@theme_bg_color, 0.6);

scrollbar.vertical slider,
scrollbar.vertical .slider {
    background-image: radial-gradient(ellipse at center, DarkGray 0%, LightGrey 100%);

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    background-image: radial-gradient(ellipse at center, DarkGray 0%, LightGray 100%);

That gives me a wide scrollbar with a light gray slider on a dard gray background, in both firefox and emacs. I wish I knew why this worked, but I haven't found any documentation that explains the various commands. The one strange thing that this does is that, in emacs, the scrollbar is slim until the first time the mouse passes over it, at which point it gets wide and stays wide. Also, the scrollbar in emacs sometimes appears to be a slimmer one partly overlaying a wider one, in a way that's still useable but very strange.


I'm sorry I don't have a better answer, however, for what its worth, I've been trying to establish a frame of reference for this, and so far, struck out:

My objective was simply to set background colors for the workspace plugin (wnck-pager?) to the panel application under XUbuntu 16.04. Based on another answer tip I found elsewhere, I created the gtk.css from scratch (there was none there to begin with), as follows:

~/.config/gtk-3.0 cat gtk.css

wnck-pager { background-color: #0F0000; } wnck-pager:selected { background-color: #00000F; } wnck-pager:hover { background-color: #000FA0; }

This enables me to see which workspace I'm in, since the default background colors are so similar, its difficult to notice. However, while attempting to export this fix to adjacent Xubu 16.04 systems, I found a much more ornate gtk.css file, with references that looked like they might be relevant. However, I have yet to track down the relevant docs. I think this may be part of a project called 'mono'...but you see, this is a classic rathole situation, all I wanted to do was find a way to set the 'hover' and 'selected' background colors on the workspaces under the panel app.

Bottom-line: on the second system (the one with the much larger gtk.css file), I set that file aside, and installed the one listed above, just to see if a) anything was broken, and b) if I could get the workspace selected background color on the panel to change. Nothing obvious was broken (by removing the more involved gtk.css file). However, the very simple gtk.css file I put in its place did not work on the second Xubuntu 16.04 workstation. Same gtk.css file on both systems, both 16.04 Xubuntu, one works, one doesn't.

Not sure how much more time I can invest in resolving this, but whatever additional results I get, I'll post them here.

Note to moderators: I know this doesn't answer the question, however, I am sharing my research. (Thanks for StackExchange. An outstanding, invaluable resource.)

  • Why don't you ask a new question: How to set background colors for the panel's workspace plugin in XUbuntu 16.04.? Then you can post your answer (and further updates) there instead. – DK Bose Aug 11 '19 at 13:12
  • Okay... Does anyone know which program or process resolves multiple inputs which affect a given panel? In other words, if two different processes have a config file which requires them to respond to a 'select rectangle' event on the desktop window, which one is processed last? (Case in point: if you select a theme 'Ambiance' with a gtk-main.css file containing: '@define-color selected_bg_color #ffffff', and your ~/.config/gtk-3.0/gtk.css file contains: wnck-pager:selected { background-color: #ff0000 }'... how is that resolved? – Tb Thomas Aug 11 '19 at 18:14
  • @TbThomas That is a good candidate to ask a new AskUbuntu question. – tom_mai78101 Nov 21 '19 at 21:13

The appearance of the Firefox scrollbars can be changed by creating a new gtk.css in the Firefox profile folder. For me this is located at ~snap/firefox/323/.config/gtk-3.0 , but it may have a different location if you don't have a snap version.

The gtk.css file should contain the following code to allow you to adjust the appearance of both the vertical and horizontal sliders:

scrollbar.vertical slider {

/* Slider dimensions */

min-width: 12px;
min-height: 70px;

/* Curvature top and bottom of the slider */

border-radius: 12px;

/* Padding around the slider */

border: 4px solid transparent;

/* Colour of the slider */

background-color: #666699;


scrollbar.horizontal slider {

/* Slider dimensions */

min-width: 70px;    
min-height: 12px;

/* Curvature top and bottom of the slider */

border-radius: 12px;

/* Padding around the slider */

border: 4px solid transparent;

/* Colour of the slider */

background-color: #666699;


Just play around with the values until you find something you like. There are various colour finders online which will give you the hexadecimal values for a given colour.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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