Wednesday, May 1, 2024
Homepage · 12.04
 Popular · Latest · Hot · Upcoming
4
rated 0 times [  4] [ 0]  / answers: 1 / hits: 13246  / 2 Years ago, sun, february 20, 2022, 11:53:54

I know many people have complained about the almost invisible and not usable scrollbars in recent versions of Ubuntu, even after removing or disabling the default overlay scrollbars. I wonder how can I easily change their color AND width.



I have a 13.3 inches monitor with a 1600*900 resolution and I can barely see them, as you can see in these images:



http://placerdigital.net/up/Dropbox_003.png



http://placerdigital.net/up/Nuvola.png



http://placerdigital.net/up/Ubuntu%20Software%20Center_004.png



I already changed Firefox, LibreOffice and some other software's scrollbars using GNOME Color Chooser:



enter image description here



By the way, I'm using Unity. Thanks!


More From » 12.04
 Answers
6

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! :)


[#35367] Monday, February 21, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ainubt
Add To Favorites
Follow
Total Points: 496
Total Questions: 98
Total Answers: 126
Location: Sao Tome and Principe
Member since Wed, Dec 21, 2022
1 Year ago
;