How to create my own scrollbar?

Friedrich · 2021-09-24 12:45:18

Hi,

i want to create my own scrollbar but i don't want to change the complete greybird theme. When i search for an other theme here https://www.xfce-look.org/browse/ for the most themes there isn't a screenshot or a screenshot without the scrollbar.

Is there a howto where i can find information about how i can create my own scrollbar?

friedrich

ToZ · 2021-09-24 16:46:08

Friedrich wrote:

Is there a howto where i can find information about how i can create my own scrollbar?

https://gnome.pages.gitlab.gnome.org/gt … llbar.html has some detail about GTK3 scrollbar - including the CSS classes. You can adjust these classes to make changes to the existing scrollbar.

Here is how Greybrid configures it's scrollbars (note that there are extra configs related to overlay functionality):

/************** Scrollbars * */
scrollbar { background-image: linear-gradient(to right, #e8e8e8, white); transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

*, headerbar.selection-mode .subtitle:link, .selection-mode.titlebar:not(headerbar) .subtitle:link { -GtkScrollbar-has-backward-stepper: false; -GtkScrollbar-has-forward-stepper: false; }

scrollbar.top { border-bottom: 1px solid #dbdbdb; }

scrollbar.bottom { border-top: 1px solid #dbdbdb; }

scrollbar.left { border-right: 1px solid #dbdbdb; }

scrollbar.right { border-left: 1px solid #dbdbdb; }

scrollbar:backdrop { background-color: #c6c6c6; border-color: #dbdbdb; transition: 200ms ease-out; }

scrollbar slider { min-width: 7px; min-height: 7px; margin: 3px; border: 1px solid #828282; border-radius: 10px; background-clip: padding-box; background-image: linear-gradient(to right, #dbdbdb, #d1d1d1); }

scrollbar slider:hover { background-image: linear-gradient(to right, #c1c1c1, #cbcbcb); }

scrollbar slider:hover:active { background-color: #1a74d3; }

scrollbar slider:backdrop { background-color: white; }

scrollbar slider:disabled { background-color: transparent; }

scrollbar.fine-tune slider { min-width: 4px; min-height: 4px; }

scrollbar.fine-tune.horizontal slider { border-width: 5px 4px; }

scrollbar.fine-tune.vertical slider { border-width: 4px 5px; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering) { border-color: transparent; opacity: 0.4; background-color: transparent; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider { margin: 0; min-width: 6px; min-height: 6px; background-color: shade(#3c3c3c, 0.9); background-image: none; border: 1px solid white; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering) button { min-width: 5px; min-height: 5px; background-color: shade(#3c3c3c, 0.9); background-image: none; background-clip: padding-box; border-radius: 100%; border: 1px solid white; -gtk-icon-source: none; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider { margin: 0 2px; min-width: 40px; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button { margin: 1px 2px; min-width: 5px; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider { margin: 2px 0; min-height: 40px; }

scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button { margin: 2px 1px; min-height: 5px; }

scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering { opacity: 0.8; }

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

scrollbar.vertical slider { min-height: 40px; }

scrollbar button { padding: 0; min-width: 12px; min-height: 12px; border-style: none; border-radius: 0; transition-property: min-height, min-width, color; border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #cecece; }

scrollbar button:hover { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #595959; }

scrollbar button:active, scrollbar button:checked { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: #1a74d3; }

scrollbar button:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(206, 206, 206, 0.2); }

scrollbar button:backdrop { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: white; }

scrollbar button:backdrop:disabled { border-color: transparent; background-color: transparent; background-image: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; -gtk-icon-shadow: none; color: rgba(255, 255, 255, 0.2); }

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

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

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

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

Friedrich · 2021-09-26 08:42:32

at the end i could create my own scrollbar. but i had to logout/login after every change in the ~/.config/gtk-3.0/gtk.css file. can i use teh new config without logout?

ToZ · 2021-09-26 10:18:36

You could test it using the Gtk Inspector and an application like mousepad or thunar, and when you are happy with it, save the contents to ~/.config/gtk-3.0/gtk.css and logout out and back in again only once for all components to use the new configuration.

Friedrich · 2021-09-27 15:08:04

i will test this.

can i increase the stepper speed? one click on the stepper only moves one line up or down. holding down the button does not help. the stepper moves more then one line when i press the right mouse button. as i can remember from the time i used mate desktop (that uses stepper by default) its the other way round (left = fast, right = slow).

Xfce Forum

Sub domains

#1 2021-09-24 12:45:18

How to create my own scrollbar?

#2 2021-09-24 16:46:08

Re: How to create my own scrollbar?

#3 2021-09-26 08:42:32

Re: How to create my own scrollbar?

#4 2021-09-26 10:18:36

Re: How to create my own scrollbar?

#5 2021-09-27 15:08:04

Re: How to create my own scrollbar?

Board footer