How to edit the width of scrollbars in GTK themes?

I’m a KDE user and don’t know much on GTK Themes and their tweaks. It’s frustrating having the scroll-bar so thin on Pamac and other GTK based applications!!

I took a look at the code of some themes and it’s filled with many versions of GTK and lots of code, I don’t even know where to look at.

If you are not familiar with CSS, any advice here will be quite pointless. :slight_smile:
Depending if you are using dark or white themes, there are some workarounds by using a more complete and functional theme, that doesn’t have the scroll-bars thin.
For a unified look in KDE Plasma and GTK+ applications, there are only a few themes that play together and look nice.
Probably you can explain more what themes are you using, and someone will propose an alternative.
You could create ~/.config/gtk-3.0/gtk.css with this:

.scrollbar,
scrollbar {
-GtkScrollbar-has-backward-stepper: 1;
-GtkScrollbar-has-forward-stepper: 1;
}

scrollbar slider {
background-color: @scrollbar_track_color;
}

.scrollbar.vertical slider,
scrollbar.vertical slider {
    min-height: 150px;
    min-width: 70px;
}

.scrollbar.horizontal.slider,
scrollbar.horizontal slider {
min-width: 40px;
min-height: 10px;
}

.scrollbar.vertical.slider:hover,
scrollbar.vertical:hover slider {
min-width: 70px;
}

.scrollbar.horizontal.slider:hover,
scrollbar.horizontal:hover slider {
    min-height: 10px;
}

.scrollbar.contents,
scrollbar contents {
    background-color: transparent;
    background-image: none;
    background-size: 0;
    border: none;
    border-radius: 0;
}

.scrollbar.trough,
scrollbar trough {
    background-image: none;
    border: none;
}

.scrollbar:hover:backdrop,
.scrollbar.dragging:backdrop,
scrollbar:hover:backdrop,
scrollbar.dragging:backdrop {
    background-color: alpha(@backdrop_selected_bg_color, 0.5);
}


.scrollbar.vertical:hover:dir(ltr),
.scrollbar.vertical:active:dir(ltr),
scrollbar.vertical:hover:dir(ltr),
scrollbar.vertical:active:dir(ltr) {
    margin-left: 0px;
}

.scrollbar.vertical:hover:dir(rtl),
.scrollbar.vertical:active:dir(rtl),
scrollbar.vertical:hover:dir(rtl),
scrollbar.vertical:active:dir(rtl) {
    margin-right: 0px;
}

.scrollbar.horizontal:hover,
.scrollbar.horizontal:active,
scrollbar.horizontal:hover,
scrollbar.horizontal:active {
    margin-top: 0px;
}

.scrollbar.slider,
scrollbar slider {
    background-color: alpha(@backdrop_filling_bg, 0.75);
    border-radius: 10px;
}

.scrollbar.slider:hover,
.scrollbar.slider:active,
scrollbar slider:hover,
scrollbar slider:active {
    border-radius: 20px;
    margin: 0;
}


.scrollbar.vertical:dir(ltr):not(:hover):not(.dragging),
scrollbar.vertical:dir(ltr):not(:hover):not(.dragging) {
    margin-left: 0px;
}

.scrollbar.vertical:dir(rtl):not(:hover):not(.dragging),
scrollbar.vertical:dir(rtl):not(:hover):not(.dragging) {
    margin-right: 0px;
}

.scrollbar.horizontal:not(:hover):not(.dragging),
scrollbar.horizontal:not(:hover):not(.dragging) {
    margin-top: 0px;
}


.scrollbar.slider:hover,
scrollbar slider:hover {
    background-color: alpha(@backdrop_filling_bg, 0.6);
}

.scrollbar.slider:active,
scrollbar slider:active {
    background-color: @backdrop_filling_bg;
}

.scrollbar.slider:backdrop,
scrollbar slider:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.75);
}

.scrollbar.slider:hover:backdrop,
scrollbar slider:hover:backdrop {
    background-color: alpha(@backdrop_filling_bg, 0.6;
}

.scrollbar.slider:active:backdrop,
scrollbar slider:active:backdrop {
    background-color: @backdrop_filling_bg;
}

scrollbar {
    min-width: 70px;
    min-height: 70px;
}

and for gtk2 /.config/gtk-2.0/gtkrc

style "scroll"
{
 GtkScrollbar::slider-width = 70
}

this will make the scroll-bars quite big, so play with the value 70 and reduce it as you like …

1 Like

I’m currently using Oomox to create my own GTK colored themes.

  1. I made some Numix based themes, they work good on all GTK-3 based applications.

  2. When exporting the theme I checked on all given options. Even the one reading:
    “Generate theme only for the current GTK+3 version instead of both 3.18 and 3.20+”

  3. The newly created Oomox themes are located on:
    /home/user/.themes/

  4. On each Oomox theme, Oomox created nine main folders. Each theme comes with: a gtk-3.0 and a gtk-3.20 folders

  5. Both folders have gtk-dark.css and gtk.css files

  6. On /home/user/.config/gtk-3.0/
    I have two files: bookmarks and settings.ini

If I add your code directly to the newly created Oomox themes then the changes will only be for those specific themes right?
And if I add your code to the place you mentioned it will be a universal tweak regardless of what theme I choose right?

Do not edit the themes you created, those files i mentioned will be your personal settings, and can be removed much easy if not needed. Personally i think the most complete and best “engine” is still Materia from the three that come with Oomox. Has decent sizes and proportions for the entire layout …

I’m not sure if the code you gave me is not compatible with Numix based themes or if it’s something related to GTK-3 and different versions but I got a a weird looking scroll-bar. :no_mouth:

I’m not sure if this will work on all GTK3 versions but on GTK+3.20 this works:

.scrollbar.vertical slider,
scrollbar.vertical slider {
min-height: 150px;
min-width: 15px;
} 

The code is shorter, simple, and looks exactly like my previous scroll-bar but thicker. It only uses the needed part for the scroll-bar.

My code was not my code, and i gave it to you as an example, not to follow 100%, nor as a solution.
Custom themes are always user's responsibility.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Forum kindly sponsored by