Download | Devuan.org | Git | Bugs | Packages

The officially official Devuan Forum!

You are not logged in.

Pages: 1

#1 2018-03-20 20:05:06

GNUser
Member
Registered: 2017-03-16
Posts: 570  

how to force scrollbar buttons on all desktop themes [SOLVED]

All nice-looking themes these days seem to think that scrollbar buttons are obsolete. Old habits die hard, and the UI designer masterminds are going to have to rip my scrollbar buttons from my cold dead hands.

I came up with a solution that gives me a nice scrollbar with buttons regardless of selected theme. By putting the code below in ~/.config/gtk-3.0/gtk.css I can have the same exact, traditional scrollbar across all themes available on my machine:

@define-color scrollbar_theme_fg_color #000000; 
@define-color scrollbar_theme_bg_color #eeeeee;  
@define-color scrollbar_core_color_b #eeeeee;
@define-color scrollbar_insensitive_fg_color shade(@scrollbar_core_color_b, 0.70);
@define-color scrollbar_internal_element_insensitive_color @scrollbar_insensitive_fg_color;
@define-color scrollbar_theme_text_color #000000;

/* junction */

@define-color scrollbars_junction_bg_color @scrollbar_theme_bg_color;

/* trough */

@define-color scrollbar_trough_border_color shade(@scrollbar_core_color_b, 0.67);

@define-color scrollbar_trough_gradient_a shade(@scrollbar_core_color_b, 0.86);
@define-color scrollbar_trough_gradient_b shade(@scrollbar_core_color_b, 0.90);

/* slider */

@define-color scrollbar_slider_bg_color shade(@scrollbar_core_color_b, 1.03);

@define-color scrollbar_slider_gradient_a @scrollbar_slider_bg_color;
@define-color scrollbar_slider_gradient_b shade(@scrollbar_core_color_b, 0.98);
@define-color scrollbar_slider_gradient_c shade(@scrollbar_core_color_b, 0.94);
@define-color scrollbar_slider_gradient_d shade(@scrollbar_core_color_b, 0.88);

@define-color scrollbar_slider_border_color mix(#000000, shade(@scrollbar_core_color_b, 0.72), 0.95);

@define-color scrollbar_slider_inner_border_color shade(@scrollbar_core_color_b, 1.04);

/* slider hover */

@define-color scrollbar_slider_hover_bg_color shade(#5294e2, 1.03); /* customize mouse hover color by changing #5294e2 to your desired color */

@define-color scrollbar_slider_hover_gradient_a @scrollbar_slider_hover_bg_color;
@define-color scrollbar_slider_hover_gradient_b shade(@scrollbar_core_color_b, 1.00);
@define-color scrollbar_slider_hover_gradient_c shade(@scrollbar_core_color_b, 0.98);
@define-color scrollbar_slider_hover_gradient_d shade(@scrollbar_core_color_b, 0.96);

/* button */

@define-color scrollbar_button_color @scrollbar_theme_fg_color;
@define-color scrollbar_button_insensitive_color @scrollbar_internal_element_insensitive_color;
@define-color scrollbar_button_border_color shade(@scrollbar_core_color_b, 0.56);

@define-color scrollbar_button_gradient_a shade(@scrollbar_core_color_b, 1.07);
@define-color scrollbar_button_gradient_b shade(@scrollbar_core_color_b, 1.02);
@define-color scrollbar_button_gradient_c shade(@scrollbar_core_color_b, 0.99);
@define-color scrollbar_button_gradient_d shade(@scrollbar_core_color_b, 0.95);

/* button hover */

@define-color scrollbar_button_hover_gradient_a shade(@scrollbar_core_color_b, 1.07);
@define-color scrollbar_button_hover_gradient_b shade(@scrollbar_core_color_b, 1.05);
@define-color scrollbar_button_hover_gradient_c shade(@scrollbar_core_color_b, 1.02);
@define-color scrollbar_button_hover_gradient_d shade(@scrollbar_core_color_b, 0.97);

/* button active */

@define-color scrollbar_button_active_gradient_a shade(@scrollbar_core_color_b, 0.95);
@define-color scrollbar_button_active_gradient_b shade(@scrollbar_core_color_b, 0.92);
@define-color scrollbar_button_active_gradient_c shade(@scrollbar_core_color_b, 0.89);
@define-color scrollbar_button_active_gradient_d shade(@scrollbar_core_color_b, 0.85);

scrollbar {
    background-image: none;
    border-style: solid;
    border-color: @scrollbar_trough_border_color;
    -GtkScrollbar-has-backward-stepper: true;
    -GtkScrollbar-has-forward-stepper: true;
    box-shadow: none;
    border-image: none;
}

scrollbar.vertical {
    border-width: 0px 0px 0px 1px;
    min-width: 14px;
}

scrollbar.horizontal {
    border-width: 1px 0px 0px 0px;
    min-height: 14px;
}

scrollbar trough {
    border-style: solid;
    border-color: @scrollbar_trough_border_color;
}

scrolledwindow junction {
    background-image: none;
    background-color: @scrollbars_junction_bg_color;
}

scrollbar.horizontal trough {
    min-height: 14px;
    border-radius: 0px;
    border-width: 0px 1px 0px 1px;
    border-image: none;
    background-image: -gtk-gradient (linear,
                      left top,
                      left bottom,
                      color-stop (0, @scrollbar_trough_gradient_a),
                      color-stop (0.5, @scrollbar_trough_gradient_b));
}

scrollbar.vertical trough {
    min-width: 14px;
    border-radius: 0px;
    border-width: 1px 0px 1px 0px;
    border-image: none;
    background-image: -gtk-gradient (linear,
                      left top,
                      right top,
                      color-stop (0, @scrollbar_trough_gradient_a),
                      color-stop (0.5, @scrollbar_trough_gradient_b));
}

/* Buttons */
scrollbar.vertical button,
scrollbar.vertical .button {
    min-width: 14px;
    min-height: 16px;
    padding: 1px 0px;
}

scrollbar.horizontal button,
scrollbar.horizontal .button {
    min-width: 16px;
    min-height: 14px;
    padding: 0px 1px;
}

scrollbar.vertical button.up,
scrollbar.vertical .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-up-symbolic");
}

scrollbar.vertical button.down,
scrollbar.vertical .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
}

