How to scale menu, titlebar and window buttons?

[Zorunimac]

Hello all
New to Zorin Core 17. I like the OS but somthing disturbs. The menubar, the titlebar and the window buttons are very clunky (big) compared to other OS or distributions. Is there a way to make them smaler? Ubuntu Unity has a slider just inside the Display settings extra for that.

This allows you to gradually reduce the size.

This is much more pleasant on smaller displays or lager displays with standard resolutions. (e.g. FHD 27"...) And the items in Zorin are even bigger than in Unity.
How can this be implemented with Zorin os? Thank's for the Help!

[zabadabadoo]

I assume you have the new Z17 Core. I have Z16.3 Core, but should be similar.
EDIT 10/02/24 in response to @jayesh post:
Go to:
Settings>Appearance>Panel
Right click on the Taskbar
Select "Taskbar Settings"
then "Style" Tab
There you should be able to vary the "Panel Size" height setting.
The panel icons size will also change together with panel height to fit.

If Z17 Core Taskbar Settings>Style is different. Someone post a screenshot of that please.

[Storm]

[Ponce-De-Leon]

Welcome to the Forum!

You can make Adjustments in Gnome Tweaks:

[Zorunimac]

Thanks for the hints but nothing of those did what I want.
Settings>Appearance>Panel
only affects the standard Panel or Dock on the bottom, but not the menubar at the top of the screen. And the "Skalierungsfaktor" in the Gnome Tweaks only changes the size of the fonts. I would like to make the top menubar, the titlebar and the window-buttons smaller like in the example above.
Anything else I can try? Thanks!

[Ponce-De-Leon]

Theoretically You could install the Unity Desktop if You prefer them. It is in the Sources available.

[Zorunimac]

I didn't say that I prefer Unity!

If there is no implementet feature in the GUI to adjust this, then maybe this topic should be moved to the customization category?

I also found this topic

Windows titlebar icons - changing size/scale?

Well, I am a themer, so this is something I know a little bit about: https://www.deviantart.com/aravisian The icons within the button.image are set by the Icon Theme not by the Button size. This is something we can change, too. Let's try setting the system theme up to be a certain size, then set the Icon theme up in similar fashion. .nautilus-window entry, .titlebar entry, window.ssd headerbar.titlebar, .titlebar, .titlebar button *, headerbar button.titlebutton * { min-height: 42px…

There they adjust the theme files. The intention is not the same like mine, in that topic they want to make it bigger. But is that the direction I should take?
Thanks for the help!

[Aravisian]

@Zorunimac

But is that the direction I should take?

It is a direction that you can take.

  .nautilus-window entry, .titlebar entry, window.ssd headerbar.titlebar, .titlebar,  .titlebar button *, headerbar button.titlebutton * {
     min-height: 0px;
     min-width: 0px;
}

[jayesh]

@zabadabadoo

Settings>Appearance>Panel

I use 17 core and I just realised I dont have Appearance option in settings and dont remember having it in 16 aswell.

[zabadabadoo]

You are correct, my bad posting info from memory. I have EDITed my post above. Zab

[Zorunimac]

Ok thanks, but where do I get more information about that process? I have no idea about that.

Your answer also suggests that there are other ways too. What would they be? Thank's.

[Aravisian]

@Zorunimac

Ok thanks, but where do I get more information about that process? I have no idea about that.

You can use W3Schools to look up and learn quite a bit about .css learning and getting the hang of the syntax and logic.
Gnome also has a lot of documentation about using GTK3 .css:
https://developer-old.gnome.org/gtk3/unstable/chap-css-properties.html

Please do not let the daunting look of the pages fool you. It is a lot simpler than it looks.
In a very short summary: You start with a class. Each class needs properties assigned to it. The class leads with the properties contained in { brackets} following that class I.D.
Each property line is finished with a semi-colon;
Each property uses a set available value (a parameter) separated from the property by a colon :.
So, creating an example:

example-class {
     example-property: value;
}

With this format, you then will start out by using reference material to look up class I.D.'s, properties and values. You can use existing theme .css files to look up examples and valid values very easily.
After time, you begin to memorize information involuntarily.

@Zorunimac

Your answer also suggests that there are other ways too. What would they be? Thank's.

Other directions depend on what your exact wants are. If you want the entire display to make more use of space and the widget elements to be smaller, you can increase your screen resolution in the Displays settings rather than changing how your theme displays these elements.
You can use Scaling to adjust display properties rather than resolution.

If you want the widget elements changed, but the content and text not changed, then you would want to follow the .css above.

You also can search for existing themes in gnome-look rather than making or modifying your own that suits your needs.

[Zorunimac]

Thank you for your answer! But it seems that this CSS modifications are too complicated... Have zero idea where to start with this.

@Aravisian

Other directions depend on what your exact wants are. If you want the entire display to make more use of space and the widget elements to be smaller, you can increase your screen resolution in the Displays settings rather than changing how your theme displays these elements.
You can use Scaling to adjust display properties rather than resolution.

But then I would need to have a resolution bigger than the native resolution of the monitor, which is not available in the monitor settings. And the Fractual Scaling also only works to make everything bigger, not smaller. I would need 75% for example.

I was also looking for an other theme, but I could not yet find something that I like.

[Zorunimac]

@337harvey

With this enabled, the scaling applies to both taskbars.

Did not work in my case. Besides that it wouldn't be usefull when both taskbars change simultaneously.

But I've found an other solution for the top taskbar. With the Gnome extention "Just perfection" you can set the size of it in pixels! Exact what I was looking for. With the same extension it's also possible to move the clock from the middle to else where in the taskbar.

Now I only need a same easy solution to make the window titlebar and buttons smaller...