How to change window Border Size / colour

General Help
1

I see this question that is related; but I am not familiar with what XFCE is.

Q:

I have a bunch of bland grey windows in my Zorin 17.3 Pro ; and often I can't easily distinguish between them, partly because they're bland grey and partly because they have a slight transparency (~85% solid I think).

The transparency I want to retain because in other contexts it works.

BUT:

I want to give these grey windows a stronger border so my eye can easily distinguish which window is which ; I envisage eg such as a dark blue RGB/0/0/66 or similar. But I want to have to play around and see what works for my desktop.

Aims:

  • Adjust border size for desktop windows.
  • Adjust border colour for desktop windows.

How do I do this?

I have dconf editor but the search function on that isn't showing me anything relevant.

2

XFCE is the desktop environment of Zorin lite, in Zorin Pro the desktop environment is Gnome. Gnome uses by default a different window manager than XFCE. in Gnome, the border color and border thickness are determined by the gtk theme. You can edit the css file of your theme.
I'm not that familiar with it, but maybe something like this will help you:

https://www.reddit.com/r/gnome/comments/6dvrf6/adding_colored_window_borders_in_gnome_arch/

1 Like
3

dconf is not enough. It requires some .css coding to do that. Every theme has its own .css file. Find the theme you want to edit/hack and explorer the possibilities.

1 Like
4

I am currently using the default Zorin theme I think.

5

I am not on Gnome to test this, but I believe that a non-shell theme will still respond to a Custom .css entry placed in ~/.config/gtk-3.0 and ~/.config/gtk-4.0

You can name the file gtk.css

Your content will depend on your preferences but here is a template we can start with. The color values must be matched to suit (I do not have a copy of a light Zorin theme handy to reference them, but you do so we can compare):

decoration, headerbar,
.titlebar {
  background-color: #adadad;
  color: #212121;
}
decoration:backdrop, headerbar:backdrop,
.titlebar:backdrop {
  background-color: #b0b0b0;
  color: #000;
  border: 1px solid #000;
}