scrollbar.horizontal button.up,
scrollbar.horizontal .button.up {
    -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
}

scrollbar.horizontal button.down,
scrollbar.horizontal .button.down {
    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
}

scrollbar button,
scrollbar .button {
    border-image: none;
    border-style: none;
    border-width: 0px;
    border-radius: 0px;
    background-image: none;
    background-color: transparent;
    color: @scrollbar_theme_text_color;
    border-style: solid;
    border-color: transparent;
}

scrollbar button:hover,
scrollbar .button:hover {
    border-image: none;
    border-style: none;
    border-width: 0px;
    border-radius: 0px;
}

scrollbar button:disabled,
scrollbar .button:disabled {
    color: @scrollbar_button_insensitive_color;
    border-image: none;
    border-style: none;
    border-width: 0px;
    border-radius: 0px;
}

scrollbar.horizontal button,
scrollbar.horizontal .button {
    background-image: -gtk-gradient (linear,
                      left top,
                      left bottom,
                      from (@scrollbar_button_gradient_a),
                      to (@scrollbar_button_gradient_d));
}

scrollbar.horizontal button:hover,
scrollbar.horizontal .button:hover {
    background-image: -gtk-gradient (linear,
                      left bottom,
                      left top,
                      from (@scrollbar_button_hover_gradient_a),
                      to (@scrollbar_button_hover_gradient_d));
}

scrollbar.horizontal button:hover:active,
scrollbar.horizontal .button:hover:active {
    background-image: -gtk-gradient (linear,
                      left top,
                      left bottom,
                      from (@scrollbar_button_active_gradient_a),
                      to (@scrollbar_button_active_gradient_d));
}

scrollbar.vertical button,
scrollbar.vertical .button {
    background-image: -gtk-gradient (linear,
                      left top,
                      left bottom,
                      from (@scrollbar_button_gradient_a),
                      to (@scrollbar_button_gradient_d));
}

scrollbar.vertical button:hover,
scrollbar.vertical .button:hover {
    background-image: -gtk-gradient (linear,
                      left top,
                      left bottom,
                      from (@scrollbar_button_hover_gradient_d),
                      to (@scrollbar_button_hover_gradient_a));
}

