Home / ubuntu / Questions / 334283
In Process
AliN
Asked: 2013-08-19 14:08:35 +0800 CST

GTK scrollbar with transparent or no trough

  • 772

Is it possible in GTK-2 or/and GTK-3 to remove the scrollbar trough or make it invisible?

I know there are scripts to remove the scrollbar steppers, like:

GtkScrollbar::has-forward-stepper = 0

Now I want to know if there is such script to remove the trough.

In other words, GTK scrollbar is at the end of content, but I want to put it over the content – just like Overlay scrollbar.

EDIT: Let’s make my question more clear. I’ve edited both GTK-2 and GTK-3 themes to make scrollbars more similar to Overlay since I don’t like a low-contrast wide scrollbar. So I edited gtkrc and gtk-widgets.css files to change the slider color to orange and the trough to white, but as seen in the screenshot below the contrast between the trough and a dark background is annoying.

gtk-2 white trough on a dark background

The question is here if it’s possible to completely remove the trough or make it transparent. I guess the latter is possible.

My ideal is something like this:

Terminal with Overlay scrollbar which has no trough

themes

2 Answers

  1. Transparent colors (RGBA) are possible in GTK-3 using alpha, so for making the trough transparent:

    .scrollbar.trough,
.scrollbar.trough.vertical {
    border: alpha (@base_color, 0.0);
    background: alpha (@base_color, 0.0);
}

    I don’t know about GTK-2 yet.

    • 2

  2. I'm not sure I understood your question correctly but ...

    I use Lubuntu 13.04 with the Greybird theme (sudo apt-get install shimmer-themes). I've heavily altered both the gtk2 and gtk3 aspects to suit my taste. The image shows a bit of a gedit window (top) and a bit of my file manager, Thunar (below). As you can see, the trough is not really distinctive.

                                                         scrollbar trough

    To get this effect, if that's what you're looking for, I edited ~/.themes/MyGreybird/gtk-2.0/gtkrc and ~/.themes/MyGreybird/gtk-3.0/gtk.css and ~/.themes/MyGreybird/gtk-3.0/gtk-widgets.css.

    Unfortunately, I really can't say whether it's this or that hack that gave me the current look. If you're looking for something like what I have, try editing the files similar to those I mentioned by looking for things like:

    • GtkScrollbar ::trough-border
    • prelight_shade ... # shade level for scrollbar's slider, comboboxstyle(1), and prelight state with gradient_colors
    • trough_shades # draw gradient on trough of GtkScrollbar and GtkProgressbar

    These are in gtkrc and I have commented them out in my theme by having # at the start of the line.

    Then, in gtk-widgets.css, my theme has:

    .scrollbars-junction,
.scrollbar.trough,
.scrollbar.trough.vertical {
    border-width: 0;
    border-radius: 0;
/*    background-image: -gtk-gradient(linear, left top, right top,
                                     from (shade(@theme_bg_color, 1.1)),
                                     to (shade(@theme_bg_color, 1.3)));*/
    background-color: shade(@theme_bg_color, 0.9);
}

.scrollbar.trough.horizontal {
/*    background-image: -gtk-gradient(linear, left top, left bottom,
                                     from (shade(@theme_bg_color, 1.1)),
                                     to (shade(@theme_bg_color, 1.3)));*/
    background-color: shade(@theme_bg_color, 0.9);
}

    Again, I've commented out some stuff (using /* and */).

    I'm not sure I've made much sense but, basically, just look for relevant stuff and comment it out or modify it!

    I use gedit as my editor with a plug-in that saves multiple, time-stamped backups so that if I break something, I can revert the changes.

    Please note that some applications may have their own scrollbar systems and you'll have to mess with those separately.

    • 1