Help with CSS for scrollbar adjustment

General Help
1

Hello, I am a completely new Linux user and after looking at a few OS distros decided that Zorin could be a good fit coming from Windows.

However, I am attempting to figure out how to customize a few things, the most important being adjusting the scrollbars to be incremental and perhaps wider.

I understand that there may be a way to modify the CSS files and some help forums for recommend adjusting this setting in a file under /user/share/themes folder. However, the CSS file found there only says the following:

/*

  • Default keybinding set. Empty because it is implemented inline in the code.
    */

Other topics on the Zorin Forum recommend attempting to modify a file found at ~/.config/gtk-3.0/gtk.css

However, I cannot even find this directory. If I can find the appropriate CSS file, I am pretty sure I can make the necessary adjustments, but do not know where to look.

Thanks for any advice!

2

This is the correct place to go- However a gtk.css file will not necessarily be placed in that directory unless the user creates one. So, you should have a gtk-3.0 folder in your home ~/.config directory already. Open your File Manager, hit ctrl+h to show hidden files (Those with a . before the name) OR you can select "show hidden" from the drop down menu of "View".
Open .config and scroll down to gtk-3.0, open it and create a new text document named gtk.css.

The reason why this is the route to go: Yes, you certainly can modify an existing theme gtk.css file, but putting your code in an independent file protects your existing gtk.css from mistakes, typoes and changes and allows you fast and easy access to the modifications.
The system gives priority of preference, so when you load a theme, it checks that file first, then your home themes folder ~/.themes, then checks /usr/share/themes.

Hopefully that helps as a quick crash course on the system. Let's look at modifying your gtk.css file for Scroll bars.
In gtk.css, if you use steppers, the engine calls on the gtk button node. The width of the buttons will be affected by the more general button width, so if you want to isolate the width of scrollbar stepper buttons, you can use the "min-width" and "min-height"

scrollbar {
-GtkScrollbar-has-backward-stepper: true;
-GtkScrollbar-has-forward-stepper: true;
-GtkScrollbar-fixed-slider-length: false; }

For example:

scrollbar.vertical button.down {
-gtk-icon-source: none;
min-width: 8px;
min-height: 8px; }

You can set the icon source to a file if you like. But it is best to qualify "none" in there if you do not specify a file (i.e., don't leave it out entirely), otherwise the engine defaults to the inherited theme that has a qualifier.

The same applies to your scrollbar trough and scrollbar slider. You can also use padding.

scrollbar.vertical slider {
min-height: 92px; }
scrollbar.horizontal slider {
min-width: 92px; }

Hope this helps you get in and modify as needed.

1 Like