scrollbar.vertical button:hover:active,
scrollbar.vertical .button:hover:active {
    background-image: -gtk-gradient (linear,
                      left top,
                      right top,
                      from (@scrollbar_button_active_gradient_a),
                      color-stop (0.50, @scrollbar_button_active_gradient_b),
                      color-stop (0.50, @scrollbar_button_active_gradient_c),
                      to (@scrollbar_button_active_gradient_d));
}

scrollbar.vertical slider,
scrollbar.vertical .slider {
    min-width: 14px;
    min-height: 42px;
    margin: 0px -1px 0px -1px;
}

scrollbar.horizontal slider,
scrollbar.horizontal .slider {
    min-width: 42px;
    min-height: 14px;
    margin: -1px 0px -1px 0px;
}

scrollbar slider,
scrollbar .slider {
    background-color: @scrollbar_slider_bg_color;
    background-image: none;
    border-radius: 0;
    border-style: solid;
    border-image: none;
    border-color: @scrollbar_slider_border_color;
    border-width: 1px;
}

scrollbar slider:hover,
scrollbar .slider:hover {
    background-color: @scrollbar_slider_hover_bg_color;
}

scrollbar slider {
    background-repeat: no-repeat;
    background-position: center center;
}

scrollbar.vertical slider {
    background-image: linear-gradient(to right,
                          alpha (@scrollbar_slider_inner_border_color, 0.5),
                          alpha (@scrollbar_slider_gradient_a, 0.5) 1px,
                          alpha (@scrollbar_slider_gradient_b, 0.5) 50%,
                          alpha (@scrollbar_slider_gradient_c, 0.5) 50%,
                          alpha (@scrollbar_slider_gradient_d, 0.5) 95%,
                          alpha (@scrollbar_slider_inner_border_color, 0.5)),
                      url("/opt/scripts/media/scrollbar/slider-vert-grip.png");
}

scrollbar.horizontal slider {
    background-image: linear-gradient(to bottom,
                          alpha (@scrollbar_slider_inner_border_color, 0.5),
                          alpha (@scrollbar_slider_gradient_a, 0.5) 1px,
                          alpha (@scrollbar_slider_gradient_b, 0.5) 50%,
                          alpha (@scrollbar_slider_gradient_c, 0.5) 50%,
                          alpha (@scrollbar_slider_gradient_d, 0.5) 95%,
                          alpha (@scrollbar_slider_inner_border_color, 0.5)),
                      url("/opt/scripts/media/scrollbar/slider-horz-grip.png");
}

scrollbar.vertical slider:hover {
    background-image: linear-gradient(to right,
                          alpha (@scrollbar_slider_inner_border_color, 0.5),
                          alpha (@scrollbar_slider_hover_gradient_a, 0.5) 1px,
                          alpha (@scrollbar_slider_hover_gradient_b, 0.5) 50%,
                          alpha (@scrollbar_slider_hover_gradient_c, 0.5) 50%,
                          alpha (@scrollbar_slider_hover_gradient_d, 0.5) 95%,
                          alpha (@scrollbar_slider_inner_border_color, 0.5)),
                      url("/opt/scripts/media/scrollbar/slider-vert-grip.png");
}

scrollbar.horizontal slider:hover {
    background-image: linear-gradient(to bottom,
                          alpha (@scrollbar_slider_inner_border_color, 0.5),
                          alpha (@scrollbar_slider_hover_gradient_a, 0.5) 1px,
                          alpha (@scrollbar_slider_hover_gradient_b, 0.5) 50%,
                          alpha (@scrollbar_slider_hover_gradient_c, 0.5) 50%,
                          alpha (@scrollbar_slider_hover_gradient_d, 0.5) 95%,
                          alpha (@scrollbar_slider_inner_border_color, 0.5)),
                      url("/opt/scripts/media/scrollbar/slider-horz-grip.png");
}

/*********************
 * GtkScale's slider *
 *********************/
 
scale slider,
scale.horizontal slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz.png");
}

scale slider:hover,
scale.horizontal slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-hover.png");
}

scale slider:disabled,
scale.horizontal slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-insensitive.png");
}

scale.vertical slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert.png");
}

scale.vertical slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-hover.png");
}

scale.vertical slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-insensitive.png");
}

scale.horizontal.marks-before slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz.png");
}

scale.horizontal.marks-before slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-hover.png");
}

