Active window colored border in Zorin Lite

In MX Linux the active window has a blue border around the windows, inactive windows not. I´d like also to set up a custom color for the active window. How can I do this in Zorin Lite 17?

Screenshots from MX Linux:
active window:

inactive window:

Would it work to go to the xfwm4 theme which is set and replace bottom-active.png, bottom-left-active.png, bottom-right-active.png, left-active.png, right-active.png, title-1-active.png, top-left-active.png, top-right-active.png with images in the custom color? Or is there an easier way?

That is exactly how to do it.

2 Likes

I might add:
It seems like a lot, but really isn't.
Pinta or Gimp can lay over a change - then just overwrite the file. Any that match, you can just flip and diplicate.
Like if bottom-right and bottom-left are the same image, just mirrored, Export, flip it, export the other.

1 Like

I'm still struggling with GIMP. I haven't figured out how to change the color there yet, e.g. for buttom-active.

Edit: For the blue border I just downloaded the mx-matcha gtk theme from MX Linux repo on github (in addition to the matcha gtk theme by Vinceliuice, which I already had downloaded but doesn't have blue borders for the active window) and changed the style for the xfwm4 theme to mx-matcha.

But I´d like to learn how to set up any custom color.

I'm trying it on LM XFCE 21 now, but it shoud be the same as in Zorin 17 Lite. I have saved the xfwm theme in my home folder and changed ownership to me. I also wanted to change the permissions for others to read and write because I got errors when I wanted to save an edited image, but it didn't work, even not when thunar was opened as root. Always the message appeared: Permissions couldn't be changed.

And Gimp shows that the image can't be saved. Access denied.

But still didn't found out how to change the color. I went to colors > map > color exchange, and set another color there at "to color", but it doesn't change the color to teal color in the image.

Edit: I was able to change the permissions now with the terminal. I had forgotten to set the ownership recursively to my user.

Once you select your color, you must click the ok button on both of the color selection windows before it will appear on the image.
Note that the image must be displayed with RGB - you can check by the Toolbar> Image > Mode > RGB
and that it is not set to Grayscale

Also, if the brightness on the image is too high, it can wash out the color, so after selecting, it might not look as "colored" as the color picker suggested it would.
The Color Picker shows a pure color, but that color is applied in addition to the existing color of the image. If the image is black and you select teal, you won't see much change.

1 Like

Thank you very much for your help, Aravisian. The image was displayed as RGB. I don't understand the how the whole thing works and why there is shown black as old color. The image also has a white and a grey line and I don't know which one I need to change. I can't select it. And I never see a teal color when I click on ok. Only when I use the pencil it gets a teal color.
With the bottom-left or right image it is even more complicated. When I use the pencil, it makes the entire square of the image in teal color so that the corner gets lost.

I think I'll give up. Gimp is very difficult to use. Unfortunately it doesn't work well with lunapic in browser. When I changed the folder color last time, this browser app worked, but this time the images are so small.

1 Like

The Gimp 2.10 has logical flow. Gimp post 3.0 is a nightmare and I do not use it at all. They completely changed how it works and it became unintuitive.
Would you like me to create the XFWM4 theme and send it to you?

1 Like

I now tried it with Pinta and another xfwm theme (Matcha azul) which was a bit easier because the border was ony black there. Do you know what the name of the border line of the top is? It is still black and not blue. I renamed the bottom-active to top-active and saved it, but it didn´t work. There is no image with another horizontal line shown in the xfwm folder. When I tried tite-2-active it was the wrong.

That are the files in the xfwm theme:

Pinta is much easier to use, but very often crashes and closes suddenly. Maybe because of the huge zoom?

I never had Pinta crash, but I stopped using it when they switched to flatpak only.
You can get a .deb package from another supplier but...

To top part is going to be the numbered "Titlebar" images. So, they are called title-*
They are the middle portions of the titlebar.

As far as the colors; I cannot reasonably answer a lot of questions on this without trying it on my own, since that is where the majority of the information comes from - combined with knowing your intent.
Overlaying a color on top of another creates a combo of both colors.
If you want to replace a color, you can define an area, then use the color option.
OR...
Cut that area and replace with the right color.

If you can give all that detail in one post - I can open the files to look and be m ore helpful.

1 Like

Pinta is nearly unusable because of the constant crashes. It is installed as .deb from ubuntu repository. I tried to follow this guide and build from the tarball. I installed all those packages but when I run "sudo make install" I get "no rule to create install. Exit."

I now installed kolourpaint to try it with this program. I changed all title active images, but still the line at the top is missing. The color doesn´t fit to the other ones.

Show the files...

I don't understand what you mean. The images? The files you can see in the screenshot list above.

That shows file folders, not the XFWM4 images in your theme you have modified.

I`ve already replaced them with the original files. But now I seem to be on the right way. Until now I had filled the entire image with the blue color, but now I used only the separate top field of the image and changed that for all title active images. There are ony some missing now, I think I need to change the button images, too now.

I don´t know why the upper line is smaller than the other ones:

Maybe that's the theme? All sides have 2 pixel border but at the top 1 pixel?

When saving the images for the buttons, I always get warnings because of low color depth.

Please review here:

Yes, the Window Buttons must share the background of the Titlebar or the area of the titlebar that is supposed to be behind the buttons.

I make all my themes with indicators of inactive and active windows.
Sometimes the inactive window has a different border.
Sometimes, it is the window buttons that change.

But to me, it is very helpful to see which one has Focus.

If your Titlebar Image is too tall - the outer pixel of the border might be compressed - the 2 pixels becoming 1 pixel - causing that darker color it has, too.
Try shaving 1px off the bottom of title-1,2,3 and test - if that works, do the rest the same way.

1 Like

I'll try that later, thank you. The other color is because I used the other image editing software for the top border and didn't found out yet how to pick up a color or choose a custom color which is not in the offered color palette. But I haven't looked into it in detail yet.

What irritates me is that three buttons look not as before now, they have changed their background color and are no longer black. I don't like that. Perhaps that is related to the message wih the color depth.

What you are experiencing is the Frustrating Learning Curve.
When I started creating themes, I experienced it. In the .css, in the xfwm, the metacity, the mutter, the .csd...
Each operates differently and you must learn each.
It's no wonder I never branched out into Enlightenment or KDE Plasma.

What you can do is allow for the learning.

Create a copy of the folder and place it in a "test-theme" folder. Then select the Window Borders from Window Manager in settings.
Make a change, re-select the theme and observe the results - you can fine tune your learning this way.
Once you do one Window Button - all the window buttons make sense.
Then, everything gets much easier.
That moves you out of uncertain frustration and into knowledgeable tedium.

1 Like

Cutting one pixel row of the bottom of the image makes a white line:

I should shorten the image instead. It only has removed the black color.