Note:
The formattings in this answer are optimal for precise (Ubuntu 12.04) only, see next answer for improved formattings for trusty (Ubuntu 14.04).
Make scrollbars visible (change color)
Based on vasa1's informations provided above I changed the color of the classic scrollbars to the default selection color - the same that overlay scrollbars are using as well.
For GTK 3 applications modify:
gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css
starting from line 1580 so that it looks like:
.scrollbar.slider,
.scrollbar.slider:hover,
.scrollbar.button,
.scrollbar.slider.vertical,
.scrollbar.button.vertical {
background-image: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 1.38)),
to (shade (@selected_bg_color, 1.22)));
border-style: solid;
border-width: 1px;
-unico-border-gradient: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 1.14)),
to (shade (@selected_bg_color, 1.14)));
-unico-centroid-texture: url("assets/scrollbar_handle_vertical.png");
-unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 1.46)),
to (shade (@selected_bg_color, 1.3)));
-unico-inner-stroke-width: 1px;
}
.scrollbar.slider.vertical:hover {
background-image: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 1.28)),
to (shade (@selected_bg_color, 1.02)));
border-style: solid;
border-width: 1px;
-unico-border-gradient: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 0.94)),
to (shade (@selected_bg_color, 0.94)));
-unico-centroid-texture: url("assets/scrollbar_handle_vertical.png");
-unico-inner-stroke-gradient: -gtk-gradient (linear, left top, right top,
from (shade (@selected_bg_color, 1.36)),
to (shade (@selected_bg_color, 1.1)));
-unico-inner-stroke-width: 1px;
}
.scrollbar.slider.horizontal,
.scrollbar.button.horizontal {
background-image: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 1.38)),
to (shade (@selected_bg_color, 1.22)));
-unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 1.14)),
to (shade (@selected_bg_color, 1.14)));
-unico-centroid-texture: url("assets/scrollbar_handle.png");
-unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 1.46)),
to (shade (@selected_bg_color, 1.3)));
}
.scrollbar.slider.horizontal:hover {
background-image: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 1.28)),
to (shade (@selected_bg_color, 1.02)));
-unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 0.94)),
to (shade (@selected_bg_color, 0.94)));
-unico-centroid-texture: url("assets/scrollbar_handle.png");
-unico-inner-stroke-gradient: -gtk-gradient (linear, left top, left bottom,
from (shade (@selected_bg_color, 1.36)),
to (shade (@selected_bg_color, 1.1)));
}
.scrollbar.button,
.scrollbar.button:insensitive {
-unico-outer-stroke-width: 0;
}
This should be default.
For GTK 2 applications modify:
gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc
starting from line 223 so that it looks like:
style "scrollbar" = "button" {
xthickness = 2
ythickness = 2
bg[NORMAL] = shade(1.3, @selected_bg_color)
bg[PRELIGHT] = shade (1.04, @selected_bg_color)
bg[ACTIVE] = shade (0.96, @selected_bg_color)
engine "murrine"
{
border_shades = {1.15, 1.1}
roundness = 20
contrast = 1.0
trough_shades = {0.92, 0.98}
lightborder_shade = 1.3
glowstyle = 5
glow_shade = 1.02
gradient_shades = {1.2, 1.0, 1.0, 0.86}
trough_border_shades = {0.9, 0.98}
}
}
It does not look 100% identical to the GTK 3 formatting, so feel free to improve it.
Make scrollbars clickable (increase width)
To increase the silly small width that were never meant for being used in production, I assume, make the following changes to the same files.
For GTK 3 applications:
gksu gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-widgets.css
modify line 1550 so that it looks like:
.scrollbar {
-GtkScrollbar-has-backward-stepper: 0;
-GtkScrollbar-has-forward-stepper: 0;
-GtkRange-slider-width: 16;
border-radius: 20px;
-unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
from (shade (@bg_color, 0.74)),
to (shade (@bg_color, 0.74)));
}
For GTK 2 applications modify:
gksu gedit /usr/share/themes/Ambiance/gtk-2.0/gtkrc
modify line 34 so that it looks like:
GtkScrollbar::slider-width = 16
For those preferring the complete files already edited, you can download mine from here:
GTK 3: gtk-widgets.css
GTK 2: gtkrc
Be careful. Make backups.
Enjoy! :)