scale.horizontal.marks-before slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-insensitive.png");
}

scale.vertical.marks-before slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert.png");
}

scale.vertical.marks-before slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-hover.png");
}

scale.vertical.marks-before slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-insensitive.png");
}

scale.horizontal.marks-after slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz.png");
}

scale.horizontal.marks-after slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-hover.png");
}

scale.horizontal.marks-after slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-horz-insensitive.png");
}

scale.vertical.marks-after slider {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert.png");
}

scale.vertical.marks-after slider:hover {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-hover.png");
}

scale.vertical.marks-after slider:disabled {
    background-image: url("/opt/scripts/media/scrollbar/scale-slider-vert-insensitive.png");
}

Hopefully the above will work for you with only minimal alteration. The only thing you need to do for sure is get the few image files that are required (you can get them from my file storage here: http://files.dantas.airpost.net/public/scrollbar.tar.gz) and change every instance of /opt/scripts/media/scrollbar in the above code to where you put the image files on your system.

Enjoy!

P.S. It seems excessive to need so many lines of code for just a scrollbar, but I guess gtk programmers are not into golfing. (I fished out the code from a theme that gave me the scrollbar I wanted, so I'm not to blame for the verboseness smile)

Last edited by GNUser (2018-03-27 21:59:11)

Offline

#2 2018-03-20 21:40:24

golinux
Administrator
Registered: 2016-11-25
Posts: 3,318  

Re: how to force scrollbar buttons on all desktop themes [SOLVED]

I'm not sure quite what you're talking about.  But if it is those maddening disappearing scrollbars . . . I went through that doing the clearlooks-phenix-darkpurpy theme for ASCII.   This thread on the Xfce forum got me to a solution which is here.  If you're talking about something else, excuse the noise.   I think it's just a different way of skinning the cat.

Get answers - Help Devuan - Report a bug - Search packages

Offline

#3 2018-03-20 23:17:33

GNUser
Member
Registered: 2017-03-16
Posts: 570  

Re: how to force scrollbar buttons on all desktop themes [SOLVED]

I think it's a slightly different issue. The issue I'm having is that all of the recently-created themes I downloaded (e.g., from gnome-look.org) have only a skinny "modern" scrollbar without scrollbar buttons. Just forcing these themes to show the scrollbar buttons by changing "has-backward-stepper" and "has-forward-stepper" to true in the theme's css files is not satisfactory, as scrollbar buttons do show up but both the scrollbar and the buttons look weird because the themes do not include a design for the buttons.

My solution is a complete, traditional scrollbar-with-buttons design that overrides whatever scrollbar is specified in the selected theme.

Just to clarify: I was able to solve my problem. I created the thread only in the hope that my solution may be useful to others who want to use a modern theme but override its vestigial toolbar with something more traditional.

Last edited by GNUser (2018-03-21 02:24:12)

Offline

#4 2018-03-27 20:13:16

xunilog
Member
Registered: 2016-12-05
Posts: 26  

Re: how to force scrollbar buttons on all desktop themes [SOLVED]

GNUser, I thank you for sharing the solution. I had wrestled as far as  has-backward-stepper=true and has-forward-stepper=true but got lost in the weeds...

Offline

#5 2018-03-27 22:07:22

GNUser
Member
Registered: 2017-03-16
Posts: 570  

Re: how to force scrollbar buttons on all desktop themes [SOLVED]

xunilog, I'm really happy you found my hack to be useful smile

BTW, I added a comment to the above code to show what to change if you wish to customize the color of the scrollbar when you hover over it with the mouse. Search for "customize mouse hover color".

Offline

#6 2018-04-17 03:18:20

GNUser
Member
Registered: 2017-03-16
Posts: 570  

Re: how to force scrollbar buttons on all desktop themes [SOLVED]

I realize that my hack only works for gtk3 applications. A lazy way to customize scrollbar for gtk2 applications is to just use all of a different theme's gtk2 settings (see post #10 here: https://dev1galaxy.org/viewtopic.php?pid=8432#p8432).

If anyone knows a more elegant solution, please share. Alas, after tinkering for several hours I can't seem to find a way to override just the scrollbar component of a theme's gtk2 settings.

Last edited by GNUser (2018-04-17 03:19:09)

Offline

Pages: 1

Board footer

Forum Software