It would be great if the close, maximise and minimise icons in the window titlebar would have the same height as the titlebar

[Codrut1001]

I love Zorin OS, I've been using It on my HP touchscreen laptop for a while. And It's great, the gestures work well and It's a really smooth and nice experience.

But one of the most used features, which is closing a window, is really annoying on a touchscreen device. The title bar buttons are small circles that are very hard to press the first try.

In my opinion, It would be amazing if these buttons would take up the entire height of the title-bar, removing that margin, and just making the buttons square or something like that. Similar to Windows 11. Or at least a option/theme that would allow for this to happen.

And I also think this design would be more consistent with the UI generally. System dialogs, like the Power Off one also use this design for the buttons, with just the exception that the buttons are on the bottom of the dialog. This dialog also has one button red, so the X button on the title-bar could also have this color, like MacOS and Windows have.

But this is just a personal feedback of mine. Thoughts?

[zenzen]

Hi, and welcome!

This has been proposed by others as well, so you're not alone. At the moment, there are only workarounds to this issue, but hopefully this will be implemented in upcoming releases, at least as an optional setting.

Please take a look at these threads:

Clicking at the top right corner pixel of the screen doesn't close the window

Dear all, First of all : What a beautiful distribution. Oh god, thanks for this. Then, I'm a bit surprised of one thing : Usually, I close a window by clicking at the top right corner pixel of the screen. However, on ZorinOS Core 16 (Gnome), it does not work, as there is a little space / margin between the close button and the border of the screen. Is there a way to make this little space / margin clickable in order to close the window ? Thanks very much for your kind help

Title bar button theme change request (to improve UX)

What's the problem? Zorin OS markets itself as being familiar, which for me means "similar to Windows". It does a great job of this, but there is one small bit of UX that seems to have been overlooked which I sorely miss. The title bar buttons in Zorin OS are too small in comparison to Windows. This means that when a window is maximised, moving the cursor to the top right corner does not hover over the Close button like it does in Windows. This is quite annoying as whenever I close a window I f…

[Ponce-De-Leon]

Welcome to the Forum!

A Theme what have that as a Tweak Option is the Qogir Theme:

GitHub - vinceliuice/Qogir-theme: Qogir is a flat Design theme for GTK

[Codrut1001]

I was able to find a great method of styling the buttons how I want them. And I've made a shell script that helps editing this custom style:

The file is edit_titlebar_style.sh

#!/bin/bash

# Edit
nano  ~/.config/gtk-4.0/gtk.css

# Copy
cp  ~/.config/gtk-4.0/gtk.css ~/.config/gtk-3.0/gtk.css
cp ~/.config/gtk-4.0/gtk.css ~/.config/gtk-2.0/gtk.css

# Log out (Gnome Shell 10.04)
dbus-send --session --type=method_call --print-reply --dest=org.gnome.SessionManager /org/gnome/SessionManager org.gnome.SessionManager.Logout uint32:1

It basically just edits a file, copies the file to all gtk versions and then kills the shell.

Here is my custom style I designed:

window.csd headerbar {
  padding-right: 0;
}

.titlebutton {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  margin-left: -5px;
}
.titlebutton.close {
  border-radius: 0 8px 0 0;
  color: white;
  background-color: rgb(255, 0, 0);
  background-image: linear-gradient(to right, red , rgb(255,175,175));
  transition: all .2s ease-in-out;
}
.titlebutton.close:hover {
  background-color: rgb(255, 100, 100);
  background-image: none;
}
.titlebutton.close:active {
  background-color: rgb(255, 0, 0);
  background-image: none;
}
.titlebutton.maximize {
  border-radius: 0;
}
.titlebutton.minimize {
  border-radius: 0 0 0 8px;
}

window.maximized .titlebutton {
  min-width: 44px;
  min-height: 100%;
  padding: 0;
  margin: 0;
  margin-left: -5px;
}
window.maximized .titlebutton.close{
  border-radius: 0;
}

It's just plain CSS, so you may customize It how you feel fit.

Here is how the style looks:

Personally, I really like this style, but you can easily edit It to any other you like. Have fun!